...

View Full Version : div MINIMUM height?



singedpiper
06-02-2005, 11:32 PM
i'm making a page that i would like to have 780x400 in the center of the screen. i son't want to use a frameset, so i'd like text that is too long to simply stretch the div, however, I can't get it to work what there is is:
a content div containing:
a menu div
a text div
a player(mp3 player) div

currently the text div, when it overruns just shows text outside the boundaries. I'd like it to stretch the content div and shove the player div down.

is there a way to do this?




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

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Steven.Herreid.org</title>
<style type="text/css" media="screen"><!--
body
{
color: black;
background-color: #aaa;
margin: 0px

}

#horizon
{
color: black;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #fff;
text-align: left;
border-style: solid;
border-width: 1px;
border-color: #005500;
margin-left: -390px;
position: absolute;
top: -200px;
left: 50%;
width: 780px;
height: 400px;
visibility: visible
}

#nav-menu
{
width:780px;
height: 20px;
//background: url(background.gif) #fff bottom left repeat-x;
background-color: #990000;
color: #fff;
}

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: right;
margin: 0 0.15em;
padding: 0;
text-align: center
}

#nav-menu li a
{
height: 1em;
line-height: 1em;
float: left;
width: 5em;
display: block;
//border: 1px dashed #fff;
color: #fff;
text-decoration: none;
text-align: center;
}

#player
{
width:780px;
height: 15px;
}

#bodytext
{
height: 345px;
padding: 10px 20px 10px 20px;
font-size: 14px;
text-align: left;
}

.bodytext
{

}

.heading
{
font-size: 14px;
text-align: center;
}

.headline
{
font-weight: bold;
font-size: 24px;
}

#footer
{
font-size: 11px;
font-family: Arial, Verdana, Geneva,sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
margin-left: -200px;
left: 50%;
width: 400px;
height: 15px;
visibility: visible;
display: block;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #005500;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #005500;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #005500;
background-color: #fff;
}

a:link, a:visited
{
color: #06f;
text-decoration: none;
}

a:hover
{
color: red;
text-decoration: none
}

p
{
font-size: 12pt;
line-height: 1
}

p:first-letter
{
font-size: 200%;
//font-weight: bold;
//float: left
}

.firstline
{
font: black;
text-transform: uppercase;
}


--></style>
</head>

<body>
<div id="horizon">
<div id="content">
<div id="nav-menu">
<div style="float: left">Steven.Herreid.org :: Welcome!</div>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Lyrics</a></li>
<li><a href="#">Bio</a></li>
<li><a href="#">Home</a></li>
</ul>
<br>
</div>

<div id="bodytext">
<div class="heading">
This text is<br>
<span class="headline">DEAD CENTER</span><br>
and stays there!<br>
</div>
<p>
<span class="firstline">Lorem ipsum dolor est.</span> this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
Lorem ipsum dolor est. this is an example of sample text that can be used for typesetting and ect.
</p>
</div>
<div id="player">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="780" height="15" >
<param name="allowScriptAccess" value="sameDomain"/>
<param name="movie" value="xspf_player_slim.swf"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#E6E6E6"/>
<embed src="xspf_player_slim.swf?playlist_url=playlist.xspf"
quality="high" bgcolor="#E6E6E6" name="xspf_player_slim" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
align="center" height="15" width="780"> </embed>
</object>
</div>
</div>
</div>
<!--
<br>&nbsp;<br>
<div id="footer">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="400" height="15" >
<param name="allowScriptAccess" value="sameDomain"/>
<param name="movie" value="xspf_player_slim.swf"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#E6E6E6"/>
<embed src="xspf_player_slim.swf?playlist_url=playlist.xspf"
quality="high" bgcolor="#E6E6E6" name="xspf_player_slim" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
align="center" height="15" width="400"> </embed>
</object>
</div>
-->
</body>

</html>

ronaldb66
06-03-2005, 09:28 AM
Compliant browsers like FireFox should behave the way you describe; if you replace the height property with the min-height property, you should get the desired expanding behaviour.
IE however doesn't understand min-height but implements height the way min-height should behave; use min-height for compliant browsers and include height for IE, hiding it from compliant browsers using a CSS filter like the * html hack.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum