Need help with tableless layout [Archive]

View Full Version : Need help with tableless layout

kraftomatic

12-16-2003, 03:49 PM

Hey All,

I have this layout, which is almost set, minus one problem. I cannot get my "contentrightbottom" tag to stretch vertically over the "contentticker" tag. Here is the code. Any help would be appreciated.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>consumer credit</title>

<style type="text/css">

body {
text-align:center;
}

#frame {
width:750px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
}

#mainrow {
width:750px;
height:220px;
background: #fff;
padding-bottom: 2px;
}

#contentcenter {
width:552px;
height:200px;
padding:0px;
float:left;
margin-right: 2px;
background:#eee;
}

#contentticker {
width:552px;
height:20px;
padding:0px;
margin-top: 2px;
float:left;
background:#f7f7f7;
}

#contentrighttop {
width:196px;
height:99px;
padding:0px;
float:left;
background:#f7f7f7;
}

#contentrightbottom {
width:196px;
height:99px;
padding:0px;
margin-top: 2px;
float:left;
background:#f7f7f7;
}

#contentbottomleft {
width:195px;
height:130px;
padding:0px;
float:left;
background:#f7f7f7;
}

#contentbottomcenter {
width:350px;
height:130px;
padding-left: 5px;
float:left;
margin-left: 2px;
margin-right: 2px;
background:#f7f7f7;
}

#contentbottomright {
width:195px;
height:130px;
padding:0px;
float:left;
background:#f7f7f7;
}

#contentheader {
height:20px;
background:#f7f7f7;
margin-bottom:2px;
}

p,h1,pre {
font: .60em Verdana,Helvetica,Arial;
margin:0px 10px 10px 10px;
}

h1 {
font: Verdana,Helvetica,Arial;
font-weight: bold;
padding-top:5px;
}

#contentheader h1 {
font: .60em Verdana,Helvetica,Arial;
padding:2px;
margin:2px;
}

</style>

</head>
<body>

<div id="frame">
<div id="contentheader"><h1>main navigation here</h1></div>

<div id="mainrow">

<div id="contentcenter">
<h1>contentcenter</h1>
<p>flash center piece here</p>
</div>

<div id="contentrighttop">
<h1>contentrighttop</h1>
<p>text here</p>
</div>

<div id="contentrightbottom">
<h1>contentrightbottom</h1>
<p>text here</p>
</div>

<div id="contentticker">
ticker here
</div>

</div>

<div id="contentbottomleft">
<h1>contentbottomleft</h1>
<p>text here</p>
</div>

<div id="contentbottomcenter">
<h1>contentbottomcenter</h1>
<p>text here</p>
</div>

<div id="contentbottomright">
<h1>contentbottomright</h1>
<p>text here</p>
</div>

<br style="clear:both" />
</div>

</body>
</html>

lavalamp

12-16-2003, 07:48 PM

Try adding something like this to the styles for contentbottomright:

margin-top:-100px;

kraftomatic

12-16-2003, 08:06 PM

I got it to work .. FWIW, here's how I did it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>consumer credit</title>

<style type="text/css">

body {
text-align:center;
}

#frame {
width:750px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
/*
border: thin;
border-color: red;
border-style: dashed;
*/
}

#innerframe {
width:750px;
height:220px;
margin-right:0px;
margin-left:0px;
margin-bottom:0px;
margin-top:0px;
padding:0px;
text-align:left;
/*
border: thin;
border-color: orange;
border-style: dashed;
*/
}

#mainrow {
width:552px;
height:220px;
background: #fff;
padding-bottom: 2px;
float:left;
/*
border: thin;
border-color: Fuchsia;
border-style: dashed;
*/
}

#rightcolumn {
width:50px;
height:120px;
background: #fff;
padding-bottom: 2px;
float:left;
border: thin;
border-color: green;
border-style: dashed;
}

#contentcenter {
width:552px;
height:200px;
padding:0px;
float:left;
margin-right: 2px;
background:#eee;
}

#contentticker {
width:552px;
height:20px;
padding:0px;
margin-top: 2px;
float:left;
background:#f7f7f7;
}

#contentrighttop {
width:196px;
height:110px;
padding:0px;
float:left;
background:#f7f7f7;
}

#contentrightbottom {
width:196px;
height:110px;
padding:0px;
margin-top: 2px;
float:left;
background:#f7f7f7;
}

#contentbottomleft {
width:195px;
height:130px;
padding:0px;
float:left;
background:#f7f7f7;
}

#contentbottomcenter {
width:350px;
height:130px;
padding-left: 5px;
float:left;
margin-left: 2px;
margin-right: 2px;
background:#f7f7f7;
}

#contentbottomright {
width:195px;
height:130px;
padding:0px;
float:left;
background:#f7f7f7;
}

#contentheader {
height:20px;
background:#f7f7f7;
margin-bottom:2px;
}

p,h1,pre {
font: .60em Verdana,Helvetica,Arial;
margin:0px 10px 10px 10px;
}

h1 {
font: Verdana,Helvetica,Arial;
font-weight: bold;
padding-top:5px;
}

#contentheader h1 {
font: .60em Verdana,Helvetica,Arial;
padding:2px;
margin:2px;
}

</style>

</head>
<body>

<div id="frame">
<div id="contentheader"><h1>main navigation here</h1></div>

<div id="innerframe">

<div id="mainrow">
<div id="contentcenter">
<h1>contentcenter</h1>
<p>flash center piece here</p>
</div>

<div id="contentticker">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="552" HEIGHT="20" id="news" ALIGN="">
<PARAM NAME=movie VALUE="news.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="news.swf" quality=high bgcolor=#FFFFFF WIDTH="552" HEIGHT="20" NAME="news" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</div>
</div>

<div id="contentrighttop">
<h1>contentrighttop</h1>
<p>text here</p>
</div>

<div id="contentrightbottom">
<h1>contentrightbottom</h1>
<p>text here</p>
</div>

</div>

<div id="contentbottomleft">
<h1>contentbottomleft</h1>
<p>text here</p>
</div>

<div id="contentbottomcenter">
<h1>contentbottomcenter</h1>
<p>text here</p>
</div>

<div id="contentbottomright">
<h1>contentbottomright</h1>
<p>text here</p>
</div>

<br style="clear:both" />
</div>

</body>
</html>

Thanks.

lavalamp

12-16-2003, 09:40 PM

Glad you sorted it out.