Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question div MINIMUM height?

    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?

    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What browser?

    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.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •