Question

I have a navigation menu that is conflicting with a corner banner (image). However, it overlaps the navigation menu.

Here’s what it looks like in a resolution greater than 1024×768:

And here’s what it looks like in a browser with a resolution of 1024×768 (or less):

Here’s my code (for the corner banner and navigation menu):

#cornerbanner {
    background: url("../images/corner_banner.png") no-repeat;
    display: block;
    height: 117px;
    width: 117px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    text-decoration: none;
    margin-top: -1px;
    clear: both;
}

ul#navigation {
    float: right;
    display: inline;
    margin-top: -28px;
}

ul#navigation li {
    list-style:none;
    display: inline;
    margin-left: 80px;
    text-transform: uppercase;
}

ul#navigation li a {
    color: #4C4C4C;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
}

ul#navigation li.active {
    border-bottom: 2px solid #C63E24;
    padding-bottom: 3px;
} 

Answer 1

How do you want it to look in resolutions smaller than 1024? Do you want the li’s to resize themselves smaller? Or a horizontal scroll bar to appear?

My suggestion would be to consider a fixed width design combined with a grid system like:

• Skeleton
• 960gs

Edit

If you want them side by side, you can either:

• Float #cornerbanner instead of position absolute
• Put a margin-right: 117px on the ul#navigation

Both of these require that the parent containing them is wide enough to hold them both.