Solved

applying CSS to CLASS inside an ID

Posted on 2006-07-07
13
550 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
form button worked now it doesnt anymore 9 54
Error in script 11 56
Configuring a checkbox in CSS and php 18 88
Help to align the buttons in a row 2 27
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

776 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