Some fine-tuning needed

[Jammmy]

Hello,

can someone please take a look at this site:
http://www.jamandcheese.be/dump/index.htm

As you can see, I'm having some trouble.

1. I can't get the navigation to work properly. It needs to be vertically centered and the sliding doors hover effect isn't quite right. Don't know how to solve this one!

2. under the white box (i'll add a slideshow later) there are two buttons. The bottom text overlaps the text above. How can i solve this? And how can i get the hover effect to work? When you hover over, text needs to become white with dark text-shadow.

3. the 2 lists at the bottom are floating left. They need to be centered like the screenshot below. When i give both ul a margin, they jump underneath each other. Please help!

[Paul O'B]

Hi,

For the nav you need to apply padding at the start and not on hover and you will need the element as display:inline-block to take padding properly.

Your wrapper div is a waste of an element so apply styles direct to the ul. This is the whole revised nav code with multiple changes.

ul#navigation  {
    background: transparent url(http://www.jamandcheese.be/dump/images/bg_navigation.png) repeat-x top center;
    height:49px; 
    line-height:43px;
    width:930px;
    margin:0 auto;
    text-align:center;
  font-family: LeagueGothicRegular;
    text-transform:uppercase;
    font-size:20px;
    color:#beb7ac;
    letter-spacing:0.1em;
}
ul#navigation  li {
 display:inline;
}
ul#navigation  li a {
    text-decoration:none;
    padding:0 1px 0 0;
    text-shadow:1px 1px 2px #fff;
    display:inline-block;
    vertical-align:top;
    margin:4px 15px 0 0;
    height:43px;
}
ul#navigation  li a span{
    display:inline-block;
    padding:0 0 0 15px;
    height:43px;
    left:-15px;
    position:relative;
    vertical-align:top;
}

ul#navigation  li a:hover {
    background: url(http://www.jamandcheese.be/dump/images/nav-tab-right.png) no-repeat top right;
}
ul#navigation  li a:hover span {
    background: url(http://www.jamandcheese.be/dump/images/nav-tab-left.png) no-repeat;
}

    <ul id="navigation">
        <li><a href="index.html"><span>Home</span></a></li>
        <li><a href="#"><span>Portfolio</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
        <li><a href="#"><span>Blog</span></a></li>
    </ul>

Tested working in ie6+.

[Paul O'B]

2) I'd lose the parent div again and just use the ul. Then I'd remove the breaks and apply the styling via the css so that you can tweak the margins to fit.

    <ul id="keuze">
        <li><a href="#"><span>Ontwerp</span>voor<b>drukwerk</b></a></li>
        <li><a href="#"><span>Ontwerp</span>voor<b>website</b></a></li>
    </ul>

/*-_-_-_-_- KEUZE -_-_-_-_-*/

#keuze {
    margin:10px auto;
    width:589px;
    height:191px;
    background:transparent url(http://www.jamandcheese.be/dump/images/bg_keuze.png) no-repeat top center;
}
#keuze li {
    float:left;
    width:49.9%;
    text-align:center;
    text-shadow:1px 1px 2px #fff;
    font-style:italic;
    font-size:18px;
    text-transform:lowercase;
    margin-top:20px;
    padding-top:40px;
    height:113px;
    display:block;
}
#keuze li span {
    font-size:26px;
    font-style:normal;
    display:block;
}
#keuze li b {
    font-size:34px;
    font-family:LeagueGothicRegular;
    text-transform:uppercase;
    display:block;
    margin:5px 0 0;
}
#keuze li a {
    text-decoration:none;
    display:block;
}
#keuze li:hover {
    background:transparent url(http://www.jamandcheese.be/dump/images/keuze-hover.png) no-repeat top center;
    color:#fff;
    text-shadow:1px 1px 2px #beb7ac;
}

Not tested with your fonts so may need tweaking.


3) I'd probably do something like this:

#diensten {
    margin:10px auto;
    width:589px;
    height:170px;
    font-size:18px;
    line-height:24px;
    text-shadow:1px 1px 2px #fff;
    font-style:italic;
}
#diensten ul {
    width:100%;
}
#diensten ul li{
    width:50%;
    float:left;
}
#diensten ul li ul {
    width:auto;
    margin:0 0 0 100px;
}
#diensten ul li ul li {
    list-style-type:circle;
    width:auto;
    float:none;
}

[Jammmy]

Wow Paul thanks a lot that helps indeed!!

Just one more thing... When hovering over the buttons in 2) the text needs to become white, but that doesn't happen. Any thoughts?
Same thing for the navigation...

[Paul O'B]

Do you mean something like this?

ul#navigation li a:hover,
#keuze li a:hover{
color:#fff;
text-shadow:1px 1px 1px #000;
}

[Jammmy]

Paul thanks again for your reply.

The navigation works fine now. The text changes to white only when hovering over the text part. I want it to change when hovering over the button... Don't understand why it doesn't work.

[Paul O'B]

Make the anchor change when the list is hovered.

ul#navigation li:hover a,
#keuze li:hover a{
color:#fff;
text-shadow:1px 1px 1px #000;
}

Won't work in ie6 of course.

[Jammmy]

Right... Thanks!
Will see if I really need it to work in IE6, but for now it's ok.