5 Replies - 1228 Views - Last Post: 21 March 2013 - 10:26 AM

#1 Nirmalya24  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-March 13

CSS Navigation Bar Issue

Posted 20 March 2013 - 05:47 AM

I'm trying to make a personal website for myself. Some what it will be like this. A picture at the centre followed by some personal information. And finally the navbar fixed to the bottom. I'm just starting to learn HTML and CSS. I tried creating the same navigation bar for my website. But the list items/link bars doesn't fill the whole width. It will be more clear when you see the output . Here is the link to my code. :helpsmilie:/>/>

Thank you in advance :bigsmile:/>/>

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Navigation Bar Issue

#2 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 165
  • Joined: 12-November 12

Re: CSS Navigation Bar Issue

Posted 20 March 2013 - 02:59 PM

What you could do is use display: table, instead of inline-block.
ul {
  display: table;
  table-layout: fixed;

  width: 100%;
}

ul > li {
  display: table-cell;
}



As a matter of fact, I checked the css for your reference site and that is how they achieved their look. For such a super simple page they have A LOT of unnecessary css.
Was This Post Helpful? 0
  • +
  • -

#3 Nirmalya24  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-March 13

Re: CSS Navigation Bar Issue

Posted 20 March 2013 - 11:10 PM

I tried your solution, it didn't work (at least for me). I have included a picture explaining my doubt/problem. I want that extra little green area to be removed. Actually its the background of ul to test if the li items are utilizing the whole 100% width or not. Hope this is sufficient for my problem. Currently the li width is 24%, but when I change it to 25% the last li item goes to the next line. I need to fix that.
Was This Post Helpful? 0
  • +
  • -

#4 Nirmalya24  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-March 13

Re: CSS Navigation Bar Issue

Posted 20 March 2013 - 11:56 PM

Nevermind! I got the solution. It was very stupid. Due to a padding of 3px on each list item, the last list item shifted to a new line. After removing it, it was all fine :D
Another problem I'm having is, I want the whole area to direct to the disired page. But currently on clicking the text will take me to the next page. I did add

a {padding 0 25%;}



But still some of the left and right area are not a part of the links. So how can I achieve that?
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2875
  • View blog
  • Posts: 9,538
  • Joined: 12-December 12

Re: CSS Navigation Bar Issue

Posted 21 March 2013 - 02:55 AM

Set display: block; for the a tags.
Was This Post Helpful? 0
  • +
  • -

#6 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 165
  • Joined: 12-November 12

Re: CSS Navigation Bar Issue

Posted 21 March 2013 - 10:26 AM

View PostNirmalya24, on 21 March 2013 - 01:10 AM, said:

I tried your solution, it didn't work (at least for me). I have included a picture explaining my doubt/problem. I want that extra little green area to be removed. Actually its the background of ul to test if the li items are utilizing the whole 100% width or not. Hope this is sufficient for my problem. Currently the li width is 24%, but when I change it to 25% the last li item goes to the next line. I need to fix that.


It works, you may have just had extra attributes that were conflicting.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1