Jump to content

Main Content


jarrett000
 Share

Recommended Posts

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...