jarrett000 Posted April 13, 2009 Share Posted April 13, 2009 I am developing a site (layout) for a friend and he gave all the specs. Here is what I have so far. When you visit that link you can see a top black div and some squares with languages on them. What I'm trying to do is put a div where that large space is in the middle without making it go under the sidebar or the sidebar go under it. I have tried floating and positioning of al kinds with css, I've giigled and still can't find a solution. Can anyone help? Link to comment Share on other sites More sharing options...
Ingolme Posted April 13, 2009 Share Posted April 13, 2009 Well, the main problem is that you're using absolute positioning. You also have a closing </div> tag at the end of the file that doesn't have an opening one.A lot of your CSS doesn't work because it's wrong, for example:div.Top#Topfont-faceThe W3C specification requires that all images must have an alt attribute.All those <br /> tags are not a good practise, different browsers may render <br /> tags with different heights.I also recommend you use a Strict DTD and not a Transitional one.Here's how your code should be: <!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" xml:lang="en_US"><head><link rel="shortcut icon" href="icon_032.png" /><meta http-equiv="Content-type" content="application/xhtml+xml;charset=UTF-8" /><meta name="description" content="Jarrettcode main page" /><title>Jarrettcode</title><style type="text/css">/*<![CDATA[*/html {font-size: 62.5%;font-family: "Verdana",sans-serif;padding: 0;}html,body {background-color: #383838;color: white;margin: 0;}body { padding: 8px;}#Top {padding: 1em;padding-top: 5em;background-color: black;font-size: 5em;}#left {float: left;width: 144px;}#left img {padding: 5px 0;display: block;margin: 0 auto;}#main {margin-left: 144px;}.blue {color: blue;font-size: 50px;}/*]]>*/</style></head><body><div id="Top">JarrettCode<span class="blue">.com</span></div><div id="left"><img src="icon_128.png" alt="HTML" /><img src="Jicon_128.png" alt="Java" /><img src="Cicon_128.png" alt="CSS" /><img src="Picon_128.png" alt="PHP" /><img src="Xicon_128.png" alt="XML" /></div><div id="main">All main content goes here</div></body></html> I highly recommend you put your CSS in an external stylesheet. Link to comment Share on other sites More sharing options...
jarrett000 Posted April 13, 2009 Author Share Posted April 13, 2009 Thanks, that works great. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.