navin said:
Hi All
I am new to this web design. i saw a tutorial for creating vertical
menus using CSS, which works fine. However, i am still not able to
undrstand as how to integrate this menu with the other contents of
the
web page.
I want the menu created with CSS on the left and the content of the
home page on the right.
Please tell me how to do this.
Your word is my command. You, of course will add things and style
those other things and so on. The main idea here is the setting
of the left margin in the content div, floating the left menu and
giving it a width (the latter helps if colourising the menu
block)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
ul{
float:left;
width: 10em;
padding: .5em;
}
div {
margin-left: 10.5em;
padding: .5em;
}
</style>
</head>
<body>
<ul>
<li>Text of link length</li>
<li>Text of link length</li>
<li>Text of link length</li>
</ul>
<div>
<h1>Main heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis
nec orci quis nulla egestas fermentum.Ut quis eros. Aenean at
augue vitae quam posuere vehicula. Pellentesque habitantmorbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Maecenas justonunc, porta sed, molestie eget, adipiscing id,
ante. Cum sociis natoque penatibus etmagnis dis parturient
montes, nascetur ridiculus mus. Suspendisse potenti. Nunc
blanditmagna id odio sodales luctus. Nulla quam magna, viverra
quis, dignissim blandit, viverra nec, odio.</p>
</div>
</body>
</html>
