CODEWITHSUNDEEP
htmlcss
bntrns
bntrns

Reputation: 452

Equal and full width navigation

I'm working on a web app for my HCI class and having issues with my navigation. I'm trying to have my navigation be the full width of the screen, with each text block being equal. I have ten total items. I'd like to also include an icon above the text, but that is still in the works. My current code aligns the text to the left, and is not stretching full width of the nav. Any help would be great.

HTML:

<nav>
    <div id = "location"><a href=””>Location</a></div>
    <div id = "weather"><a href=””>Weather</a></div>
    <div id = "waterlevels"><a href=””>Water Levels</a></div>
    <div id = "wavereports"><a href=””>Wave Reports</a></div>
    <div id = "runs"><a href=””>Current Runs</a></div>
    <div id = "hatches"><a href=””>Hatches</a></div>
    <div id = "photogallery"><a href=””>Photo Gallery</a></div>
    <div id = "anglermaps"><a href=””>Angler Maps</a></div>
    <div id = "recipes"><a href=””>Recipes</a></div>
    <div id = "meetups"><a href=””>Meet Ups</a></div>
</nav>

CSS:

nav {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    box-orient:horizontal;
    border-bottom:2px solid #111;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background:white;
}

nav a { 
    display:block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    color:#111;
    padding:10px;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    box-flex:1;
    text-align:center;
    text-decoration:none;
    -webkit-transition:all .4s linear;
    -moz-transition:all .4s linear;
    -o-transition:all .4s linear;
    transition:all .4s linear;
}

Upvotes: 0

Views: 887

Answers (2)

aaron-bond
aaron-bond

Reputation: 3341

Is this a little closer to what you want?

You don't need div elements AND anchors. With a display block, the anchor takes on similar characteristics as a div.

Like this:

<a id="meetups" href=””>Meet Ups</a>

http://jsfiddle.net/dm6Sp/2/

EDIT: I didn't bother to reformat your code in the fiddle so you might want to take a glance it fixing it yourself before you use it. It works, it's just not very pretty. :)

Upvotes: 1

Mark
Mark

Reputation: 6855

Maybe its a copy paste error, but this is not correct HTML:

<div id = "location"><a href=””>Location</a></div>

there are spaces between id & = & ", then there a fault in your link, due the lack of an URL or even a placeholder #

Maybe this could solve already some browser issues.

then to your question, try this:

nav {
  text-align: center;
}
nav a { 
   display:inline-block;
   margin: 0 auto;
   width: auto;
   color:#111;
   padding:10px;
   -webkit-box-flex:1;
   -moz-box-flex:1;
   box-flex:1;
   text-align:center;
   text-decoration:none;
   -webkit-transition:all .4s linear;
   -moz-transition:all .4s linear;
   -o-transition:all .4s linear;
   transition:all .4s linear;
}

remove the <div> around your links

Upvotes: 2

Related Questions