PDA

View Full Version : Left side menu....how to?

Beaux
11-12-2002, 09:31 AM
I would like design my page with a menu down the left side of the page but I can't figure out how? I'd like the menu to be in a box that is a different color than my background. Here is an example of what I'm talking about...... http://www.basspro-shops.com/ or http://thesouthernoutdoorsman.com/

Any help would be appreciated. Thanks
Zero Angel
11-12-2002, 09:45 AM
Try using the bgcolor="???" for your table cell (<td>).
Beaux
11-12-2002, 12:30 PM
Thanks Zero, but I need a little more help. I probably didn't ask the question exactly right. I need to know the code for creating the whole side menu, not just adding color to it. I have no idea (being a newbie) how to create any of the left menu. Thanks
Zero Angel
11-12-2002, 12:44 PM
You can use a table for that. Heres some simple code for creating a menu and fitting it in with your page.



....
<table width="100%">
<tr>
<td colspan="2" align="right">
<!--Banner stuff goes here -->
<b>My Test Page</b><hr>
</td>
</tr><tr>
<td width="130" bgcolor="#cccccc" valign="top">
<!-- Menu/Navigation stuff goes here -->
<a href="index.html">Home</a><br>
<a href="doc1.html">Features</a><br>
<a href="doc2.html">Screenshots</a><br>
<a href="doc3.html">Download</a><br><br>
<a href="doc3.html">Company Info</a><br>
<a href="doc3.html">Contact us!</a><br>

</td>
<td>
<!-- Content Area -->
<h2>Title of page</h2>
<p>Text and stuff goes here, this will be replaced by real text. Text and stuff goes here, this will be replaced by real text.
Text and stuff goes here, this will be replaced by real text.
Text and stuff goes here, this will be replaced by real text.
Text and stuff goes here, this will be replaced by real text.
Text and stuff goes here, this will be replaced by real text.
Text and stuff goes here, this will be replaced by real text.
Text and stuff goes here, this will be replaced by real text.</p>
</td></tr>
</table>
.....

Keep in mind that this is very simple code, a lot more tweaking is needed to get the page looking presentable.
DCElliott
11-12-2002, 12:59 PM
And here is a way to do it without tables:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8">
<title>Untitled</title>
</head>
<body style="padding:0 1%;margin:0; text-align:center;
background:lightseagreen;">
<div style="display:block; position:relative; margin:0 auto;
width:90%; height:auto; padding:0; margin:0 auto; /*Remove the border
in actual use - just used here for clarity*/ border:thin dotted
yellow;padding:1px;">
<div style="display:block;width:100%;background:bisque; border:3px
ridge bisque; padding:1%;margin-bottom:1%;">
<h1>BANNER</h1>
</div>

<div style="display:block; float:left; left:0px; width:20%;
background:cadetblue;border:3px outset cadetblue; color:yellow; text-
align:center;padding:5px;overflow:visible;">
<h1>Menu</h1>

<a href="">Menu 1</a><br>
<a href="">Menu 2</a><br>
</div>

<div style="display:block;float:right; width:79%; margin:0;
background:darkslategray;border:3px outset gray; color:red; text-
align:justify;padding:5px;">
<h1>Body</h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.

<h1>And Soul</h1>

Nam liber tempor cum soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat facer possim assum. Typi non
habent claritatem insitam; est usus legentis in iis qui facit eorum
claritatem. Investigationes demonstraverunt lectores legere me lius
quod ii legunt saepius.</div>
</div>
</body>
</html>
Zero Angel
11-12-2002, 01:10 PM
While a good solution, the user would have to know a lot of CSS to fully understand the code.

Beaux, I suggest you visit http://www.webmonkey.com if you want to learn how to make and use tables. I also suggest that you take the Stylesheet tutorials available there.
DCElliott
11-12-2002, 03:00 PM
Originally posted by Zero Angel
While a good solution, the user would have to know a lot of CSS to fully understand the code.Actually, you'd have know a lot of tables to do it Zero's way ;)

Using tables is the conventional way of doing this. Zero and I have this thing where we argue back and forth about tables and CSS. I don't want to confuse the original poster and would suggest that s/he follow Zero's advice in this case.

Keep it really simple and clearly label each part with <!--Comments--> like Zero did in his example. It is a good habit anyway, but absolutely necessary when you get into more complex structures.
Beaux
11-12-2002, 04:24 PM
Thanks guys, I really appreciate it. Glad you two explained about your little rivalry, I was getting confused fast.;)

Also Zero, thanks for the link to Web Monkey. I need all the help I can get in building this site because I'm 100% moron.lol Thanks guys.
Beev
11-13-2002, 09:23 AM
You are more than welcome to use my stylesheet :)

I used CSS Positioning and a simple list to navigate.

Check it out at freewebs.com/beevshtml/index.htm and the stylesheet is at freewebs.com/beevshtml/beev.css

Good luck.

Yours,
Beev