Hey, I made some sites that had basic layouts, just stuff stacked on top of each other, but the more I strayed from that the more I learned how horrible my CSS was. I'm trying to construct divs inside of divs, and everything looked great in web Expression 4, but when I previewed in browser all was not well. Maybe if someone could take a look and give me a crash course I'd love it, thanks. Aslo, how can I make this more appealing? The colors are just so I can see where stuff will be, lol #Outline{ height:100px; width:540px; border:1px black solid; } #Image{ height:60px; width:60px; float:left; padding:2px; } #Poster{ height:18px; width:360px; padding:2px; margin:4px 0px 0px 4px; float:left; background-color:aqua; } #Content{ height:32px; width:460px; padding:2px; margin: 2px 0px 0px 68px; Font-Family: Sans-Sarif; } #TagHolder{ height:20px; width:260px; float:left; padding:2px; margin: 8px 0px 0px 4px; Font-Family: Sans-Sarif; background-color:red; } #Tag1{ } Code (markup): <div id="Outline"> <div id="Image"></div> <div id="Poster"></div> <div id="Content">posts are the bomb, can't wait to start posting some. With the rest of the site it'll be a nice touch. Sure to be fire online! Pips posted all the time</div> <div id="TagHolder"><span id="Tag1">#TheBombHashTag</span></div> <div id="TagHolder"><span id="Tag1">#HashTagWars</span></div> </div> HTML:
If you use xhtml doctype you should use lowercase always. If plain html then it doesn´t matter if you use caps. You can not use id´s more than once. classes use can use how many times you like. You should also use percentages for widths. They give fluidity to your site. Here´s a quick fix up. Was not sure what you wanted but this is working in browsers. CSS: #outline{ width:50%; border:1px black solid; margin: 10px auto; overflow:auto; } #image{ background:red; height:60px; width:100%; float:left; padding:0; } #poster{ height:200px; width:50%; padding:0; margin:0; float:left; background:aqua; } #content{ width:50%; height:200px; padding:0; margin: 0; float:right; background:green; Font-Family: Sans-Sarif; overflow:auto; } p {padding:5px; margin:0;} .tagholder{ width:100%; float:left; background:yellow; overflow:auto; } .tag1{ padding:5px; margin: 0; Font-Family: Sans-Sarif; } Code (markup): HTML: <!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" lang="en-US"> <head profile="http://gmpg.org/xfn/11"> <title>Demosite</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen,projection" /> </head> <body> <div id="outline"> <div id="image"><p>image</p></div> <div id="content"><p>posts are the bomb, can't wait to start posting some. With the rest of the site it'll be a nice touch. Sure to be fire online! Pips posted all the time</p></div> <div id="poster"><p>poster</p></div> <div class="tagholder"><p class="Tag1">#TheBombHashTag</p></div> <div class="tagholder"><p class="Tag1">#HashTagWars</p></div> </div> </body> </html> HTML:
Hey, thanks for the quick lesson. I'll check the code out when I get home. Guess there's a lot I'm not aware of, so there's other code in the site that I'm going to have to change. Just wondering how is percents measured. I understand pixels, but how does percents relate to them... Is there a conversion method?
Ups. Found an error #outline{ width:50%; border:1px black solid; margin: 10px auto; overflow:auto; Code (markup): use border: 1px solid #000;