Jump to content

Im trying to get my header centered and a display box on the left side


Recommended Posts

Im having some trobles with this im trying to center my header and create a display box no matter what I do the header stays to the top left and there is no display box. The page is not on the net yet so dont know how to show it to you guys so you can see what I am talking about but, here is the code.here is the css codepadding:0px;margin:0px;}div.sidebar /*side bar links*/{postion:fixed; top: 100px;left: 20px;width: 200px;}#menuitems{list-style: none;Margin: 1.5em 0 1em 0;}#menuitems li{font-size: 12px;padding: 0;margin: 0;}#menuitmes a { display: block;height: 2.0em;line-height: 2em;padding: 0 0 0 0.8em;margin-bottom: 1px;color: #eee;background-color: #333;text-decoration: none;}#menuitmes a: hover{color: #eee;background-color: #666;text-decoration:none;}and here is the html stuff<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"><head> <title>Jackson Disc Golf</title><link rel="stylesheet"type="text/css" href="home.css" /></head><body><div id="header"> <img src="header.jpg" /></div> <div class="sidebar"><ul id="menuitems"> <li><a href="www.smdga.com">SMDGA</a></li> <li><a href="www.vikingcreek.com">Viking creek</a></li></ul></div></body></html>

Link to post
Share on other sites

On your style for div.sidebar, you mispelled "position". And, to get your header image to center, you can do it one of two ways.Center everything in the header:

#header {	text-align: center;}

If you know the width of the image, set the div's width equal to that. The do an auto margin.

#header {	width: 500px;	margin: 0px auto;}

Link to post
Share on other sites

what does your code look like now? Make sure the beginning of your stylesheet doesn't get cut off.

Edited by thescientist
Link to post
Share on other sites
and for the header it is just an image and trying to just center the hole image it self
You can use text-align: center to center everything, not just text.I'm wondering what you mean by a display box? Some more description on that could be useful.
Link to post
Share on other sites
You can use text-align: center to center everything, not just text.I'm wondering what you mean by a display box? Some more description on that could be useful.
this only applies to inline elements. The proper way to center block level elements is margin: 0 auto
Link to post
Share on other sites
this only applies to inline elements. The proper way to center block level elements is margin: 0 auto
Thanks for that clarification! Good stuff to know.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...