CODEWITHSUNDEEP
htmlcssmenuhtml-listsnav
merx
merx

Reputation: 21

Place image and ul on same line

I know this is pretty simple, but I've been fussing with this for hours now.. In my header, I want my logo and my nav to be on the same line... basically, I have this HTML:

<div class="menu">
    <div class="ct-header-line"></div>
    <img class="logo" src="images/clinictechlogo.png">
    <ul class="nav">
        <!--common features, coded? or static?-->
        <li class="active"><a href="#" id="homenav">Home</a></li>
        <li><a href="#" id="apptenav">Appointments</a></li>
        <li><a href="#" id="presnav">Prescriptions</a></li>
        <li><a href="#" id="prnav">Patient Records</a></li>
        <li><a href="#" id="billsnav">Bills</a></li>
        <!--special features, coded.....-->
        <li><a href="#">Charts</a></li>
        <li><a href="#">something</a></li>
    </ul>
</div>

And here's the some of the CSS for the header part:

.logo {
    padding: 20px 10px 10px 10px;
    display: inline;
}

.menu {
    background: #4F97BD url(images/headerbg.jpg) repeat;
}

.nav {
    list-style:none;
    margin:0;
}

.nav li {
    display: inline;
}

The result is that the logo appears on one line, and the ul nav appears on the next...

Upvotes: 0

Views: 9981

Answers (4)

Venkat
Venkat

Reputation: 314

Merx..

Try this... 

    .logo {
    margin:0;
    padding:0;
    display:inline;
    }

Take a look http://jsfiddle.net/vZZDJ/

Good Luck...)

Upvotes: 0

Vainglory07
Vainglory07

Reputation: 5273

Check this one: Inline Logo and Nav

just float both the .logo and .nav to left and have clear fix at the bottom.

.logo {
  padding: 20px 10px 10px 10px;
  display: inline;
  float:left;
}

.menu {
  background: #4F97BD url(images/headerbg.jpg) repeat;
}

.nav {
    padding: 20px 10px 10px 10px;
    list-style:none;
    margin:0;
    float:left;
}

.nav li {
    display: inline;
}

.clear{
  clear:both;
}

To make them align correctly(vertically) apply the padding to nav same to what you were using on the image..

hope this helps

Upvotes: 0

Jon
Jon

Reputation: 437336

You need to give the <ul> display: inline-block. If the logo's height is fixed, you might also want to give the <ul> a suitable line-height so that the options appear vertically aligned with regards to the logo.

Upvotes: 2

cowls
cowls

Reputation: 24334

Try adding to the logo:

.logo {
    float: left; 
    width: 20%; //Or whatever the width is
}

This should make the wrap up next to it. If it doesnt you may need to add somethign similar to the 

.nav {
    float: left; 
    width: 70%;
}

Upvotes: 1

Related Questions