long_way Posted November 9, 2006 Share Posted November 9, 2006 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 comment Share on other sites More sharing options...
jlhaslip Posted November 11, 2006 Share Posted November 11, 2006 Use Floats and Margins.Check the Tutorials @ w3schools. Link to comment Share on other sites More sharing options...
BiteMe Posted November 13, 2006 Share Posted November 13, 2006 And dont call yourself newbie in the subject, that is just annoying Link to comment Share on other sites More sharing options...
Err Posted November 15, 2006 Share Posted November 15, 2006 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 comment Share on other sites More sharing options...
jlhaslip Posted November 15, 2006 Share Posted November 15, 2006 Any newbie using the word "Newbie" is annoying in its self.Are they supposed to use "n00bie" ??? Link to comment Share on other sites More sharing options...
Err Posted November 16, 2006 Share Posted November 16, 2006 n00bie, newbie, etc... They're equally annoying no matter how a person spells it. Link to comment Share on other sites More sharing options...
perpetualnoob Posted November 16, 2006 Share Posted November 16, 2006 n00bie, newbie, etc... They're equally annoying no matter how a person spells it. Figures Link to comment Share on other sites More sharing options...
Err Posted November 17, 2006 Share Posted November 17, 2006 Silence you n00b!!! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now