PDA

View Full Version : CSS Question - :)


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.

meesa
18th July 11, 12:47 AM
You images is broken, do you have a live link?
Also, what issues are you having with it?

baumdexterous
18th July 11, 01:04 AM
http://s1.postimage.org/8tszyg5b7/sitehelp.jpg

Phreaddee
18th July 11, 01:22 AM
well thats a mighty fine picture but still you havent been clear what it is you are trying to achieve.

I am struggling to style the main menu (Menu 1, Menu 2, Menu 3) in the exact position that I want.

and where exactly is this? it "looks" like it is in the right spot on the picture, but without knowing where it is "meant" to be how would I know...

baumdexterous
18th July 11, 01:54 AM
Thank you so much for your willingness to help. The picture is the design I made in Photoshop. I am trying to create in CSS what that image shows. In other words, I am trying to style the second menu so that it will be forced to be at the bottom right of the header section. Does that make sense?

meesa
18th July 11, 03:05 AM
Create your menus just like regular UL menus, and then just float them next to each other.

Phreaddee
18th July 11, 03:05 AM
so can you put up a screenshot of what it looks like at the moment?

or even better a link directly to a site?