CODEWITHSUNDEEP
htmlcss
Jordan
Jordan

Reputation: 938

Logo sitting on top of navigation and header

I have a concept for the header/navigation of a (responsive) website I'm working on, but I unfortunately can't figure out how to achieve what I want in HTML/CSS in a way that will work in a responsive layout.

This is the concept I want to implement:

enter image description here

Essentially the logo needs to be sitting in the middle of the left and right halves of the navigation, and overlapping the header div.

Upvotes: 1

Views: 3313

Answers (2)

abbood
abbood

Reputation: 23548

try this

http://jsfiddle.net/abbood/9yhHE/

(i replaced your logo image with a random image i created) to make the nav bar appear as if it's one color.. just make sure the s and the have zero borders and no spacing in between.. and you're good to go

html

<div id="imgContainer" />
<table>
    <tr>
        <th>left header text</th>
        <th>right header text</th>      
    </tr>
    <tr>
        <td>
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>
        </td>
        <td class="right">
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>   
        </td>
    </tr>
</table>

css

#header {
    height: 3em;
    min-width: 40em;
}


table {
    width: 100%;
    min-width: 40em;
}

ul {
    list-style:none;
}

ul li {
    display: inline-block;
}

table tr th:first-child {
    text-align: left;
    padding-right:1em;
}

table tr th:nth-child(2) {
    text-align: right;
    padding-left:1em;
}

table ul {
    padding-left: 0;
    padding-right:0;
}



table tr:nth-child(2) td:nth-child(1) {
    text-align: right;
    padding-right: 3em;
}
td.right {
    text-align: left;
    padding-left: 3em;
}


#imgContainer {
    width: 100%;
    min-width: 40em;
    background-image: url(http://s8.postimage.org/49ywsfsqp/logo.png);
    background-position: center;
background-repeat: no-repeat;
}

note: i made the basic structure.. i lef the styling and putting spacing between the nav bar items to you (it's easy).. but the basic structure should be shound

update just had to make the logo appear on top.. (did that by z-index + abs positioning)

here is the updated http://jsfiddle.net/abbood/9yhHE/2/

html

<div id="imgContainer">
    <img  src="http://s8.postimage.org/49ywsfsqp/logo.png" />
</div>
<table>
    <tr>
        <th>left header text</th>
        <th>right header text</th>      
    </tr>
    <tr>
        <td>
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>
        </td>
        <td class="right">
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>   
        </td>
    </tr>



</table>

css

#header {
    height: 3em;
    min-width: 40em;
}


table {
    width: 100%;
    min-width: 40em;
    background-color: yellow;
}

ul {
    list-style:none;
}

ul li {
    display: inline-block;
}

table tr th:first-child {
    text-align: left;
    padding-right:1em;
}

table tr th:nth-child(2) {
    text-align: right;
    padding-left:1em;
}

table ul {
    padding-left: 0;
    padding-right:0;
}



table tr:nth-child(2) td:nth-child(1) {
    text-align: right;
    padding-right: 3em;
}
td.right {
    text-align: left;
    padding-left: 3em;
}

#imgContainer {
        min-width: 40em;
        position: absolute;
        width: 100%;

}

#imgContainer > img{
    width: 50px;
    height: 50px ;
    z-index: 1; 
    display: block;
    margin: 0 auto;

}

Upvotes: 1

darshanags
darshanags

Reputation: 2519

Off the top of my head I can think of three ways to do this:

  1. Use different images of different dimensions and have them placed within different layers which are displayed/hidden at different resolutions
  2. Have one element (, , etc..) and have the logo as a background-image of that element, you can switch between backgrounds at different resolutions
  3. Have a single sprited image with all logo sizes and change it's position using css background-position or the hard way by using margins and overflow properties.

You could also refer existing sites. A good library of responsive sites can be found here: http://mediaqueri.es

Upvotes: 0

Related Questions