Solved

applying CSS to CLASS inside an ID

Posted on 2006-07-07
13
554 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
Independent Software Vendors: 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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone 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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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 tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

689 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