a links overlapping one another

1 Views

The links on this website seem to overlap when you hover over them. The div’s have been given the correct height but once you hover over the link it seems be picking up a height of 165px

http://www.dawaf.co.uk/animate/

Read More

Is there a way to set the height to 93px to stop the overlapping? 

#about {
    position: absolute;
    left: 0;
    top: 0;
    height: 89px;
    width: 336px;
}
span.title-link {
    font-size: 6.8em;
    font-weight: bold;
    font-family: 'Titillium Web', Arial, sans-serif;
    text-decoration: none;
    line-height: 93px;
    cursor: pointer;
    opacity: 0;
}

span.title-link a {
    color: #FFF;
    text-decoration: none;
}

span.title-link a:hover {
    color: #E91F4C;
}

#about-red {
    left: -104px;
    width: 545px;
}

#logo-red {
    height: 93px;
    width: 209px;
    position: absolute;
    left: 336px;
}   

/*Echo
------------------------------------------------------------ */
#gallery {
    position: absolute;
    left: 0;
    top: 0;
    height: 92px;
    width: 434px;
}   

#gallery-echo {
    left: -202px;
    width: 714px;
}

#logo-echo {
    height: 93px;
    width: 280px;
    position: absolute;
    left: 434px;
}   

/*Events
------------------------------------------------------------ */
#contact-events {
    left: -216px;
    width: 862px;
}   

#contact {
    position: absolute;
    left: 0;
    top: 0;
    height: 92px;
    width: 448px;
}   

#logo-events {
    height: 93px;
    width: 414px;
    position: absolute;
    left: 448px;
}
Post Views: 1

Related posts

Leave a Reply

2 comments

  2. You’re going to run into a lot more work if you’re absolutely positioning elements and fixing sizes Your problems are compounded since you are mixing px with %/em units. Your time would be much better spent adjusting your approach rather then troubleshooting this one issue.

    • Limit absolute positioning to as few elements as possible. In this case, you want to wrap your nav items in a container, and absolutely position the container.
    • Don’t fix heights; use font-size along with line-height:SOME_MULTIPLE(i.e. 1.5) with vertical-align:middle (which will work whether the element is inline/inline-block/block).
    • Try to generalize your styles and apply them to multiple elements through classes, instead of styling individual elements through ids. It makes your CSS much easier to maintain.

    Reasons for giving you these tips and NOT answering your question …

    1. You will have a much easier time getting this site together initially
    2. You will have less work to change the text of a nav item, or add a new nav item.
    3. I have seen this style-with-ids and fix-the-position/size-of-everything method used. It is too redundant and rigid to be useful. Forget best practices; it violates basic CSS and HTML principles and makes simple things difficult for everyone. Break the habit and make this and all your future projects much easier!