iUnknown
16-02-2008, 11:20 PM
Hello,
I'm trying to learn how to code layouts in DIVs and CSS. I first used SS's stickied tutorial to do my first CSS box, which worked well. Now I'm trying to teach myself to do layouts. I'm doing well, but I want to be able to add a javascript to make an iframe expand in the main content box. However, when I add lines <br> or <p> </p> to the content box, it makes white appear above and below the left and right. I have a div for the right and left (ids: #leftbot and #rightbot) that I would like to expand with the middle content box, but I'm not sure how to do this. I might of just done something wrong in the coding or there is something I need to add (that's why I need help!).
I've got it all in one container, then the left 3 boxes in a left container and content in middle container and right 3 boxes in right container. The CSS looks like this:
<style type="text/css">
<!--
body {
text-align: center;
background-color: #ffffff;
margin-top: 5px;
margin: auto;
}
p {
padding: 0px;
margin: 0px;
}
#container {
width: 923px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align:center
}
#top {
background: url(top.png);
height: 199px;
}
#left {
width: 212px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align:center;
float: left;
position: relative;
}
#navtop {
background: url(navtop.png);
height: 22px;
}
#leftmid {
background: url(leftmid.png);
}
#navbot {
background: url(navbot.png);
height: 31px;
}
#radiotop {
background: url(radiotop.png);
height: 20px;
}
#radiobot {
background: url(radiobot.png);
height: 20px;
}
#grouptop {
background: url(grouptop.png);
height: 26px;
}
#groupbot {
background: url(groupbot.png);
height: 5px;
}
#leftbot {
background: url(leftbot.png);
}
#middle {
width: 510px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align:center;
float: left;
position: relative;
}
#contenttop {
background: url(contenttop.png);
height: 4px;
}
#contentmid {
background: url(contentmid.png);
}
#right {
width: 201px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align:center;
float: right;
position: relative;
}
#statstop {
background: url(statstop.png);
height: 25px;
}
#rightmid {
background: url(rightmid.png);
}
#statsbot {
background: url(statsbot.png);
height: 37px;
}
#linktop {
background: url(linktop.png);
height: 26px;
}
#linkbot {
background: url(linkbot.png);
height: 39px;
}
#newstop {
background: url(newstop.png);
height: 24px;
}
#newsbot {
background: url(newsbot.png);
height: 5px;
}
#rightbot {
background: url(rightbot.png);
}
.style1 {font-size: 7px}
#footer1 {
background: url(leftbot2.png);
height: 26px;
}
#footer2 {
background: url(contentbot.png);
height: 26px;
}
#footer3 {
background: url(rightbot2.png);
height: 26px;
}
-->
</style>
Body code:
<div id="container">
<table width="924" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="top"></div></td>
</tr>
</table>
<div id="left">
<div id="navtop"></div>
<div id="leftmid">
<p>Nav here</p>
<p> </p>
<p> </p>
<p>yes</p>
<p>it's all expandable</p>
<p>:D </p>
<p> </p>
</div>
<div id="navbot"></div>
<div id="radiotop"></div>
<div id="leftmid">
<p>Radio text</p>
<p>yeah baby </p>
<p>whatever</p>
<p>u</p>
<p>want</p>
<p>here</p>
<p>lolz</p>
<p> </p>
</div>
<div id="radiobot"></div>
<div id="grouptop"></div>
<div id="leftmid">
<p>harhar</p>
<p>mm</p>
<p>sexily expanding</p>
<p>woohoo </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="groupbot"></div>
<div id="leftbot">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="middle">
<div id="contenttop"></div>
<div id="contentmid">
<p>hi</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="right">
<div id="statstop"></div>
<div id="rightmid">
<p>radio stats</p>
<p>here</p>
<p>yeah</p>
<p>ok?</p>
<p> </p>
<p>song and stuff</p>
<p>yeah</p>
<p>ok cool</p>
<p> </p>
<p> </p>
</div>
<div id="statsbot"></div>
<div id="linktop"></div>
<div id="rightmid">
<p>link us</p>
<p>can</p>
<p>go</p>
<p>here</p>
</div>
<div id="linkbot"></div>
<div id="newstop"></div>
<div id="rightmid">
<p>news here</p>
<p>title then date</p>
<p>or</p>
<p>however you</p>
<p>want it</p>
<p>so yeah</p>
<p>news - the layout now expands </p>
<p>lol</p>
<p> </p>
<p>pretty..</p>
<p> </p>
<p> </p>
<p> </p>
<p>.. big </p>
</div>
<div id="newsbot"></div>
<div id="rightbot">
<p> </p>
<p class="style1"> </p>
<p class="style1"> </p>
</div>
</div>
<table cellpadding="0" border="0" cellspacing="0" height="26"><tr><td><div id="footer1"></div><div id="footer2"></div><div id="footer3"></div></td></tr></table>
</div>
If there is any more information I need to provide to make it clearer or to help, then let me know. I would love if anyone could help me with this and +rep will be given. I know there are probably more glitches in the coding and I can fix them later, but this is my main one :P
I'm trying to learn how to code layouts in DIVs and CSS. I first used SS's stickied tutorial to do my first CSS box, which worked well. Now I'm trying to teach myself to do layouts. I'm doing well, but I want to be able to add a javascript to make an iframe expand in the main content box. However, when I add lines <br> or <p> </p> to the content box, it makes white appear above and below the left and right. I have a div for the right and left (ids: #leftbot and #rightbot) that I would like to expand with the middle content box, but I'm not sure how to do this. I might of just done something wrong in the coding or there is something I need to add (that's why I need help!).
I've got it all in one container, then the left 3 boxes in a left container and content in middle container and right 3 boxes in right container. The CSS looks like this:
<style type="text/css">
<!--
body {
text-align: center;
background-color: #ffffff;
margin-top: 5px;
margin: auto;
}
p {
padding: 0px;
margin: 0px;
}
#container {
width: 923px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align:center
}
#top {
background: url(top.png);
height: 199px;
}
#left {
width: 212px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align:center;
float: left;
position: relative;
}
#navtop {
background: url(navtop.png);
height: 22px;
}
#leftmid {
background: url(leftmid.png);
}
#navbot {
background: url(navbot.png);
height: 31px;
}
#radiotop {
background: url(radiotop.png);
height: 20px;
}
#radiobot {
background: url(radiobot.png);
height: 20px;
}
#grouptop {
background: url(grouptop.png);
height: 26px;
}
#groupbot {
background: url(groupbot.png);
height: 5px;
}
#leftbot {
background: url(leftbot.png);
}
#middle {
width: 510px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align:center;
float: left;
position: relative;
}
#contenttop {
background: url(contenttop.png);
height: 4px;
}
#contentmid {
background: url(contentmid.png);
}
#right {
width: 201px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align:center;
float: right;
position: relative;
}
#statstop {
background: url(statstop.png);
height: 25px;
}
#rightmid {
background: url(rightmid.png);
}
#statsbot {
background: url(statsbot.png);
height: 37px;
}
#linktop {
background: url(linktop.png);
height: 26px;
}
#linkbot {
background: url(linkbot.png);
height: 39px;
}
#newstop {
background: url(newstop.png);
height: 24px;
}
#newsbot {
background: url(newsbot.png);
height: 5px;
}
#rightbot {
background: url(rightbot.png);
}
.style1 {font-size: 7px}
#footer1 {
background: url(leftbot2.png);
height: 26px;
}
#footer2 {
background: url(contentbot.png);
height: 26px;
}
#footer3 {
background: url(rightbot2.png);
height: 26px;
}
-->
</style>
Body code:
<div id="container">
<table width="924" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="top"></div></td>
</tr>
</table>
<div id="left">
<div id="navtop"></div>
<div id="leftmid">
<p>Nav here</p>
<p> </p>
<p> </p>
<p>yes</p>
<p>it's all expandable</p>
<p>:D </p>
<p> </p>
</div>
<div id="navbot"></div>
<div id="radiotop"></div>
<div id="leftmid">
<p>Radio text</p>
<p>yeah baby </p>
<p>whatever</p>
<p>u</p>
<p>want</p>
<p>here</p>
<p>lolz</p>
<p> </p>
</div>
<div id="radiobot"></div>
<div id="grouptop"></div>
<div id="leftmid">
<p>harhar</p>
<p>mm</p>
<p>sexily expanding</p>
<p>woohoo </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="groupbot"></div>
<div id="leftbot">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="middle">
<div id="contenttop"></div>
<div id="contentmid">
<p>hi</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="right">
<div id="statstop"></div>
<div id="rightmid">
<p>radio stats</p>
<p>here</p>
<p>yeah</p>
<p>ok?</p>
<p> </p>
<p>song and stuff</p>
<p>yeah</p>
<p>ok cool</p>
<p> </p>
<p> </p>
</div>
<div id="statsbot"></div>
<div id="linktop"></div>
<div id="rightmid">
<p>link us</p>
<p>can</p>
<p>go</p>
<p>here</p>
</div>
<div id="linkbot"></div>
<div id="newstop"></div>
<div id="rightmid">
<p>news here</p>
<p>title then date</p>
<p>or</p>
<p>however you</p>
<p>want it</p>
<p>so yeah</p>
<p>news - the layout now expands </p>
<p>lol</p>
<p> </p>
<p>pretty..</p>
<p> </p>
<p> </p>
<p> </p>
<p>.. big </p>
</div>
<div id="newsbot"></div>
<div id="rightbot">
<p> </p>
<p class="style1"> </p>
<p class="style1"> </p>
</div>
</div>
<table cellpadding="0" border="0" cellspacing="0" height="26"><tr><td><div id="footer1"></div><div id="footer2"></div><div id="footer3"></div></td></tr></table>
</div>
If there is any more information I need to provide to make it clearer or to help, then let me know. I would love if anyone could help me with this and +rep will be given. I know there are probably more glitches in the coding and I can fix them later, but this is my main one :P