Log in

View Full Version : 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 :cool:
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:


<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:


<!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
<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
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:


background-color:red;

This can be inline:


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

or in a stylesheet:


#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
...I haven't tried this and cannot at the moment visualize exactly what you mean...

Heh. How about a visual aid? :D

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
jscheuer1
08-13-2006, 08:47 PM
Thanks Mike. I meant that I was trying to see in my mind's eye what your changes/additions would look like. Of course, you are right about my basic 'starter' layout having the (pictured in your post) characteristic of the main content wrapping to the left when it exceeds the height of the left floated container.
mwinter
08-13-2006, 09:25 PM
I meant that I was trying to see in my mind's eye what your changes/additions would look like.

Oh, I see. For the benefit of the OP, a simple two-column-plus-header layout might look something like the following. The coloured style declarations are significant ones, with regard to this thread. There are plenty of other similar layouts to be found elsewhere on the Web.



* {
margin: 0;
padding: 0;
}
body {
font: 100% Arial, sans-serif;
max-width: 50em;
padding: 0.5em;
}
h1 {
font-size: 140%;
font-weight: bold;
margin-bottom: 0.5em;
}
p {
margin: 0.5em 0;
}

#header {
border: 1px solid black;
margin-bottom: 0.5em;
padding: 0.25em;
}
#menu {
border: 1px solid black;
padding: 0.25em;

float: left;
list-style: none;
width: 7em;
}
#menu a:link {
font-size: 90%;
text-decoration: none;
}
#content {
border: 1px solid black;
padding: 0.5em;

margin-left: 8.1em;
}



<body>
<div id="header">
Some site branding junk
</div>

<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/resources">Resources</a></li>
<li><a href="/news">News</a></li>
<li><a href="/search">Search</a></li>
</ul>

<div id="content">
<h1>Main heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lorem.
Sed dui. Quisque sodales, risus ac condimentum varius, lectus tortor
cursus orci, et aliquet tortor urna a dui. Donec ultricies ligula id odio. Etiam
egestas malesuada lectus. Nullam at sapien vitae velit posuere sagittis.
Mauris sem justo, scelerisque eu, semper nec, pellentesque non, massa.
Aliquam vehicula libero at tortor. Morbi dignissim, nisl eu imperdiet auctor,
ipsum magna suscipit erat, in auctor lacus mi sit amet tellus. Quisque
nonummy imperdiet est. Vivamus pharetra, velit in pellentesque vehicula,
est ligula pharetra sem, eu elementum sapien erat ut magna. Curabitur
porttitor nonummy nisi. Aenean non tortor ut est rhoncus euismod.
Phasellus a sapien quis odio porttitor pharetra. Integer posuere, nisl ac
accumsan scelerisque, elit mauris auctor tortor, rhoncus dapibus lectus
neque at dolor.</p>
</div>
</body>

The 1.1em added to the left margin of #content is horizontal padding within the menu (2 * 0.25), the borders (0.1), and a 0.5em gap between the menu and content.

Mike
Snorkle?
08-14-2006, 12:40 AM
Thanks i appreciate it!
jscheuer1
08-14-2006, 03:17 AM
Go Mike!