Solved

applying CSS to CLASS inside an ID

Posted on 2006-07-07
13
552 Views
Last Modified: 2009-12-16
HTML

<div id="nav_links">
<p><a href="index.php" class="navigation_lnks" title="Home">Home</a> | <a href="candidates.php" class="navigation_lnks" title="Candidates">Candidates</a> | <a href="browse.php" class="navigation_lnks" title="Browse">Browse</a> | <a href="about.php" class="navigation_lnks" title="About">About</a></p>
</div>

CSS

#nav_links
{
      float:right;
      width:700px;
      height:30px;
      border-left:1px solid black;
      background-color:orange;
      text-align:center;
}

#nav_links a.navigation_lnks:link
{
      display:block;
        padding:5px;
        width:175px;
}

WHAT I GET IS

my links are centered and top aligned.

WHAT I WANT IS

my links display:block;padding:5px;width:175px;
0
Comment
Question by:ellandrd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 2
13 Comments
 
LVL 16

Expert Comment

by:sam85281
ID: 17059671
Remove the: class='navigation_lnks" from your links.

the browser is looking for this class: a.navigation_lnks as a standalone class.

Since you have it as part of the DIV class ID, there's no need to specify it in your <a> tags.

-Sam
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17059694
so my code is then:

#nav_links a:link
{
     display:block;
        padding:5px;
        width:175px;
}

right?
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17059699
it dont work
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:geordie007
ID: 17059733

sam85281 is right what he says, but it has nothing to do with your problem/question.

"my links are centered and top aligned."

your links are centered, but they're not top aligned. they're in their own 'block' with padding top and bottom, they're not top aligned. to fix the centre problem, just do this:

#nav_links a.navigation_lnks:link
{
           display:block;
        padding:5px;
        width:175px;
      text-align: left;
}
0
 
LVL 7

Expert Comment

by:geordie007
ID: 17059751

incidentally, i guess the links are supposed to be inside the orange block? you should be using semantic html. this means that you use the html elements that most accurately describe what you are doing. the nav is a list of links, and therefore the links should be a list. you have them as a paragraph, but a paragraph is a standalone peice of text that makes sense when read - a list of links doesn't really make any sense. try this:

<style>
#nav_links
{
     float:right;
     width:700px;
     height:30px;
     border-left:1px solid black;
     background-color:orange;
     text-align:center;
       border: solid 1px #000;
}

#nav_links ul { margin: 0; padding: 0; list-style: none; }

#nav_links ul li { float: left; width: 175px; padding: 5px; voice-family: "\"}\""; voice-family: inherit; width: 165px; text-align: left;  }

</style>

<div id="nav_links">

<ul>
      <li><a href="index.php" class="navigation_lnks" title="Home">Home</a> | </li>
      <li><a href="candidates.php" class="navigation_lnks" title="Candidates">Candidates</a> | </li>
      <li><a href="browse.php" class="navigation_lnks" title="Browse">Browse</a> | </li>
      <li><a href="about.php" class="navigation_lnks" title="About">About</a></li>
</ul>


</div>
0
 
LVL 16

Expert Comment

by:sam85281
ID: 17059752
#nav_links
{
     float:right;
     width:700px;
     height:30px;
     border-left:1px solid black;
     background-color:orange;
     text-align:center;
}

#nav_links a
{
     display: block;
     padding:5px;
     width:175px;
     text-align:left;
}

and remove the class specification from all the links, inside the <a> code.

Question though, what look are you trying to acheive?  It looks to me like you want your links to run horizontal, but you have display set to block.

-Sam
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17059814
>>Question though, what look are you trying to acheive?  It looks to me like you want your links to run horizontal, but you have display set to block.

yes
0
 
LVL 7

Expert Comment

by:geordie007
ID: 17059824

my second comment runs them horizontally.
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17059829
yes both the first link covers the other links
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17059849
still not what i want...

i want:

----------------------------------------------------------------------------------------------
          Home        |        Candidates        |          Browse        |          About
----------------------------------------------------------------------------------------------

0
 
LVL 7

Expert Comment

by:geordie007
ID: 17059851

"the first link covers the other links"

not in ie6, ie7 or firefox 1.5 on a pc, or safari on a mac
0
 
LVL 16

Author Comment

by:ellandrd
ID: 17059925
ok just there except for last link.

i have added a border around my links and my container also has a border.  my last link's (about) border is double to the thickness...

how can i remove the border on my  last link
0
 
LVL 7

Accepted Solution

by:
geordie007 earned 500 total points
ID: 17059946

ah, that's what you want, why didn't you say. you mean like this?

<style>
div#nav_container { background-color: orange; width: 700px; float: right; }
div#nav_container ul { list-style: none; margin: 5px 0; padding: 0;  }
div#nav_container ul li { float: left; }
div#nav_container ul a { display: block; width: 174px; padding: 5px 0; background-color: orange; text-align: center; border-right: solid 1px #000; line-height: 12px; }
div#nav_container ul a.none { border-right: none; width: 175px; }
div.clear { width: 1px; height: 1px; clear: both; overflow: hidden; }
</style>

<div id="nav_container">

      <ul>
             <li><a href="index.php" class="navigation_lnks" title="Home">Home</a></li>
             <li><a href="candidates.php" class="navigation_lnks" title="Candidates">Candidates</a></li>
             <li><a href="browse.php" class="navigation_lnks" title="Browse">Browse</a></li>
             <li><a href="about.php" class="navigation_lnks none" title="About" class="none">About</a></li>
      </ul>
      
      <div class="clear"></div>

</div>
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question