Solved

applying CSS to CLASS inside an ID

Posted on 2006-07-07
13
545 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
  • 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
 
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

746 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now