Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 81,169
Total Posts: 566,839
There are 46 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Small gap between menu border

Thread title: Small gap between menu border
Reply    
    Thread tools Search this thread Display Modes  
12-05-2010, 12:30 PM
#1
3styler is offline 3styler
3styler's Avatar
Status: Member
Join date: Apr 2007
Location:
Expertise:
Software:
 
Posts: 262
iTrader: 8 / 100%
 

3styler is on a distinguished road

  Old  Small gap between menu border

So, I just started learning xhtml/css spending a few hours each evening following tutorials and reading guides etc.

I started with just layout/columns and now I'm trying to tackle menus before moving onto slicing psd and image positioning.

So I created the following yday evening but I'm having difficulty trouble shooting what is causing the small gap between the menu's most noticable when you hover over one of them:

The layout is here:
illtemper.co.uk/nova4/

Any other criticism/tips on my code is also welcome to increase efficiency and more semantic code etc.

12-05-2010, 01:01 PM
#2
Hero is offline Hero
Hero's Avatar
Status: Very much the flyest.
Join date: Mar 2006
Location: Belgium
Expertise:
Software:
 
Posts: 1,171
iTrader: 1 / 100%
 

Hero is on a distinguished road

  Old

You could float the li tags in the navigation to the left, it'll remove the gaps. But you'll probably need to change some of the paddings if you do so.

Reply With Quote
12-05-2010, 04:47 PM
#3
3styler is offline 3styler
3styler's Avatar
Status: Member
Join date: Apr 2007
Location:
Expertise:
Software:
 
Posts: 262
iTrader: 8 / 100%
 

3styler is on a distinguished road

  Old

Thanks for reply I'll give that a try this evening

Reply With Quote
12-30-2011, 06:34 PM
#4
EliStanstead is offline EliStanstead
Status: I'm new around here
Join date: Dec 2011
Location:
Expertise:
Software:
 
Posts: 1
iTrader: 0 / 0%
 

EliStanstead is on a distinguished road

  Old

Hero, do you know of any more in depth tutorials on how to remove the gaps?

If so please could you share it.

Reply With Quote
01-01-2012, 04:45 AM
#5
vnstheme is offline vnstheme
Status: I'm new around here
Join date: Jan 2012
Location:
Expertise:
Software:
 
Posts: 5
iTrader: 0 / 0%
 

vnstheme is on a distinguished road

  Old

You can use float and display option inline-block or block for create menu.

Reply With Quote
01-27-2012, 12:23 AM
#6
Ajax is offline Ajax
Status: I'm new around here
Join date: Jan 2012
Location:
Expertise:
Software:
 
Posts: 1
iTrader: 0 / 0%
 

Ajax is on a distinguished road

  Old

Yes, make your Nav li's float:left; and display:block; instead of display:inline;.
What I do is use this border on all the buttons except the for the furthest left one:
border:1px 1px 1px 0px;

Then for the home button i'll put an inline style of just:
border-left:1px;

Reply With Quote
Reply    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed