Need Help with Webpage Layout

**Jeramie** · 04-04-2004 01:09 PM

Hello everyone! Im having a problem setting up my webpage the way I want it.
My Web Page
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.

**chrismartz** · 04-04-2004 07:24 PM

how would it not look seemles with frames?

**Jeramie** · 04-04-2004 07:26 PM

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.

**Jeramie** · 04-04-2004 10:18 PM

Thanks everyone

I figured it out.

**PeOfEo** · 04-04-2004 10:22 PM

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>

**Jeramie** · 04-04-2004 10:26 PM

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.

**PeOfEo** · 04-04-2004 10:30 PM

I dono bout a map, I never use them, but probably... But www.w3schools.com is a great place to learn html and css. www.bluerobot.com has some good rudimentary css based layouts.

**Jeramie** · 04-04-2004 10:39 PM

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)

**Heavy** · 04-05-2004 11:19 AM

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="left1.jpg">
</TD>
<TD WIDTH="747" HEIGHT="145" VALIGN="top">
<IMG SRC="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.

**PeOfEo** · 04-05-2004 04:58 PM

*Picks up a stone*

Code:

fixed some messups in the next post, I forgot to take it out the caps etc :)

**Sam** · 04-05-2004 05:07 PM

or the all css version *avoids PeO's stone*

Code:

<!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="left1.jpg" alt="" /></div>
<div id="header"><img src="Banner.jpg" alt="welcome to my site" /></div>
<div id="content">Content here</div>
</body>
</html>

**PeOfEo** · 04-05-2004 05:14 PM

Code:

<!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="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="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
http://quasi-ke.servebeer.com/hybrid.html
It is valid xhtml 1.1. Infact, I am going to take this one step further brb...
Ok

Code:

<!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="left1.jpg" alt="left image would be here"/>
		</td>
		<td id="top">
			<img src="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 :P. 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 http://knights.europe.webmatrixhosting.net/hybrid.html since my comp will be off.

**Sam** · 04-05-2004 05:23 PM

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 version

**PeOfEo** · 04-06-2004 01:27 PM

bump --^

**Jeramie** · 04-07-2004 06:35 PM

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.

Thread: Need Help with Webpage Layout

Thread Tools

Display

Need Help with Webpage Layout

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions