CODEWITHSUNDEEP
htmlcsshrefnav
user1896446
user1896446

Reputation:

How to make a hrefs in nav span the entire div

I am trying to make my nav span the entire div, I want their background colour/target to have a width of 33%

<nav>
<a href="index.html" id="nav1">Home</a>
<a href="lesson1.html" id="nav2">Lesson 1: Intro</a>
<a href="lesson2.html" id="nav1">Lesson 2: Creating a Project</a>
</nav>

#nav1 {
    background-color: #a43200;
    color: white;
    text-decoration: none;
    padding: 10px 100px 10px 100px;
    font-size: 1.3em;
}
#nav2 {
    background-color: #c73d00;
    color: white;
    padding: 10px 100px 10px 100px;
    font-size: 1.3em;
    text-decoration: none;
}

Upvotes: 0

Views: 206

Answers (3)

jhunlio
jhunlio

Reputation: 2660

use class instead of id by the way this article help you understand why you used class instead of id with your current code

html

<nav>
<a href="index.html" class="nav1">Home</a>
<a href="lesson1.html" class="nav2">Lesson 1: Intro</a>
<a href="lesson2.html" class="nav1">Lesson 2: Creating a Project</a>
</nav>

css

nav {width:960px}
nav a {
    float:left; 
    text-decoration: none;
    padding: 10px 50px 10px 50px;
    font-size: 1.3em;
    color: white;
}
.nav1 {
    background-color: #a43200;
}
.nav2 {
    background-color: #c73d00;
}

working demo

hope this help you

Upvotes: 0

Daniel
Daniel

Reputation: 4946

Added display:block to your CSS.

See fiddle: http://jsfiddle.net/djwave28/audAt/6/

<nav>
    <ul>
        <li><a href="index.html" id="nav1">Home</a>
        </li>
        <li><a href="lesson1.html" id="nav2">Lesson 1: Intro</a>
        </li>
        <li><a href="lesson2.html" id="nav1">Lesson 2: Creating a Project</a>
        </li>
    </ul>
</nav>

nav ul {
    list-style:none;
}
nav ul li {
    float:left;
    width:30%;
}
#nav1 {
    position:relative: float:left;
    background-color: #a43200;
    color: white;
    text-decoration: none;
    padding: 10px 0px 10px 0px;
    font-size: 1.3em;
    display:block;
}
#nav2 {
    display:block;
    position:relative: float:left;
    background-color: #c73d00;
    color: white;
    padding: 10px 0px 10px 0px;
    font-size: 1.3em;
    text-decoration: none;
}

Upvotes: 0

Jace
Jace

Reputation: 3072

There are a couple things wrong with your setup (for example: you have multiple ids, which is a no-no, so I've changed them to classes).

I've also gone through and tried remove some repetitious styling. So you'll see that a lot of the button styles have been condensed into one #nav a style, then the custom colours have been applied in separate styles.

I've set the font-size property in #nav to 12px, but that was only for demonstration purposes. Please edit this to your liking.

This fiddle should help:

Fiddle:
http://jsfiddle.net/fACmM/

HTML:

<div id="nav">
<a href="index.html" class="nav1">Home</a>
<a href="lesson1.html" class="nav2">Lesson 1: Intro</a>
<a href="lesson2.html" class="nav1">Lesson 2: Creating a Project</a>
</div>

CSS:

#nav
{
    width:100%;
    font-size:12px;
}
#nav a
{
    width:33%;
    float: left;
    color: white;
    padding: 10px 0px;
    font-size: 1.3em;
    text-decoration: none;
    text-align:center;
}

.nav1 {
    background-color: #a43200;
}
.nav2 {
    background-color: #c73d00;
}

Upvotes: 1

Related Questions