Need Help with Webpage Layout

liunx · Jan 10, 2008

Hello everyone! Im having a problem setting up my webpage the way I want it. 
My Web Page (<a class="postlink" href="http://www.angelfire.com/ky3/snorkel/index.html">http://www.angelfire.com/ky3/snorkel/index.html</a>) 
The way I have it layed out is how I want it but its not written right. What I want is to have the banner right where its at. And the left(palm trees) as my navigation area.The white area will be my Main page or where my navigation page will link me. Please keep in mind that I'm a beginner. Friends have told me to use frames but I want to have a seamless effect with the images(no borders). Can anyone help me. Thank you very much if you reply.

how would it not look seemles with frames?Someone told me that there would be scroll bars.But they also told me that it would take longer to load. Not sure if they are right.I just need help with the script writing.Thanks everyone

I figured it out.there is no reason for you to be using frames. Frames are not a model for accessabiity and they will cramp your ability to design. If you want a scroll bar use a div 
<div style="overflow:auto; height:500px; width:500px;">this will create a box and the content will scroll when the content is bigger then the box</div>If I am using an image map is it possible to position the banner and a text area using css or html? Im a beginner and Im not sure how to use css. I know a little of html.I dono bout a map, I never use them, but probably... But <a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a> is a great place to learn html and css. <a class="postlink" href="http://www.bluerobot.com">www.bluerobot.com</a> has some good rudimentary css based layouts.The page looks ok on 1024x768 but when I change the settings to 800x600 it looks crowded. Is there a way to adjust the webpage so it adjusts to the different settings of a visitor?(so it wont look crowded at lower screen settings)Originally posted by Jeramie 
The page looks ok on 1024x768 but when I change the settings to 800x600 it looks crowded. Is there a way to adjust the webpage so it adjusts to the different settings of a visitor?(so it wont look crowded at lower screen settings) 
 
First off, get rid of the frames. They're not doing you any favors and will just be a bigger headache as the site grows. 
 
You can reproduce this home page layout more effectively using one table (ducks the rocks from the CSS crowd). 
 
Use this: 
<HTML> 
<BODY STYLE="padding:0px; margin: 0px 0px 0px 0px;" > 
<TABLE> 
<TR> 
<TD WIDTH="174" HEIGHT="600" ROWSPAN="2" VALIGN="top"> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"left1.jpg"> 
</TD> 
<TD WIDTH="747" HEIGHT="145" VALIGN="top"> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"Banner.jpg"> 
</TD> 
</TR> 
<TR> 
<TD WIDTH="757" HEIGHT="455" VALIGN="top"> 
Content here. 
</TD> 
</TR> 
</TABLE> 
</BODY> 
</HTML> 
 
That's all the code you'd need to do what you're attempting. Additionally, I strongly suggest modifying the size of your Banner.jpg image. It's far too wide for viewing by typical monitor settings. You'd do better to stay within 550-600 pixels wide with that image.*Picks up a stone* 
 
fixed some messups in the next post, I forgot to take it out the caps etc

or the all css version *avoids PeO's stone* 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Untitled</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
/*<![CDATA[*/ 
html,body{margin:0 auto;padding:0; width:921px} 
#left{float:left;width:174px;} 
#header{margin-left:174px;height:145px;} 
#content{margin-left:174px;} 
/*]]>*/ 
</style> 
</head> 
<body> 
<div id="left"><img src=http://www.webdeveloper.com/forum/archive/index.php/"left1.jpg" alt="" /></div> 
<div id="header"><img src=http://www.webdeveloper.com/forum/archive/index.php/"Banner.jpg" alt="welcome to my site" /></div> 
<div id="content">Content here</div> 
</body> 
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Table CSS Hybrid</title> 
</head> 
<body style="padding:0px; margin: 0px 0px 0px 0px;" > 
<table> 
<tr> 
<td style="WIDTH:174px; HEIGHT:600px; vertical-align:text-top; border:1px solid #000000;" rowspan="2"> 
<img src=http://www.webdeveloper.com/forum/archive/index.php/"left1.jpg" alt="left image would be here"/> 
</td> 
<td style="WIDTH:747px; HEIGHT:145px; vertical-align:text-top; border:1px solid #000000;" > 
<img src=http://www.webdeveloper.com/forum/archive/index.php/"Banner.jpg" alt="welcome to my site"/> 
</td> 
</tr> 
<tr> 
<td style="WIDTH:757px; HEIGHT:455px; vertical-align:text-top; border:1px solid #000000;" > 
Content here. 
</td> 
</tr> 
</table> 
</body> 
</html> 
 
I fixed mine, I noticed it was really messed up lol. I tured on the borders so that it would be visible 
<a class="postlink" href="http://quasi-ke.servebeer.com/hybrid.html">http://quasi-ke.servebeer.com/hybrid.html</a> 
It is valid xhtml 1.1. Infact, I am going to take this one step further brb... 
Ok 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Table CSS Hybrid</title> 
<style type="text/css"> 
body { 
padding:0px; 
margin: 0px; 
} 
#center { 
margin:0px auto; 
border:1px solid #000000; 
} 
#left { 
width:174px; 
height:600px; 
vertical-align:text-top; 
border:1px solid #000000; 
} 
#top { 
width:747px; 
height:145px; 
vertical-align:text-top; 
border:1px solid #000000; 
} 
#content { 
width:757px; 
height:455px; 
vertical-align:text-top; 
border:1px solid #000000; 
} 
</style> 
</head> 
<body> 
<table id="center"> 
<tr> 
<td id="left" rowspan="2"> 
<img src=http://www.webdeveloper.com/forum/archive/index.php/"left1.jpg" alt="left image would be here"/> 
</td> 
<td id="top"> 
<img src=http://www.webdeveloper.com/forum/archive/index.php/"Banner.jpg" alt="welcome to my site"/> 
</td> 
</tr> 
<tr> 
<td id="content"> 
Content here. 
</td> 
</tr> 
</table> 
</body> 
</html> 
 
put the css in the head, just for the sake of putting it in the same file, you can greatly reduce the size by putting it in an external file and importing it. Also It is not centered. Sam, you are going to need to edit that last post

. Even with a hybrid layout you can still utilize the ability to keep styles in an external file and greatly reduce bandwidth. 
I gotta go so you can see the file in action at <a class="postlink" href="http://knights.europe.webmatrixhosting.net/hybrid.html">http://knights.europe.webmatrixhosting.net/hybrid.html</a> since my comp will be off.just thought I'd experiement: 
Table/css hybrid: 
776 Characters w/o spaces 
859 Characters with spaces (though this was do to the nice tabbage) 
CSS only: 
631 Characters w/o spaces 
661 Characters with spaces 
 
EDIT: 
corrected characters (I also edited my above post to include centering), Ergo the 5 characacter increase in my versionbump --^I would like to thank everyone for your help. I havent been online for a couple of days so it took me awhile to thank you guys. I'll have to try some of these scripts out. I'll let you know how it goes.

OK I tried some of these out but I'm stumped on how to use my image map with these scripts. Or is there an easier way to designate the areas in the left column(Home,The Tour,etc.) using css? Or will I have to use an Iframe for this and insert my image map? Also how to I name the content area to use it as the target area in a table? (Geez, I have a lot of questions. lol)Thanks to everyonedont use an image map at all, its a crappy way to design sites. I don't use am myself but it will limit your ability to make the side fluid and will limit your content. Never use iframes either.

Need Help with Webpage Layout

liunx

Guest