Jump to content

newbie CSS positioning


Recommended Posts

Need help with positioning of div boxes.I like to have navigation menu on the left and some boxes positioned next to it.Relative positioning does not work as it shifts all boxes under the menu level.Negative numbers shift boxes where I want them but leaves empty space under the menu where normaly they would appear if not positioned.Hope you understand my english lol.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>test layout</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"><!--body {       margin:0px;background-color:#ffffff;background-image:url("MUJ WEB/WEB ELEMENTS/4943299.gif");}div#xcontainer {position:relative;vertical-align:middle;width:100%;height:auto;}	div#xinner {	width:770px;	background:#ffffff;	height:800px;	margin-left:auto;	margin-right:auto;}div#header {width:770px;height:136px;background:#336699;}div#ddblueblockmenu{border-right: 1px solid #000000;border-bottom: 1px solid #000000;width: 126px;background-color:#000000;}#ddblueblockmenu ul{margin: 0px;padding: 0px;list-style-type:none;font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;}#ddblueblockmenu li a{background-image:url("MUJ WEB/WEB ELEMENTS/background3.gif");display: block;padding-left: 9px;width: 110px; text-decoration: none;color: white;background-color:#000000;border-bottom: 1px solid #90bade;border-left: 6px solid #000000;}#ddblueblockmenu li a:hover {border-left-color:#FF0000;color:#66ff00;background-image:url("MUJ WEB/WEB ELEMENTS/.gif");}#ddblueblockmenu li a:active {border-left-color:#ff0000;color:#66ff00;background-image:url("MUJ WEB/WEB ELEMENTS/.gif");}#ddblueblockmenu div.menutitle{color:#33ccff;background-color:#333333;border-bottom: 1px solid #000000;text-align:center;font: bold 80% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;}.headtitle{color:#33CCFF;background-color:#333333;border-bottom: 1px solid #000000;text-align:center;font: bold 80% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;}div#nav1 { position:relative;top:-680px;left:150px;width:450px;height:300px;border: 1px solid #ff0000;}		div#nav2 { position:relative;top:-670px;left:150px;width:450px;height:200px;border: 1px solid #ff0000;}		div#nav3 {position:relative;top:-660px;left:150px;width:450px;height:200px;border: 1px solid #ff0000;}--></style></head><body>	<div id="xcontainer">	  <div id="xinner">		  <div id="header"></div><div id="ddblueblockmenu"><div class="menutitle" align="center">DYNAMIC DRIVE</div><ul><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#" style="border-bottom-color: #000000">some text</a></li></ul><div class="menutitle" align="center">DYNAMIC DRIVE</div><ul><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#" style="border-bottom-color: #000000">some text</a></li></ul><div class="menutitle" align="center">DYNAMIC DRIVE</div><ul><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#" style="border-bottom-color: #000000">some text</a></li></ul><div class="menutitle" align="center">DYNAMIC DRIVE</div><ul><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#" style="border-bottom-color: #000000">some text</a></li></ul></div>	<div class="headtitle" id="nav1">SOME TEXT</div>	<div class="headtitle" id="nav2">SOME TEXT</div>		<div class="headtitle" id="nav3">SOME TEXT</div>	 	 	 	 	 	  </div></div></body></html>
Link to post
Share on other sites
And dont call yourself newbie in the subject, that is just annoying :)
Any newbie using the word "Newbie" is annoying in its self. :)
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...