darkmonk Posted April 28, 2011 Share Posted April 28, 2011 iv been teaching myself over roughly 16 hours in the last 2 days HTML and CSS. none of the tutorials i have used have explained the uses of the following tag <div></div> can anyone tell me what this tag is used for most often or what you mostly use it for as tutorials dont give an in depth explaination on how to use it. :confused: thanks Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 28, 2011 Share Posted April 28, 2011 the div tag is a container . so in other words it contains stuff. for instance: <div id="maincontent"> <h2>heloo this is a header</h2> <p>this is some text</p> </div> By wrapping them in such a container it can be easier to target inner elements to give them a certain style, for instance the p and h2 elements in the div named main content. Div's are sort of building boxes where you put other elements in. just to give an idea of a general framework for a website. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title></title> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="middle"> <div id="mid"> </div> <div id="right"> </div> </div> <div id="footer"> </div> </div> </body> </html> good to know too is that it's a block element. But if i were you, instead of trying to figure it out yourself which takes much more time, just get a good book. These days there are quite some digital ones, so you don't have to wait for the mail man Quote Link to comment Share on other sites More sharing options...
PHPSuperNewb Posted April 28, 2011 Share Posted April 28, 2011 here is a little tutorial that might help you understand what they are: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/ A div is a block element which means that it contains the full width and height that you give to it. Div's are verry usefull when you eather give them the id, class or lang attributes. This way you can add a lot of cool stuff with it using css. This can be usefull for a lot of things for example: I want to have a background positioned in the center of my website and inside that background must be all of my menu's and stuff like that. (I guess you already understand how to write down css and html?) You start off by creating some divs and give them a couple of id attributes: <div id="background"> <div id="left-menu"> </div> <div id="content"> </div> <div id="right-menu"> </div> </div> now in css you can give them style's to actually make it look like you have something example: #background { background-image: url(../pictures/mybackground.jpg); background-repear:no-repeat; width:1400px; height:900px; margin-right:auto; margin-left:auto; } now you have a background image in the middle of your screen with 1400 width and 900 height. Inside that background you have a lot of other divs. Let's continue: #left-menu{ background-image:background-image: url(../pictures/left-menu.png); background-repear:no-repeat; } (I used png here so I can create a menu that has for example transparancy so you can still see the background or cut-off edges of your menu etc...) just screw around with it a little, underneath is a little example of what you can do with only the usage of divs: http://img233.imageshack.us/i/homesnitch.png/ http://img824.imageshack.us/i/snitchlogin.png/ edit: while I was typing this someone already respond, ow well >.> take a look if you like, might give inspiration xD Quote Link to comment Share on other sites More sharing options...
darkmonk Posted April 28, 2011 Author Share Posted April 28, 2011 But if i were you, instead of trying to figure it out yourself which takes much more time, just get a good book. These days there are quite some digital ones, so you don't have to wait for the mail man cheers for your advice and examples. i was advised to get the book - CSS-the missing manual. which i downloaded from amazon yesterday. its extremely in depth and it may even have a section later on in the book about <div>'s but im currently on page 113 of 456 and the question has been buggin me. so rather than reading the remaining 300+ pages to find out it doesnt even mention it would just do my nut in! so i thought id just ask and save myself hours of reading and disappointment if it is not explained in the book. i think im gettin the hand of it now, i can make a basic style sheet, with text formatting, backgrounds etc ...yadda yadda.... i think i understand the purpose of a <div> tag now, i guess i'll be better off going away and playing around with it and see what i can and can't do with it! thanks again Quote Link to comment Share on other sites More sharing options...
darkmonk Posted April 28, 2011 Author Share Posted April 28, 2011 oh i also forgot to ask can you recommend any decent free image/graphix creators? so i can make menu's, backgrounds etc easily? Quote Link to comment Share on other sites More sharing options...
PHPSuperNewb Posted April 28, 2011 Share Posted April 28, 2011 you can try paint.net, it's free and looks a bit like photoshop, has some great plug-ins (personally I preferr a cracked version of photoshop ^.^, pm me....) ow and also, if your having any trouble at all with your html and css I would suggest to look at this site: http://www.w3schools.com/ it has great explenations Quote Link to comment Share on other sites More sharing options...
Pikachu2000 Posted April 28, 2011 Share Posted April 28, 2011 For a free photoshop-like program, GIMP is pretty highly regarded. Quote Link to comment Share on other sites More sharing options...
darkmonk Posted April 28, 2011 Author Share Posted April 28, 2011 i might already own a cracked version of photoshop, but even if i did, i wouldnt know how to create graphix from scratch... only fix up photos! i was told to steer clear of w3schools apparently there is alot of misinformation there..... i might download GIMP unless anyone knows of a tutorial on how to create graphix on photoshop... Quote Link to comment Share on other sites More sharing options...
PHPSuperNewb Posted April 28, 2011 Share Posted April 28, 2011 i might already own a cracked version of photoshop, but even if i did, i wouldnt know how to create graphix from scratch... only fix up photos! i was told to steer clear of w3schools apparently there is alot of misinformation there..... i might download GIMP unless anyone knows of a tutorial on how to create graphix on photoshop... erm could you define graphix? Because photoshop is quite easy to use when creating your own images you just have to learn some of the basic tools and effects that photoshop has. The more your getting used to those effects and tools, the better your pictures are going to look Try starting off with something you want to create and look up a tutorial on that specific thing you want to create. There are lots of tutorials arround. It shouldn't be that hard.. make some abstract picture with effects, download some renders, c4d's, adjust some blending options, filters, layer adjustments and voila you already have a pretty neat looking background xD Quote Link to comment Share on other sites More sharing options...
darkmonk Posted April 28, 2011 Author Share Posted April 28, 2011 im wanting to make something similar to the pictures you posted of 'SNITCH' just wanting to learn how to create my own menu boxes, backgrounds, logo etc..... Quote Link to comment Share on other sites More sharing options...
PHPSuperNewb Posted April 28, 2011 Share Posted April 28, 2011 im wanting to make something similar to the pictures you posted of 'SNITCH' just wanting to learn how to create my own menu boxes, backgrounds, logo etc..... I can try helping you out, what are you aiming for? Is there any theme you want to give to your picture? Any characters you want to be shown in the picture? Does it need a lot of blood? Try finding some recources on the internet and then start "blending" them together a bit in photoshop I can give you some neat tutorials on creating backgrounds. Just a second maybe it's better if we talk through msn or something like that, would be a lot easyer instead of posting in this thread... mine is hylkutje_rugby@hotmail.com is it ok if I add you? Quote Link to comment Share on other sites More sharing options...
darkmonk Posted April 28, 2011 Author Share Posted April 28, 2011 ok cool, im adding you now Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 28, 2011 Share Posted April 28, 2011 oh i also forgot to ask can you recommend any decent free image/graphix creators? so i can make menu's, backgrounds etc easily? depending on the grafics. for simple buttons and pretty much anything but photo's something like Inkscape can be very useful. It's a vector 2d design program. As for Photo editing Gimp is good enough! The only thing why photoshop maybe nicer is because it has more brushes and automating stuff, but you can make (most of) those yourself in gimp (oh and they are free and good) As for the book, the book has an order for a reason, so stick to the master plan, and start being creative ones you finished it. I know it's tempting, but a book of 400 pages can be done easily in 4 days. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.