WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Horizontal and Vertical menu on same page

Reply
  Thread Tools Display Modes
Old 10th April 11, 05:26 PM   #1
oogie1987
WLC Member
 
Join Date: Apr 2011
Posts: 9
Default Horizontal and Vertical menu on same page

As the title states, I am trying to put a menu on the top of my page which is set out as tabs. I have a fading background, and am trying to have a side menu on the same page. I know I need to create them as classes but am a bit lost on how. Below is the code I have so far:

CSS:
body
{background: black;
}

.rocksoclogo
{position: absolute;
top:0;
right:0;
width:55em;
height:214px;
background-image:url(rocktext.jpg);
background-repeat: no repeat;
}

.menu
{list-style: none;
padding: 0;
margin: 0 auto;
}

ul.menu
{margin-left: 0;
padding-left: 0;
}

.menu li
{width: 246px;
background-image: red url(tab2.png);
repeat: no-repeat;
float: left;
padding-left: 5%;
}

.menu a
{margin-top: -1.5em;
width: 100%;
background-image: url(tab2.png);
color: black;
float: left;
line-height: 2em;
padding-right: 0em;
text-decoration: none;
text-align: center;
font-family: "Arial", Verdana;
font-size: 1.4em;
font-weight: bold;
z-index:-1;
overflow: hidden;
}


.menu side
{background: inherit;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px;
border-bottom: 1px solid #ccc;
z-index: 1;
}

.bgfade
{margin-top: 16em;
width: 100%;
height: 40em;
background-image: url(bgfade.jpg);
background-repeat: repeat-x;
z-index: 0;
}


html:
<html>

<head>
<link rel="stylesheet" type="text/css" href="background.css" />
</head>

<div class="rocksoclogo">
</div>

<div class="menu">
<ul>
<li><a href="main.html"><span>Rocksoc</span></a></li>
<li><a href="sub.html"><span>Subversion</span></a></li>
<li><a href="forum.html">Forum</a></li>
</ul>
</div>

<div class="bgfade">
</div>

</html>

I haven't yet put the info in for the side menu as am unsure what to put.
oogie1987 is offline   Reply With Quote
Old 10th April 11, 10:33 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Horizontal and Vertical menu on same page

first of all get rid of the absolute positioning and let the document fow do the work rather than fighting it.
chrishirst is offline   Reply With Quote
Old 17th April 11, 05:38 PM   #3
oogie1987
WLC Member
 
Join Date: Apr 2011
Posts: 9
Default Re: Horizontal and Vertical menu on same page

Thanks...I got it working.
oogie1987 is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:55 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.