Baxtex Posted April 2, 2014 Share Posted April 2, 2014 (edited) Hello, to start off I'm kinda new to this so this might be really simple question: How do I position my blocks correctly? I can get it to look like I want, but my website works very bad with scaling (resizing the window) elements go out of frame and borders and it doesn't look good at all. Even though I have used relative position and only used % it's not looking good. Here is my code: HTML <!DOCTYPE html><html> <head> <title>Menus</title> <link rel="stylesheet" type="text/css" href="css1.css"> <link rel="stylesheet" type="text/css" href="css1meny.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="page"> <div id="header"> <h1>Äspåröds äventyrsland</h1> </div> <div id="menu"> <ul class="mainmenu"> <li><a href="x">Webb 1</a></li> <li><a href="x">Webb 2</a></li> <li><a href="x">Mobil 1</a></li> <li><a href="x">Mobil 2</a></li> </ul> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales nisi at <br> sem pretium, vitae posuere ante pharetra. Cras quis elit facilisis, ultricies eros a, <br> condimentum neque. Quisque commodo ullamcorper vestibulum. Ut orci tortor, dignissim non <br> fringilla a, eleifend quis risus. Curabitur<br> dictum tempor nisi a accumsan. Aenean rhoncus, metus non convallis varius, urna velit<br> imperdiet tortor, sed ornare nisl eros vel dolor. Mauris sed tortor scelerisque, porta purus<br> pretium, tempus velit. Maecenas et felis sed magna dignissim laoreet nec nec eros. Cras <br> sollicitudin molestie leo vel cursus. Donec quis orci ut metus congue gravida. Quisque <br> id tellus fringilla, malesuada dui eu, pretium tortor.<br> Sed ac volutpat massa, faucibus euismod purus. Maecenas suscipit lobortis congue. Pellentesque <br> enim massa, vestibulum et nisi sit amet, tincidunt suscipit metus. Vestibulum ante ipsum primis<br> <br><br><br> in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ultrices ipsum suscipit lacus <br> aliquet, porta tristique enim blandit. In pulvinar sem at libero tempor euismod adipiscing nec nulla.<br> Fusce dapibus at libero ac auctor. Nam mattis volutpat fringilla. Curabitur ante lectus,<br> faucibus sit amet pellentesque eu, porttitor at sapien.<br> Nam eu suscipit massa. Ut in nisi nec ipsum eleifend scelerisque.<br> Ut id consequat augue, egestas blandit neque. Nulla rutrum magna <br> ac convallis lacinia. Nulla facilisi. Nunc molestie auctor auctor.<br> ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br> In hac habitasse platea dictumst. Praesent elementum blandit purus vitae <br> cursus. Suspendisse vitae porttitor ante. Donec in lorem sapien. Fusce commodo <br> sagittis adipiscing. Duis metus orci, tincidunt nec lobortis non, egestas vitae sem.<br> Donec ipsum ante, consectetur eu leo eget, pharetra faucibus est. Aliquam ornare at sem <br> ac tincidunt. Nullam vel odio purus. Proin non ipsum enim. Donec adipiscing dolor at molestie<br> pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div id="footer"> </div> </div> </body></html> CSS body{background-color:grey;}#page{ /*Vet inte varför mina rundade hörn cpar*//*margin:5% 0% 2% 10%;*/width:80%;height:55em; /*Can't use this with % dunno why, page goes all crazy*/text-align:left;border-radius:20px;border-style:solid;border-width:2px;position:relative;top:30%;left:10%;}/*position: absolute; top: 10px; right: 10px;*/#header{ width:100%;height:10%;background-color:black;position:relative;}#menu{width:15%;height:80%;background-color:#CACAFF;float:left;position:relative;}#footer{width:100%;height:10%;background-color:#B4B4FF;float:left;position:relative;bottom:-0%;}#content{font-family:Helvetica;float:left;background-color:white;width:85%;height:80%;position:relative;}h1{position:absolute;left:40%;font-family:Verdana;color:#E6E600;} (not including my other css file for the menu) Anyone got any hints on how to solve my problem? Have I understood it all wrong? I have tryed implementing float:left but I don't really understand how to use them. I have also tried overflow:auto; which puts scollbars inside wich do help me, but isn't how I would like it to be. I want the rest of the page scale accordingly so when you make the window smaller the whole page just becomes smaller. Edited April 2, 2014 by Baxtex Link to comment Share on other sites More sharing options...
davej Posted April 2, 2014 Share Posted April 2, 2014 The first rule is to avoid using relative or absolute positioning unless there is no other way to achieve the desired result. Do you want an 80% width centered page? Link to comment Share on other sites More sharing options...
Baxtex Posted April 2, 2014 Author Share Posted April 2, 2014 The first rule is to avoid using relative or absolute positioning unless there is no other way to achieve the desired result. Do you want an 80% width centered page? Oh, but how do i position things then? Yes well this site is just for testing purposes, I just want the page centered, the width is not that important, but sure we can say 80%. Link to comment Share on other sites More sharing options...
davej Posted April 2, 2014 Share Posted April 2, 2014 Maybe something like... <!DOCTYPE html><html><head><meta charset="utf-8"><title>Menus</title><style>*{margin:0;padding:0;}body{background-color:#777;}#page{ /*Vet inte varför mina rundade hörn cpar*//*margin:5% 0% 2% 10%;*/width:80%;margin:0 auto;/*text-align:left;*/border-radius:20px;border:2px solid #000;background-color:#444;/*position:relative;top:30%;left:10%;*/}/*position: absolute; top: 10px; right: 10px;*/#header{ border-top-left-radius:20px;border-top-right-radius:20px;text-align:center;/*width:100%;*/height:80px;background-color:black;/*position:relative;*/}h1{/*position:absolute;left:40%;*/padding:10px;font-family:Verdana;color:#E6E600;}#menu{width:15%;min-height:800px;text-align:center;background-color:#CACAFF;float:left;/*position:relative;*/}#menu ul{margin:50px 0;list-style:none;}#content{/*text-align:left;*//*margin:3px 5px;*/font-family:Helvetica;float:left;background-color:white;width:85%;min-height:800px;/*height:80%;*//*position:relative;*/}p{margin:15px 25px;}#footer{/*width:100%;*/height:40px;text-align:center;background-color:#B4B4FF;clear:both;border-bottom-left-radius:20px;border-bottom-right-radius:20px;/*position:relative;bottom:-0%;*/}</style></head><body> <div id="page"> <div id="header"> <h1>Äspåröds äventyrsland</h1> </div> <div id="menu"> <ul class="mainmenu"> <li><a href="#">Webb 1</a></li> <li><a href="#">Webb 2</a></li> <li><a href="#">Mobil 1</a></li> <li><a href="#">Mobil 2</a></li> </ul> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales nisi at sem pretium, vitae posuere ante pharetra. Cras quis elit facilisis, ultricies eros a, condimentum neque. Quisque commodo ullamcorper vestibulum. Ut orci tortor, dignissim non fringilla a, eleifend quis risus. Curabitur dictum tempor nisi a accumsan. Aenean rhoncus, metus non convallis varius, urna velit imperdiet tortor, sed ornare nisl eros vel dolor. Mauris sed tortor scelerisque, porta purus pretium, tempus velit. Maecenas et felis sed magna dignissim laoreet nec nec eros. Cras sollicitudin molestie leo vel cursus. Donec quis orci ut metus congue gravida. Quisque id tellus fringilla, malesuada dui eu, pretium tortor.</p> <p>Sed ac volutpat massa, faucibus euismod purus. Maecenas suscipit lobortis congue. Pellentesque enim massa, vestibulum et nisi sit amet, tincidunt suscipit metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ultrices ipsum suscipit lacus aliquet, porta tristique enim blandit. In pulvinar sem at libero tempor euismod adipiscing nec nulla. Fusce dapibus at libero ac auctor.</p> <p>Nam mattis volutpat fringilla. Curabitur ante lectus, faucibus sit amet pellentesque eu, porttitor at sapien. Nam eu suscipit massa. Ut in nisi nec ipsum eleifend scelerisque. Ut id consequat augue, egestas blandit neque. Nulla rutrum magna ac convallis lacinia. Nulla facilisi. Nunc molestie auctor auctor. colisi sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>In hac habitasse platea dictumst. Praesent elementum blandit purus vitae cursus. Suspendisse vitae porttitor ante. Donec in lorem sapien. Fusce commodo sagittis adipiscing. Duis metus orci, tincidunt nec lobortis non, egestas vitae sem. Donec ipsum ante, consectetur eu leo eget, pharetra faucibus est. Aliquam ornare at sem ac tincidunt. Nullam vel odio purus. Proin non ipsum enim. Donec adipiscing dolor at molestie pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div id="footer"> ©Copyright 2014 </div> </div></body></html> 1 Link to comment Share on other sites More sharing options...
Baxtex Posted April 3, 2014 Author Share Posted April 3, 2014 This works like a charm, thank you sir! The only problem is the menu background/column which doesn't get higher, as the rest of the page, and I have used min-height. Link to comment Share on other sites More sharing options...
davej Posted April 3, 2014 Share Posted April 3, 2014 Oh yes, set the background color for #page to the same value as #menu. Also remove the fixed height from the #header. Then increase the padding on h1 to 18px. Also you can reduce the border radius on #header to about 18px to close up that strange little gap. 1 Link to comment Share on other sites More sharing options...
Baxtex Posted April 3, 2014 Author Share Posted April 3, 2014 Oh yes, set the background color for #page to the same value as #menu. Also remove the fixed height from the #header. Then increase the padding on h1 to 18px. Also you can reduce the border radius on #header to about 18px to close up that strange little gap. Wasn't that I mean I mean the left menu bar, look: http://sv.tinypic.com/view.php?pic=2z6b51f&s=8 You see how it get's grey down in the left corner as the bar don't stretch? Link to comment Share on other sites More sharing options...
davej Posted April 3, 2014 Share Posted April 3, 2014 That's why I suggested changing the color. 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