Jump to content
Sign in to follow this  
Chris

minimze content div, footer tnot follow up

Recommended Posts

So im here again, with another problem now. Look at the site http://mbdbygg.zxq.net/. The grey area in the middle is a div id called content and it is 800px height. Now i want to reduce the height to 400px, cause i dont need such wide space between the pictures and the footer as you see. The content div should end where the div class "center" ends. It has a border color to see where it ends. The problem now is that when i change the height to 400px the box only goes upand leaving a WHITE space under it.Meaning the footer does not follow up to the content div! What am i missing? I attach the css:

*{    margin: 0px;    padding: 0px;}body {    margin-left: 0px;    margin-top: 0px;}img {    border: none;}#wrapper {    min-width: 1347px;   border: 1px solid #727272;font-family:Verdana, Arial, Helvetica, sans-serif;color:#cccccc;}#header {    height: 180px;background-color:#FFFFFF;background-repeat:repeat-x;background-image:url(mbdbygg.gif);background-position:center;background-repeat:no-repeat;}  #content { height: 800px;background-color:#2A2727;background-repeat:repeat-x;}.lefttext {position:relative;float:left;top:50px;left:40px;width:250px;height:400px;border: 1px solid #727272;}.righttext {position:relative;float:right;top:50px;right:40px;width:250px;height:400px;border: 1px solid #727272;}#center {position:relative;top:50px;left:297px;width:750px;height:500px;border: 1px solid #727272;}.meny {position:relative;font-family:Verdana, Arial, Helvetica, sans-serif;left:73px;    top:12px;float:left;}.meny li{  display:inline;  }.meny ul li a{    text-decoration: underline;     color:#cccccc;    font-weight: bold;   }.meny ul li a:hover{    text-decoration: none;    }   .bilder {	 position:relative;	 float:left;	 left:1px;	 top:-360px;	    }	 .bilder img{	  display: inline;	  border: 1px solid #7F7D7D;	  }       .thumbnail {    width:170px;    height:130px;    margin:5px;       }#footer {background-color:#2A2727;background-repeat:repeat-x;border-top: 1px solid #727272;margin:0 auto;    height: 60px;    clear: both;}div#footer p {font-size:0.6em;font-family:Verdana, Arial, Helvetica, sans-serif;text-align:center;margin:0;padding:25px;}

Share this post


Link to post
Share on other sites

You're relying too much on relative positioning.When you use "position: relative" the space that was occupied by the element continues to be occupied even after the element has moved. You also shouldn't need to set the height on most elements. The height of an element is automatically calculated based on the content within it.

  • Like 1

Share this post


Link to post
Share on other sites
You're relying too much on relative positioning.When you use "position: relative" the space that was occupied by the element continues to be occupied even after the element has moved. You also shouldn't need to set the height on most elements. The height of an element is automatically calculated based on the content within it.
Ok, but what should i do then?? Remove these and do margin-left rights something like that perhaps or what? I thought it was that you say, i tried to remove some pos. relat. and the left and right textbox, but when i did there came up a blank white space under the footer for some reason. about 5 mm whiter space :S Edited by Chris

Share this post


Link to post
Share on other sites

Once the footer goes up far enough, all the space below it is going to be the color of the <html> element's background. The best thing would be to start over from the beginning.You have multiple elements:

<div id="header"></div><div id="left_column"></div><div id="right_column"></div><div id="content"></div><div id="footer"></div>

You use float and clear to put them in their proper position, use margins to prevent content from wrapping around the floated elements.Apply a background color to the <html> and <body> elements to prevent white from appearing anywhere.

html, body { background-color: #CCCCCC; }#left_column { float: left; width: 200px; }#right_column { float: right; width: 220px; }#content { margin-left: 200px; margin-right: 220px; }#footer { clear: both; }

This is just the basics, look for tutorials on CSS float layouts to learn more.

Share this post


Link to post
Share on other sites
Once the footer goes up far enough, all the space below it is going to be the color of the <html> element's background. The best thing would be to start over from the beginning.You have multiple elements:
<div id="header"></div><div id="left_column"></div><div id="right_column"></div><div id="content"></div><div id="footer"></div>

You use float and clear to put them in their proper position, use margins to prevent content from wrapping around the floated elements.Apply a background color to the <html> and <body> elements to prevent white from appearing anywhere.

html, body { background-color: #CCCCCC; }#left_column { float: left; width: 200px; }#right_column { float: right; width: 220px; }#content { margin-left: 200px; margin-right: 220px; }#footer { clear: both; }

This is just the basics, look for tutorials on CSS float layouts to learn more.

Sigh.... :P........After so much time to find that min-width syntax wich was my first problem, since i never done a web-layout like this before. I am of course familiar with float though. I thought i did not have to make it all upp from the beginning though :/!! Thank you though. PS: Are you really sure, i need to do all this again, just because to add float to it? Well il be right back later on tonight with an answer :) Edited by Chris

Share this post


Link to post
Share on other sites

Ok maybe this could work, but what do i need to do for the divs to go to sides FULL as they do on the other site i showed you?? Right now they have a margin of about 5 mm to the sides. (and i dont have any margins in the div, i have it as it is except that i put a "min-width: 1347px;" in the html, body tag for the content to be autoscroll when for ex. minizming the window.

Share this post


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...
Sign in to follow this  

×
×
  • Create New...