CODEWITHSUNDEEP
htmlcssmenu
Skizit
Skizit

Reputation: 44842

Make menu and image appear on the same line

I want to make my menu and image appear on the same line but sadly that doesn't seem to be happening. Could anyone tell me why and how I would solve my problem? I've got the following image and menu...

HTML

        <div id="header">

        <img alt="" height="67" src="Aidanlogo.png" width="400" />
        <div id="myslidemenu" class="jqueryslidemenu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <br style="clear: left" />
        </div>
    </div>

Menu CSS: http://pastebin.com/drMD7gwg

Header CSS

  #header {
width: 700px;
margin-left: auto ;
margin-right: auto ;

}

Upvotes: 0

Views: 5101

Answers (3)

3Dave
3Dave

Reputation: 29041

DIV is a block element, so it won't display on the same line as anything else unless you change it's inline property:

#myslidemenu { display:inline; }

Also note that you'll have to modify the <ul> styles to display the <li> tags on a single line. See this link for more on that part.

edit I'm not sure what the jQuery slide menu does to the <div> or <ul> styles - you might have a look in Firebug after it's rendered.

Upvotes: 1

Yuji &#39;Tomita&#39; Tomita
Yuji &#39;Tomita&#39; Tomita

Reputation: 118448

Divs are block elements, so by default it will always appear on a separate line.

You could make the image a block and float it left (display:block; float:left;)

You could make your div display:inline-block, or float:right; it, assuming there's room in the parent (700px). alt text

Upvotes: 1

user803905
user803905

Reputation: 11

try this

#menu ul li { display: inline; }

Upvotes: 1

Related Questions