SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some fine-tuning needed

    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!
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    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;
    }
    Code:
        <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+.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
        <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>
    Code:
    /*-_-_-_-_- 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:

    Code:
    #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;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Do you mean something like this?
    Code:
    ul#navigation li a:hover,
    #keuze li a:hover{
    color:#fff;
    text-shadow:1px 1px 1px #000;
    }

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Make the anchor change when the list is hovered.

    Code:
    ul#navigation li:hover a,
    #keuze li:hover a{
    color:#fff;
    text-shadow:1px 1px 1px #000;
    }
    Won't work in ie6 of course.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right... Thanks!
    Will see if I really need it to work in IE6, but for now it's ok.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •