|
|
Posted by dorayme on 06/11/07 07:05
In article
<1181541299.843454.53030@i38g2000prf.googlegroups.com>,
navin <navin.narayana@gmail.com> wrote:
> 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>
--
dorayme
[Back to original message]
|