css nav positioning

@BlelisaJun 26.2006

Hello all,

I am currently converting a page to css. I am having trouble with my nav links I have in the upper right hand corener of the page. Currently they are in place using img’s and javascript. I would like to remove them and use text with the a: css scripts. The problem I am having is in positioning.

I am trying to set it up with a left margin of 500 (that I have with no problem)

It should look like
Voice Data Advanced Web Contact
Services Services Technology Services Hemisphere

I can’t figure out how to set it up on two lines and have the two words in the group under one <A href>. Any ideas?

Thanks in advance for any help.

to post a comment

CSS

15 Comments(s) _↴

@KDLAJun 26.2006 — #You don't need the left margin at 500px - all you need to do is set that div to float: right.

I'm not sure what you mean by: I can't figure out how to set it up on two lines and have the two words in the group under one <A href>. Any ideas?
[/quote]

Can you provide a link to the "old" version, so we can see what you're wanting?

@BlelisaauthorJun 26.2006 — #http://www.hemisphere.net/testing/vs.htm is how I would like them to appear.

I had the margin set at 500px to move it to the right side of the page. Is there another way?

I think seeing how I have it set up will help explain what I am looking to do.

Thanks!

@CentauriJun 26.2006 — #<a href="voiceservices.html">Voice<br />Services</a>

This what you mean?

If each <a> tag is placed in a div and floated right, they will stack against each other at the right edge.

Cheers

Graeme

@BlelisaauthorJun 26.2006 — #I tried that and this was my result:

http://www.hemisphere.net/testing/links.html

@KDLAJun 26.2006 — #CSS

<i>
 </i>&lt;style type="text/css"&gt;
 #right-nav {float: right; width: 350px;}
 #right-nav ul {list-style-type: none; width: 350px; margin: 0; padding: 0;}
 #right-nav ul li {display: inline; padding: 0; margin: 0; width: 75px;}
 #right-nav ul li a {color: #000; text-decoration: none; border-left: 1px solid #000; font-size: 1em; font-family: arial, sans-serif; margin: 0; padding: 0;}
 #right-nav ul li a:hover {color: red;}
 &lt;/style&gt;

HTML

<i>
 </i>&lt;div id="right-nav"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Voice Services&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Data Services&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Web Services&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Advanced Services&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Customer Service&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;&lt;/div&gt;

This will also handle the mouseover color change, without the javascripting.

You may have to play with the margins and padding, but this should be basically what you need.

KDLA

@BlelisaauthorJun 26.2006 — #That looks great except the words are not broken into two lines.

@CentauriJun 26.2006 — #Try:

CSS

[CODE]#menu {
 float: right;
 text-align: center;
 }
 #menu div {
 display: block;
 width: 70px;
 float: left;
 border-left: 1px solid black;
 }[/CODE]

HTML

[CODE]<div id="menu">
 <div><a href="http://www.hemisphere.net">Voice<br />Services</a></div>
 <div><a href="http://www.hemisphere.net">Data<br />Services</a></div> 
 
 <div><a href="http://www.hemisphere.net">Advanced<br />Services</a></div>
 <div><a href="http://www.hemisphere.net">Web<br />Services</a></div>
 <div><a href="http://www.hemisphere.net">Contact<br />Info</a></div>
 </div>[/CODE]

Cheers

Graeme

@KDLAJun 26.2006 — #They should be - the width of each <li> is set at only 75px,, and the entire div is set at 350px....

Add line-height: 1.01em;
to the #right-nav ul li a line, then put breaks in your links -- example:

<i>
 </i>&lt;li&gt;&lt;a href="#"&gt;Voice&lt;br/&gt; Services&lt;/a&gt;&lt;/li&gt;

KDLA

@BlelisaauthorJun 26.2006 — #Perfect!!!! Thank you so much for the help! I really appreciate it!

@BlelisaauthorJun 26.2006 — #One last thing:

Where do I put my attributes as to A:hover, text-decoration: none; etc...

would it be inside the #menu div

@CentauriJun 26.2006 — #Just create new rules:

#menu a

#menu a:link

#menu a:hover

and put required atributes in these

Cheers

Graeme

@BlelisaauthorJun 26.2006 — #I can't get the hover to work. :mad:

Here is my code:

[CODE]#menu {
 float: right;
 text-align: center;
 }
 #menu div {
 display: block;
 width: 70px;
 float: left;
 border-left: 1px solid black; 
 }
 
 #menu a:link {text-decoration: none;
 color: #000000;
 font-weight: bold;
 }
 
 #menu a:hover {color; red;
 }
 
 #menu a:active {text-decoration: none;
 color: #000000;
 font-weight: bold;
 }
 
 #menu a:visited {text-decoration: none;
 color: #000000;
 font-weight: bold;
 }[/CODE]

@KDLAJun 26.2006 — #color[B];[/B] red should be color:red.

@BlelisaauthorJun 26.2006 — #Fixed that, in fact even changed it to #ff0000 but it is still not working.

@BlelisaauthorJun 26.2006 — #I fixed it.

Changed code to:
[CODE]#menu a:link, a:visited, a:active {text-decoration: none;[/CODE]

This works great!

Again thanks for all the help!

Also in #CSS _↴

Move Text Box in Focus IE6 Float problems creating a boarder around all my content

Success!

Help @Blelisa spread the word by sharing this article on Twitter...

Tweet This

css nav positioning

15 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

css nav positioning

15 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #CSS _↴