nvidia
April 5th, 2010, 08:24 AM
Hi,
can somebody tell me or show me via web examples how to create a vertical div, that can be used in place of a navigation links please. Because i'm trying to create a div which a blue background, but when doing so, the browser sets it horizontally. Here is an example of what i'm trying to imagine.
http://www.w3.org/Style/CSS/ (http://www.w3.org/Style/CSS/)
The menu bar is vertical, which is what i want for myself. Or is there some attribute that can control which way a div is layed out perhaps?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>Home Page V1</title>
<link rel="stylesheet" type="text/css" href="homepage_V1.css" />
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li><a href="#Home"> Home </a></li>
<li><a href="#Contact"> Contact </a></li>
<li><a href="#News"> News </a></li>
<li><a href="#About"> About </a></li>
</ul>
</div>
</div>
</body>
</html>
/* homepage_V1.css is used to help build my homepage*/
body
{
margin-top: 2em;
margin-left: 2em;
margin-bottom: 1em;
}
div.container
{
width: 80em;
border: solid #9400D3 0.1em;
height: 40em;
padding-top: 1em;
padding-bottom: 1em;
}
div.nav
{
width: 10em;
height: 60em;
float:left;
}
ul
{
background-color: blue;
list-style-type: none;
}
When adding the height, it does not lengthen the bar vertically. Is there way for me to increase the length of the div vertically? like making a vertical column as seen on the website i gave u.
can somebody tell me or show me via web examples how to create a vertical div, that can be used in place of a navigation links please. Because i'm trying to create a div which a blue background, but when doing so, the browser sets it horizontally. Here is an example of what i'm trying to imagine.
http://www.w3.org/Style/CSS/ (http://www.w3.org/Style/CSS/)
The menu bar is vertical, which is what i want for myself. Or is there some attribute that can control which way a div is layed out perhaps?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>Home Page V1</title>
<link rel="stylesheet" type="text/css" href="homepage_V1.css" />
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li><a href="#Home"> Home </a></li>
<li><a href="#Contact"> Contact </a></li>
<li><a href="#News"> News </a></li>
<li><a href="#About"> About </a></li>
</ul>
</div>
</div>
</body>
</html>
/* homepage_V1.css is used to help build my homepage*/
body
{
margin-top: 2em;
margin-left: 2em;
margin-bottom: 1em;
}
div.container
{
width: 80em;
border: solid #9400D3 0.1em;
height: 40em;
padding-top: 1em;
padding-bottom: 1em;
}
div.nav
{
width: 10em;
height: 60em;
float:left;
}
ul
{
background-color: blue;
list-style-type: none;
}
When adding the height, it does not lengthen the bar vertically. Is there way for me to increase the length of the div vertically? like making a vertical column as seen on the website i gave u.