SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer + Z-index

    Hi all,

    When I mouseover the images on my webpage they are enlarged using css.

    However, the footer appears in front of the images.

    Any ideas how to solve this? Treid using z-index but no luck.

    link here

    Thanks.

    Kevin.

  2. #2
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you make the CSS a little more accessible?

  3. #3
    SitePoint Guru SG1's Avatar
    Join Date
    Jul 2005
    Location
    Virginia, USA.
    Posts
    878
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FCC
    Could you make the CSS a little more accessible?
    Yeah, it could've all been written on one line.

    I would've thought the obvious solution would be to give the :hover a lesser top value so that it doesn't overlap the footer at all either behind it or in front of it.

  5. #5
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey I am lazy

    I like it when people link the CSS for me

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been nice...i have formatted your CSS for you to make it more readable and optimised it too:

    PHP Code:
    html,body
    {
        
    background:#f7f0c5 url('../images/background.gif') repeat-x;
        
    height:100%;
        
    font-family:Verdanasans-serif;
        
    font-size:0.8em;
        
    color:#555;
        
    margin:0;
        
    padding:0;
    }

    #wrapper
    {
        
    position:relative;
        
    width:780px;
        
    border:2px solid #F99939;
        
    background:url('../images/main_bg.gif'repeat-y;
        
    min-height:100%;
        
    height:auto;
        
    margin:0 auto 40px;
        
    padding:0;
    }

    html #wrapper
    {
        
    height:100%;
    }

    #header
    {
        
    background:#Ffe903 url('../images/header_bg.gif') no-repeat;
        
    height:100px;
        
    border-bottom:#d26a07 solid 2px;
    }

    #main
    {
        
    float:right;
        
    width:583px;
        
    margin-bottom:0;
        
    border-left:1px solid #d26a07;
        
    padding-bottom:50px;
    }

    #main ul
    {
        list-
    style:none;
    }

    #main li
    {
        
    background:url(../images/icons/bullet.gifno-repeat 0 50%;
        
    padding-left:17px;
    }

    #main_img
    {
        
    height:200px;
        
    border:solid 1px #ccc;
        
    background:url(../images/yellow_flower1.jpg);
        
    margin:0;
        
    padding:0;
    }

    #main_left
    {
        
    float:left;
        
    width:360px;
        
    border-right:solid 1px #ccc;
    }

    #main_right
    {
        
    float:right;
        
    width:221px;
    }

    #main_right img
    {
        
    padding-left:10px;
    }

    #leftcol
    {
        
    float:left;
        
    width:196px;
    }

    #leftcol p
    {
        
    padding:10px;
    }

    .
    clearfix:after
    {
        
    content:".";
        
    display:block;
        
    height:0;
        
    clear:both;
        
    visibility:hidden;
    }

    .
    clearfix
    {
        
    display:block;
    }

    html .clearfix
    {
        
    height:1%;
    }

    #footer
    {
        
    position:absolute;
        
    bottom:0;
        
    text-align:center;
        
    clear:both;
        
    width:780px;
        
    background:#F7F0C5;
        
    border-top:1px solid #d26a07;
        
    height:30px;
        
    line-height:30px;
        
    margin:0 auto;
    }

    #footer p
    {
        
    margin:0;
        
    padding:0;
    }

    #footer a
    {
        
    color:#555;
    }

    #footer a:hover
    {
        
    color:#555;
        
    background:#FEEA91;
    }

    .
    top_img
    {
        
    position:absolute;
        
    top:60px;
        
    right:-50px;
    }

    .
    logo
    {
        
    position:absolute;
        
    top:60px;
        
    left:300px;
    }

    h1,h2,h3
    {
        
    font-size:1.4em;
        
    background:#F9D400 url('../images/h1_bg.gif');
        
    line-height:1.5em;
        
    font-weight:400;
        
    color:#95991F;
        
    padding-left:10px;
    }

    table td
    {
        
    text-align:center;
    }

    .
    name
    {
        
    background:url('../images/icons/user.png'no-repeat 0 50%;
        
    padding-left:20px;
    }

    .
    email
    {
        
    background:url('../images/icons/email.png'no-repeat 0 50%;
        
    padding-left:20px;
    }

    .
    phone
    {
        
    background:url('../images/icons/telephone.png'no-repeat 0 50%;
        
    padding-left:20px;
    }

    .
    address
    {
        
    background:url('../images/icons/email_edit.png'no-repeat 0 50%;
        
    padding-left:20px;
    }

    .
    comment
    {
        
    background:url('../images/icons/comment.png'no-repeat 0 50%;
        
    padding-left:20px;
    }

    #main a
    {
        
    color:#978E25;
        
    text-decoration:none;
    }

    #main a:hover
    {
        
    text-decoration:underline;
        
    background:#FCC598;
    }

    #menu a .large
    {
        
    display:block;
        
    position:absolute;
        
    width:1px;
        
    height:1px;
        
    border:0;
        
    top:-1px;
        
    left:-1px;
    }

    #menu a.p1:hover .large
    {
        
    display:block;
        
    position:absolute;
        
    top:400px;
        
    left:200px;
        
    width:330px;
        
    height:190px;
        
    border:0;
    }

    #all_menu
    {
        
    padding:0;
    }

    #all_menu a .large
    {
        
    display:block;
        
    position:absolute;
        
    width:1px;
        
    height:1px;
        
    top:-1px;
        
    left:-1px;
    }

    #all_menu a.p1:hover .large
    {
        
    display:block;
        
    position:absolute;
        
    top:400px;
        
    left:200px;
        
    width:330px;
        
    height:190px;
    }

    #main_left p,#contact_form
    {
        
    padding-left:10px;
        
    padding-right:10px;
    }

    #menu a img,#all_menu a img
    {
        
    border:0;
    }

    #menu a.p1:hover,#all_menu a.p1:hover
    {
        
    text-decoration:none;
        
    background:transparent;
        
    color:#000;


  7. #7
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks man! Unfortunately, I don't have a solution to the problem........all your effort was in vain. Good effort though!

  8. #8
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any ideas on a solution here? Thanks.


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
  •