Css single level navigation trouble

HTML & CSS
1

hello.

i have started putting my navigation together and have ran into some problems.

could someone have a look for me please :slight_smile:

  1. firstly im not happy with having to use empty div tags at the start and end to make it look rounded. does anyone know of a better way of doing this??

  2. they is a gap of about 5px between each tab. i cant see what is doing it? i would like it so that if you hover over a tab, the tab stretched between the dividers. maybe the list image is creating the gap. ??

anyway you can see the nav at http://www.gigsforgrabs.com/test/

you can also see the page design at: http://www.gigsforgrabs.com/test/flow/

many thanks
ricky


#innerWrapper #header  {
background-image: url(../images/wrapper/header/navBG.jpg);
background-repeat: repeat-x;
height: 58px;
margin: 10px 0;
clear: both;
}

#header  #endLeft{
background-image: url(../images/wrapper/header/navLend.jpg);
background-repeat: no-repeat;
z-index:1;
width: 4px;
height: 46px;
}

#header  #endRight{
background-image: url(../images/wrapper/header/navRend.jpg);
background-repeat: no-repeat;
z-index:1;
width: 4px;
height: 46px;
float: right;
position: relative;
top: -91px;
}

#header  ul{
position: relative;
top: -46px;
margin:0;
padding:0;
list-style:none;
}

#header  li {
background: url(../images/wrapper/header/navDiv.jpg) no-repeat;
height: 45px;    
display: inline-block;
padding:0px;
margin:0px;
}


#header  li a {
height: 30px; 
display: block;
padding: 11px 20px  3px;
margin: 0px;
text-decoration: none;
color: #FFF;
}

#header  li a:hover {
background-image: url(../images/wrapper/header/navBGselected.jpg);
background-repeat: repeat-x;
display: block;
height: 30px; 
position:relative;
left: 1px;
}

#header  li.first {
background: none;
}




<div id="header">
        
        <div id="endLeft"></div>
        <span class="arial18_FF">
        <ul>
        <li class="first"><a href="#">Home</a></li>
        <li><a href="#">Gigs Board</a></li>
        <li><a href="#">Gig Exchange</a></li>
        <li><a href="#">Gig Slot Shop</a></li>
        <li><a href="#">Find Talent</a></li>
        <li><a href="#">Post Your CV</li>
        <li><a href="#">My Account</a></li>
        </ul>
         </span>
        <div id="endRight"></div>
       
        </div>
2

I would recommend using css3 border-radius to make the corners rounded.

For the spacing, it is being caused by either margins or paddings probably applied to the <LI>'s in the navigation.

I apologise if that was a bad response or short. Its just that I am about to log off and sleep

3

While I would not recommend using CSS3 for ANYTHING yet – after all the vendor specific prefixes MEAN “for testing only, not for use on production code”, and there’s a reason it’s called “DRAFT” and not “RECOMMENDATION” – as the W3C does not “recommend” it’s use EITHER.

Looking at your original (you forgot the home.html on your link above – grabbed it from the other thread) I would probably end up using an image for ALL the menu states… as in ONE image. You’re on a fixed width layout – there’s no reason to be using more than one image for that menu!

Your current markup has a number of issues. Again I see comment placement bound to trip rendering bugs, I see a DIV for what should be a H1 with text in it, a pointless #header DIV, a span wrapping a UL which is COMPLETELY invalid HTML (block level tags cannot go inside inline-level ones!), two unnecessary DIV I’m assuming you were trying to use as the endcaps, and a presentational class (arial_18FF) – something that has no business being used in modern markup.

Where you have:


        <div class="logo"></div>
        <div id="header">
        
        <div id="endLeft"></div>
        <span class="arial18_FF">
        <ul>
        <li class="first"><a href="#">Home</a></li>
        <li><a href="#">Gigs Board</a></li>
        <li><a href="#">Gig Exchange</a></li>
        <li><a href="#">Gig Slot Shop</a></li>
        <li><a href="#">Find Talent</a></li>
        <li><a href="#">Post Your CV</li>
        <li><a href="#">My Account</a></li>
        </ul>
         </span>
        <div id="endRight"></div>
       
        </div><!-- END HEADER -->

I would probably have:


  <h1>
  	GigsForGrabs
  	<span></span>
  </h1>
  
  <ul id="mainMenu">
    <li class="first"><a href="#">Home</a></li>
    <li><a href="#">Gigs Board</a></li>
    <li><a href="#">Gig Exchange</a></li>
    <li><a href="#">Gig Slot Shop</a></li>
    <li><a href="#">Find Talent</a></li>
    <li><a href="#">Post Your CV</li>
    <li class="last"><a href="#">My Account</a></li>
  </ul>

The empty span being for image replacement. None of those extra elements you had are necessary to do a menu like that one.

Oh, and vertical gradients that tall I generally do NOT consider viable for page designs, that is going to be problematic at best, at least with the site logo being direct on the body background… though a 100% min-height layout could be used to address that concern.

– edit – or not… looking at it close up that design is filled with what I like to call “But I can do it in photoshop; yeah, but what’s that got to do with web design?” The fixed width of 1003px isn’t even 1024 friendly (one should take 32 to 48px off for the target resoluton), a lot of the elements would break when dynamic fonts are used thanks to the need for fixed height containers, on the whole, I’d throw that silly PSD away and start over from scratch since while it’s a very pretty picture, it is NOT a viable site design in terms of accessibility norms.

Even the menu is going to need a class on each and every element as there’s no way to predict the actual widths cross browser if you leave them dynamic… which I think is what’s currently screwing with you on placing that end-cap.

4

Ok, here’s a redo of that:

http://www.cutcodedown.com/for_others/rickySpires/template.html

Giving you all the elements you desired in a 100% min-height layout. As with all my examples the directory:

http://www.cutcodedown.com/for_others/rickySpires

Is unlocked for easy access to the CSS and images.

Valid XHTML 1.0 Strict, Valid CSS 2.1, tested working perfect IE 5.5 through 9 beta, Opera 10.5 and 11, FF 3.5.19 and 3.6.whatever, and the latest flavors each of Safari and Chrome. I also took the time to test it in both OSX Leoptard and Windows… though at 1003px wide it doesn’t fit the screen of my test machine.

Hope this helps. If I have time later I’ll toss together an explanation of how some of the trickier bits work.

5

YOUR AMAZING.

THANKS

im i a hurry now but i will get back to you later with a proper responce :slight_smile:

6

hello.

i managed to upload my latest work with the help of deathshadow60 (BÄ°G THANKS)

http://www.gigsforgrabs.com/test2/

but its all messed up in different browsers ?

FOR EXAMPLE: on my mac you can see the background. there is about an inch all the way around but on the pc in the internet cafe you cant see any background and the footer doesnt go all the way across?

any ideas what i did wrong ?

thanks rick

7

You still have some validation issues. For example:
<h2>Grab DJ & Band Jobs Today</h2>

Should be:
<h2>Grab DJ & Band Jobs Today</h2>

8

Goes with what I just told him via PM about that – like using tags that don’t even EXIST (H7, H8), attributes that don’t exist in the doctype (BORDER), and the completely nonsensical heading order (90% or so of the headings on the page should be H2, the remainder being H3), etc, etc…

Hence the 25 validation errors.

9

Sorry about that noob mistake. i strongly suggested that of one decides or needs to use css3 then they should have image fallbacks. As in the border radius.