baumdexterous
17th July 11, 09:53 PM
Hey guys,
I'm new to CSS and I'm trying to code a design that I made.
http://s1.postimage.org/8tszyg5b7/sitehelp.jpg
As you you can see, I am trying to create two separate menus on the right side of the design that are positioned within the header.
My HTML is as follows:
<div id="header" class="cAlign">
<a href="index.html" id="logo">
<img src="logo.png" />
</a>
<ul id="navTopRight">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
</ul>
<ul id="navMain">
<li><a href="index.html" id="activeMenuItem">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Men u3 </a></li>
</ul>
</div>
I was able to set up the CSS sheet for the top menu successfully (ul#navTopRight), but I am struggling to style the main menu (Menu 1, Menu 2, Menu 3) in the exact position that I want.
.cAlign {
width: 960px;
margin: 0 auto;
}
div#header {
height: 110px;
background: #red;
}
a#logo{
float: left;
margin: 30px;
}
ul#navTopRight {
float: right;
margin-top: 0px;
margin-right: 30px;
z-index: 100;
position: relative;
list-style-type: none;
}
ul#navTopRight li {
float: left;
position: relative;
}
I will sincerely appreciate someone's help as I've been trying to do this for 3 hours. Thanks so much! God bless.
I'm new to CSS and I'm trying to code a design that I made.
http://s1.postimage.org/8tszyg5b7/sitehelp.jpg
As you you can see, I am trying to create two separate menus on the right side of the design that are positioned within the header.
My HTML is as follows:
<div id="header" class="cAlign">
<a href="index.html" id="logo">
<img src="logo.png" />
</a>
<ul id="navTopRight">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
</ul>
<ul id="navMain">
<li><a href="index.html" id="activeMenuItem">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Men u3 </a></li>
</ul>
</div>
I was able to set up the CSS sheet for the top menu successfully (ul#navTopRight), but I am struggling to style the main menu (Menu 1, Menu 2, Menu 3) in the exact position that I want.
.cAlign {
width: 960px;
margin: 0 auto;
}
div#header {
height: 110px;
background: #red;
}
a#logo{
float: left;
margin: 30px;
}
ul#navTopRight {
float: right;
margin-top: 0px;
margin-right: 30px;
z-index: 100;
position: relative;
list-style-type: none;
}
ul#navTopRight li {
float: left;
position: relative;
}
I will sincerely appreciate someone's help as I've been trying to do this for 3 hours. Thanks so much! God bless.