Forum Moderators: not2easy
I have a site that I am converting over into CSS. My problem is that I don't know how to make CSS mimic what I have created using row and column spans.
my link is: <ooops>
Because of the setup of the page with the bar in the middle, I don't see how I can align it properly wit. Do I use 2 CSS tables side by side? Do I embed CSS tables?
I have looked around the web and in many books but have not been able to solve this problem. Any direction or suggestions are greatly appreciated.
Thank you
Shiree
[edited by: SuzyUK at 6:23 pm (utc) on Feb. 28, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]
and a warm welcome to these forums. ;)
Have a look at this example, it may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HomePage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
body {
background-color:#006;
color:#fff;
}
img, object {
display:block;
border:0 solid;
}
#container {
width:948px;
height:713px;
background-image:url(images/left_02.jpg);
background-repeat:no-repeat;
background-position:257px 0;
margin:auto;
}
#left {
float:left;
width:257px;
height:713px;
background-color:#fff;
color:#000;
}
#left img {
width:257px;
}
#left a img{
width:255px;
margin-left:1px;
}
#right {
float:left;
width:663px;
height:713px;
margin-left:28px;
}
#pastors {
float:left;
width:224px;
height:395px;
}
#boxbottom {
float:left;
width:439px;
height:98px;
}
#right_right {
float:left;
width:399px;
height:297px;
}
#right_right object {
width:399px;
height:173px;
}
#right_img {
float:left;
width:40px;
height:297px;
}
#pics {
clear:both;
width:663px;
height:169px;
}
</style></head>
<body ><div id="container">
<div id="left">
<img src="images/logo.gif" height="330" alt="logo"/>
<a href="home.htm"><img name="home" src="images/home.jpg" height="31" alt=""/></a>
<a href="pastors.htm"><img name="pastor" src="images/pastor.jpg" height="31" alt=""/></a>
<a href="copastor.htm"><img name="copastors" src="images/copastors.jpg" height="28" alt=""/></a>
<a href="worship.htm"><img name="worship" src="images/worship.jpg" height="30" alt=""/></a>
<a href="ministries.htm"><img name="otherministries" src="images/otherministries.jpg" height="30" alt=""/></a>
<a href="mission.htm"><img name="mission" src="images/mission.jpg" height="31" alt=""/></a>
<a href="contact.htm"><img name="contact" src="images/contact.jpg" height="29" alt=""/></a>
<img name="boxrt" src="images/boxrt.jpg" height="173" alt="boxrt"/>
</div><!--end left--><div id="right">
<img src="images/topheader.jpg" width="663" height="149" alt="header"/>
<img id="pastors" src="images/right_02.jpg" alt="pastors"/>
<img id="boxbottom" src="images/boxbottom.jpg" alt=""/><div id="right_right">
<object type="application/x-shockwave-flash" data="Flashswf/homesideflash.swf">
<param name="movie" value="Flashswf/homesideflash.swf" />
</object>
<img src="images/boxbottom-06.jpg" width="399" height="124" alt=""/>
</div><!--end right_right--><img id="right_img" src="images/right_05.jpg" alt=""/>
<object id="pics" type="application/x-shockwave-flash" data="Flashswf/bottompics.swf">
<param name="movie" value="Flashswf/bottompics.swf" />
</object>
</div><!--end right--></div><!--end container-->
</body></html>
birdbrain
[edited by: encyclo at 7:52 pm (utc) on Feb. 28, 2007]
[edit reason] removed specifics [/edit]
