singedpiper
06-02-2005, 10: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> <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>
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> <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>