A Very Sad Question

**Snorkle?** · 08-13-2006, 05:48 AM

Im new to CSS and i only know javascript and html/xhtml and i was wondering if there is a code to make a layout of a navigation bar on the left side of the page with links.
Like a alot of real sites have them

If You could help i appreciate it!!

**jr_yeo** · 08-13-2006, 05:55 AM

search DD

**jscheuer1** · 08-13-2006, 06:09 AM

Layout is often influenced by the rest of what is on your page and styling a menu of this sort can be quite complex and individualized. However, just putting this after the opening body tag of a page should give you a rough idea:

HTML Code:

<div style="float:left;width:150px;height:800px;border:1px solid black;">
<a href="http://www.dynamicdrive.com">Home</a><br>
<a href="#">Resources</a><br>
<a href="#">News</a><br>
<a href="#">Search</a><br>	
</div>

Ideally, you would give this division an id - say, menu - and put the styles in the head or on an external stylesheet. Example with styles in the head:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#menu {
float:left;
width:150px;
height:800px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="menu">
<a href="http://www.dynamicdrive.com">Home</a><br>
<a href="#">Resources</a><br>
<a href="#">News</a><br>
<a href="#">Search</a><br>	
</div>

The rest of your page goes here
</body>
</html>

**mwinter** · 08-13-2006, 01:55 PM

Originally Posted by jscheuer1

HTML Code:

<div style="float:left;width:150px;height:800px;border:1px solid black;">
<a href="http://www.dynamicdrive.com">Home</a><br>
<a href="#">Resources</a><br>
<a href="#">News</a><br>
<a href="#">Search</a><br>	
</div>

Incidentially, I would use a list (ul element), rather than the above. The use of pixel length values for the dimensions is also inadvisable from my perspective. Finally, the OP will probably want to place the content in a div element (or some other block-level element) and add a left margin, otherwise content longer than the menu will eventually flow underneath it.

Mike

**Snorkle?** · 08-13-2006, 04:49 PM

Ok thank you all, I'll mess around with it!

**Snorkle?** · 08-13-2006, 04:54 PM

Yippe i got it to the way i wanted it by changing the font of the link and width and height Thanks alot John!

**jscheuer1** · 08-13-2006, 07:53 PM

Originally Posted by mwinter

Incidentially, I would use a list (ul element), rather than the above. The use of pixel length values for the dimensions is also inadvisable from my perspective. Finally, the OP will probably want to place the content in a div element (or some other block-level element) and add a left margin, otherwise content longer than the menu will eventually flow underneath it.

Mike

You are most likely right, I haven't tried this and cannot at the moment visualize exactly what you mean, though almost, and as I say - seems right. I was just trying to get Snorkle? started on his/her way. They almost always come back if there are problems.

**Snorkle?** · 08-13-2006, 07:55 PM

Ok first off, im a "HE" LoL
Second, is there a way i can change the backround in that table part only??

**jscheuer1** · 08-13-2006, 08:23 PM

Alright, it is sir Snorkle? then. I'm not sure if you mean you have introduced a table element (<table> . . . </table>) into the layout, or you just mean the generic idea of a table. In any case the way to do background color in style is:

Code:

background-color:red;

This can be inline:

HTML Code:

<div style="float:left;width:150px;height:800px;border:1px solid black;background-color:#ff00ee;">

or in a stylesheet:

Code:

#menu {
float:left;
width:150px;
height:800px;
border:1px solid black;
background-color:yellow;
}

As you can see, you can use the hex or name value for the color, RGB values can also be used.

Here is a link to tons of useful information on using css style:

http://www.blooberry.com/indexdot/css/

and one to a decent tutorial:

http://www.w3schools.com/css/default.asp

**mwinter** · 08-13-2006, 08:33 PM

Originally Posted by jscheuer1

...I haven't tried this and cannot at the moment visualize exactly what you mean...

Heh. How about a visual aid?

The attachment represents how a document may end up rendering if the content isn't separated with an added margin. Generally, the desire is to have a single, consistent left-hand edge (especially for text), rather than one that shifts to the left lower on the page.

Mike

Thread: A Very Sad Question

Thread Tools

Search Thread

A Very Sad Question

Bookmarks

Bookmarks

Posting Permissions