Page 1 of 2

CSS: +content = +space

Posted: Wed Mar 22, 2006 10:22 pm
by xEzMikex
feyd | Please use

Code: Select all

and

Code: Select all

tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Ok so i made a background and a content header. This is my css code for the BG and header.

Code: Select all

#bg{
background-color:545454;
height:inherit;
width:700px;
position:absolute;
left:30px;
top:289px;
}
#navhead{
background-image:url(images/walz_suncycle_14.gif);
height:19px;
width:191px;
position:absolute;
left:10px;
}
and this is the code im using in my html page

Code: Select all

<div id="bg">
<div id="navhead"></div>
</div>
ok but when the navheadshows up its not in the bg in matter of fact the bg isnt expanding at all sad.gif what do i do?


feyd | Please use

Code: Select all

and

Code: Select all

tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Wed Mar 22, 2006 10:55 pm
by feyd
This isn't PHP :?

Moved to Client Side.

Posted: Thu Mar 23, 2006 12:51 am
by matthijs
Give #bg a specific height:

Code: Select all

#bg {
height: 200px;
}
or remove the absolute positioning from #navhead. To give it the margin of 10px (I assume that's what you want?) just use margin and or padding.

absolute positioning takes an element out of the document flow. So if you give navhead an absolute position it will not influence its parent element bg anymore. And therefore the parent element collapses. Hope I explain it well, but if you look for some css positioning articles on for example positioniseverything.net you'll find better explanations.

Posted: Thu Mar 23, 2006 8:19 am
by xEzMikex
yea but if i add to many links to my nav it wont expand

Posted: Thu Mar 23, 2006 8:24 am
by matthijs
Well, thats obvious when you give it a fixed height. So if you want it to expand, remove the height

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
 #bg{
background-color:545454;
height:inherit;
width:700px;
position:absolute;
left:30px;
top:289px;
}
#navhead{
background-image:url(images/walz_suncycle_14.gif);
width:191px;
background:red;
}
-->
</style>
</head>
<body>

<div id="bg">
<div id="navhead">Hello this will be a <ul><li>List</li><li>of</li><li>many</li><li>items</li></ul></div>
</div>
</body>
</html>

Posted: Thu Mar 23, 2006 8:49 am
by xEzMikex
I will try that tonight when i get home from work thanks

Posted: Thu Mar 23, 2006 6:22 pm
by xEzMikex
Did not work :( the bg is not expanding, any other idias?

Posted: Thu Mar 23, 2006 6:44 pm
by Benjamin
Show me a jpg of what you want it to look like and I'll try to help you.

Posted: Thu Mar 23, 2006 6:51 pm
by Benjamin
Quick fix for the bg, you specified inherit for the bg div but it is a parent element. It has nothing to inherit, thus it will not expand. To fix this do...

Code: Select all

html body {
  height: 100%;
}
There might need to be a , between html & body in the code above, I can't remember.

Posted: Thu Mar 23, 2006 7:19 pm
by xEzMikex
when I do 100% why does it go past the scroll bar limit and not just the page size?

Posted: Thu Mar 23, 2006 8:08 pm
by Benjamin
That is because you have something before or after the bg div.

Posted: Thu Mar 23, 2006 9:01 pm
by xEzMikex
doesnt matter anymore i gotta redo the whole damn thing cause for my news system i make it so it remakes a news box under the first one so on and so on but i cant with absolute positioning ugh im so confused

Posted: Fri Mar 24, 2006 12:39 am
by matthijs
If you let us know what you want (maybe with an image) I'm sure it is not difficult to do. The code I gave definately works (removing the inherit thing, looked over that)

Posted: Fri Mar 24, 2006 8:06 am
by xEzMikex
NVM i can but this is what is happening....

Code: Select all

body{
   background-image:url(images/bg.gif);
   margin-top:0px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:9px;
   color:#f19f00;
}
#banner{
   background-image:url(images/walz_suncycle_01.gif);
   height:183px;
   width:700px;
   position:static;
}
#bg{
   background-image:url(images/line.gif);
   height:auto;
   width:700px;
   position:static;
   left:30px;
   top:287px;
}
#navhead{
   background-image:url(images/walz_suncycle_14.gif);
   height:21px;
   width:191px;
   float:left;
   font-size:14px;
   font-weight:bold;
   position:static;
}

Code: Select all

<html>
<head>
<title>SC</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body><center>
<div id="banner"></div>
<div id="bg"><br>
<div id="navhead">jhg</div>
</div>
</center>
</body>
</html>
LINK TO WHAT HAPPENS
http://65.93.175.194/sun2/blank.html

SEE I WANT THE BG TO EXPAND SINCE I ADDED THE NAV HEAD WHY IS IT NOT?

Posted: Fri Mar 24, 2006 9:20 am
by matthijs
Aah, now I see. The navhead is floated, and therefore is taken out of the "flow" of the element. It has to be cleared in some way to have the parent container expand. That can often be done with another element that's already in the document, like for example a footer

Code: Select all

<html>
<head>
<title>SC</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!-- 
body{
	background-image:url(images/bg.gif);
	margin-top:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#f19f00;
}
#banner{
	background-image:url(images/walz_suncycle_01.gif);
	height:183px;
	width:700px;
	position:static;
}
#bg{
	background-image:url(images/line.gif);
	
	width:700px;
	position:static;
	left:30px;
	top:287px;
}
#navhead{
	background-image:url(images/walz_suncycle_14.gif);
	height:21px;
	width:191px;
	float:left;
	font-size:14px;
	font-weight:bold;
	position:static;
}
#footer {
clear:both;
} 
-->
</style>
</head>
<body><center>
<div id="banner"></div>
<div id="bg"><br>
<div id="navhead">jhg</div>


<div id="footer">Some clearingelement</div>
</div>
</center>
</body>
</html>
if you search for some tutorial on css layouts with floats, you'll find many examples of 2 kol layouts with a header and footer which use this sort of model. Maxdesign.com.au has some very good tuts on floats.