Jump to content

minimze content div, footer tnot follow up


Chris

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;}

Link to comment
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
Link to comment
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
Link to comment
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.

Link to comment
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
Link to comment
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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...