PDA

Click to See Complete Forum and Search --> : What else besides tables??

IliketheWeb
09-11-2006, 07:55 PM
Heres the layout Im working with...
http://coastcommunity.org/Coast%20Layout.jpg

What should I use to lay down the main content (the area in the white)? Should I use tables???
crazycoder
09-11-2006, 08:01 PM
do it with the divs http://webdeveloper.com/forum/showpost.php?p=636314&postcount=10
IliketheWeb
09-11-2006, 08:11 PM
but how do I arrange everything? like would each picture and each paragraph be in a different DIV?
crazycoder
09-11-2006, 08:17 PM
<div><img ...></div><!- header -->
<div style='height: 700px;'><!- bottom part -->
<div style='width: 100px; height: 100%'><!- bottom left -->
...
</div>
<div style='width: auto; height: 100%; margin-left: 100px;'>
...<!- bottom right margin-left is the width of bottom left-->
</div>
</div>
IliketheWeb
09-11-2006, 08:25 PM
what do you mean...

<!- bottom part -->
<!- bottom left -->
<!- bottom right margin-left is the width of bottom left-->
crazycoder
09-11-2006, 08:49 PM
those are what the divs are
IliketheWeb
09-11-2006, 08:54 PM
ahhh im confused....sorry
ray326
09-11-2006, 10:09 PM
Ok I've had all the fun I can take for now. Here's how the rough structure would fall into place. Uncomment the body background to see how it overlays your design. The heading tags would us image replacements and the rest of your background graphics would be sliced up to become backgrounds of the various divs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Coast Community Church</title>
<style type="text/css">
body {
margin:0;
padding:0;
border: 0;
/*background: url(http://coastcommunity.org/Coast%20Layout.jpg) top left no-repeat;*/
color:#000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;
}

h1 {
width: 800px;
height: 125px;
margin: 0;
}

#infolinks {
width: 175px;
height: 730px;
float:left;
padding-top: 160px;
padding-left: 10px;
}
#infolinks h2 {
font-size: 100%;
margin: 40px 0 0 0;
border-bottom: 1px dotted blue;
}
#infolinks ul, #infolinks p {
font-size: 70%;
margin-top: 5px;
}
#infolinks li {
}

#main {
float:left;
width: 620px;
height: 730px;
}

div#menu {
}
#menu ul {
list-style: none;
width: 510px;
margin:0 auto;
}
#menu li {
width: 100px;
height: 55px;
text-align: center;
float: left;
border: 1px solid #aaf;
}

#content {
clear:both;
padding-left: 40px;
padding-right: 115px;
margin:0;
}
#content h2 {
width: 230px;
height: 55px;
margin:0;
float: left;
}
#content h3 {
clear:both;
border-bottom: 1px dotted #aaa;
}
#content p {
font-size: 70%;
}

img { border: 1px dotted black } /* just so they're visible */

img.rightpic {
float:right;
margin-left: 1em;
}
img.leftpic {
float:left;
margin-right: 1em;
}
</style>
</head>
<body>
<h1>Coast Community Church</h1>
<div id="infolinks">
<h2>Service Times</h2>
<p>10:00am</p>
<p>*Coast Cafe opens at 9:30 ...</p>
<h2>Visitor Info</h2>
<ul>
<li>about</li>
<li>sunday</li>
<li>directions</li>
<li>contact</li>
</ul>
<h2>Quick Links</h2>
<ul>
<li>event cal</li>
<li>downloads</li>
<li>podcast</li>
</ul>
</div>
<div id="main">
<div id="menu">
<ul>
<li>home</li>
<li>about</li>
<li>ministries</li>
<li>missions</li>
<li>contact</li>
</ul>
<div style="clear:both;font-size:1px">&nbsp;</div>
</div>
<div id="content">
<h2>Welcome to Coast</h2>
<p><img class="rightpic" src="" width="215" height="155" alt="">
Thanks for taking the time.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<h3>Sunday at Coast</h3>
<p><img class="leftpic" src="" width="200" height="170" alt="">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h3>Upcoming Events</h3>
<img class="rightpic" width="155" height="130" src="" alt="">
<dl>
<dt>Monday</dt>
<dd>Info on upcoming event <a href="">read more...</a><dd>
<dt>Friday</dt>
<dd>Info on upcoming event <a href="">read more...</a><dd>
<dt>Tuesday</dt>
<dd>Info on upcoming event <a href="">read more...</a><dd>
</dl>
</div>
</div>
</body>
</html>