3 replies [Last post]
BobbyDouglas
Offline
newbie
Last seen: 16 years 12 weeks ago
Joined: 2003-08-22
Posts: 9
Points: 0

Im back with another site this time.

I want to start out with a page like this layout:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber1">
  <tr>
    <td width="100%" colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="31%">&nbsp;</td>
    <td width="69%">&nbsp;</td>
  </tr>
</table>

I want to break it up into 3 seperate divs. So I started out like:

<html>

<head>
<title>Title</title>
<style>
#top{width:100%; height:30px;
#left{width:20%; height:100%;}   
#right{width:80%; height:100%;} 
</style>
</head>

<body>
<div id="top"> </div>

<div id="left"> </div>

<div id="right"> </div>
</body>

</html>

Inside the left div, I want to have:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="192">
  <tr>
    <td width="34" rowspan="3" bgcolor="#B2B2B2">
    <img border="0" src="../images/spacer.gif" width="1" height="1"></td>
    <td width="34">
			<img src="images/latest_newsl.jpg" width=34 height=33></td>
    <td width="129">
			<img src="images/latest_news.jpg" width=157 height=33></td>
    <td bgcolor="#B2B2B2" rowspan="3" width="1">
    <img border="0" src="../images/spacer.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td width="34">&nbsp;</td>
    <td width="129">&nbsp;</td>
  </tr>
  <tr>
    <td width="163" colspan="2" bgcolor="#B2B2B2">
    <img border="0" src="../images/spacer.gif" width="1" height="1"></td>
  </tr>
</table>

And inside the right div I would like to have:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="543">
  <tr>
    <td width="1" rowspan="3" bgcolor="#B2B2B2">
    <img border="0" src="../images/spacer.gif" width="1" height="1"></td>
    <td width="541" colspan="2">
			<IMG SRC="images/welcome.jpg" width="541" height="33"></td>
    <td bgcolor="#B2B2B2" rowspan="3" width="1">
    <img border="0" src="../images/spacer.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td>
    <img border="0" src="../images/spacer.gif" width="20" height="2"></td>
    <td width="521"><font face="Verdana" size="2" color="#707D8D">This is the 
    body text sample.</font><p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</td>
  </tr>
  <tr>
    <td width="541" colspan="2" bgcolor="#B2B2B2">
    <img border="0" src="../images/spacer.gif" width="1" height="1"></td>
  </tr>
</table>

BobbyDouglas
Offline
newbie
Last seen: 16 years 12 weeks ago
Joined: 2003-08-22
Posts: 9
Points: 0

DIV Style

Another view for this effect I am trying to get.

On the top page, I will just have an image.

For the left div, I will use www.mrbobdouglas.com/americo/template/left.htm . As for the right, I will use www.mrbobdouglas.com/americo/template/right.htm . Very simple idea... should not be too hard to do.

Thanks Wink

procywolfy
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2003-07-21
Posts: 21
Points: 0

DIV Style

*covers his eyes as soon as he sees spacer.gif* Tongue

hehe, Okay, let's see here.
You're on the right track, but I noticed a little type that might be causing you trouble:

#top{width:100%; height:30px;

Don't forget to close the selector with the } .

And here is the CSS that _should_ work.
sorry the formatting is sloppy; I'm tired Smile

<html>

<head>
<title>Title</title>
<style>
body {
	margin: 0;
	padding: 0;
	}

#top{
width:100%;
height:30px; 
background-color: 
#eee;
}

#left{
width:20%;
height:100%;
background-color: aaa;
}
   
#right{
width:80%;
height:100%;
background-color: #c00;
position: absolute;
top: 30px;
left: 20%;
}

</style>
</head>

<body>
<div id="top"> </div>

<div id="left"> </div>

<div id="right"> </div>
</body>

</html>

Enjoy,
-Wolfy

bfire52
Offline
newbie
Last seen: 10 years 24 weeks ago
Joined: 2009-05-29
Posts: 1
Points: 0

phone sex phone sex phone