CODEWITHSUNDEEP
htmlcss
Alan Alvarez
Alan Alvarez

Reputation: 119

Horizontal Nav Bar with images

so I am starting to learn CSS and I can't wrap my head around this. I want to make a horizontal navigation bar composed of 3 images. These are the beggining image, the "filler image", and the ending image.

Here is a picture for further reference: enter image description here

I really don't know how to go about doing this and I havn't been able to find any examples on the web for this.

Thanks in advance!

Upvotes: 1

Views: 7282

Answers (4)

Stefan Surkamp
Stefan Surkamp

Reputation: 992

HTML:

<div class="wrapper">
    <div class="firstImage">
    <!-- no content, simply assign a background-image -->
    </div>

    <div class="headerContent">
        <div class="headerElement"></div>
        <div class="headerElement"></div>
        <div class="headerElement"></div>
        <div class="headerElement"></div>
        <!-- as many as items as you have -->
    </div>

    <div class="lastImage">
        <!-- no content, simply assign a background-image -->
    </div>
</div>

CSS:

.firstImage {
    float: left;
    background-color: red;
    width: 50px;
    height: 150px;
}

.lastImage {
    background-color: blue;
    float: left;
    min-width: 50px;
    height: 150px;
}

.headerElement {
    float: left;
    background-color: yellow;
    width: 50px;
    height: 150px;   
    border: 1px solid black;
}

Not the most elegant solution, but should do it for the beginning. There are - of course - more elaborate solutions... but I think this might work as well for you at the moment.

EDIT

Here is the above markup and css as a working example. I've put borders around the inner (yellow) cells for better visibility.

Upvotes: 1

Dan F
Dan F

Reputation: 12051

I'm an hour late to this party, but most of these answers are markup overkill. An unordered list of links has all the styling hooks you need. Basically, padding left on the first li and put in the left image. Padding right on the last li and put in the right image. Main image on the a.

html: 

<ul class="example">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

css: 

    ul.example {
        margin:0;
        padding:0;    
        font-size:0; /*this gets rid of the gaps between the items*/
    }
    ul.example li {
        display:inline-block; /*this puts them all in a row*/
        margin:0;
    }
    ul.example li:first-child {
        padding-left:10px; /*set this to the width of your left image*/
        background-image: url(http://dummyimage.com/10x61/f00/fff);
        background-repeat:no-repeat;
    }
    ul.example li:last-child {
        padding-right: 10px; /*set this to the width of your right image*/
        background-image: url(http://dummyimage.com/10x61/00f/fff);
        background-repeat:no-repeat;    
        background-position: top right;
    }
    ul.example li a {
        font-size:16px; /*important to set this, as the ul has 0 height text*/
        display:block;
        height:61px;
        line-height:61px;
        text-align:center;
        width:100px;
        background-image: url(http://dummyimage.com/1x61/0f0/fff);
    }

http://jsfiddle.net/EKacC/

Upvotes: 2

user2578094
user2578094

Reputation:

I'm preparing a jsfiddle demo for you, hang on. It's pretty ugly, but it should give you a starting point on how to tweak it so it works as you wanted. http://jsfiddle.net/T9FXD/

Markup:

<div>
 <div class="first"></div>
 <nav>
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
 </nav>
 <div class="last"></div>

CSS:

div {width:600px;height:61px;}
div.first {background-color:red; width:20px;float:left;}
li {display:inline; color: #fff}
nav {width: 500px; background:url('http://placekitten.com/g/1/61') repeat-x top; float:left;}
div.last {background-color:green; width:20px;float:left;}

Upvotes: 2

Shaun Molloy
Shaun Molloy

Reputation: 70

Stick with using <div> elements for this. Even though tables handle it well, it's more depreciated as they load slower.

It's literally as you depicted the image, with 3 main boxes.

HTML:

<div class="element1"></div>
<div class="element2">
 <ul>
   <li>Home</li>
   <li>About</li>
   <li>Forum</li>
   <li>Content</li>
  </ul>
</div>
<div class="element3"></div>

CSS:

When you have empty div elements, be sure to set dimensions within CSS so that it can show the image you'd like to display.

.element1, .element2 {
 width:10px; height:100px;
}

For the image itself.

background:url('...') no-repeat;

Upvotes: 0

Related Questions