CODEWITHSUNDEEP
htmlcss
Siemsen
Siemsen

Reputation: 309

How to get h1 and ul to stick on the same line

Good day once again.

I have a (seemingly) simple problem. I'm trying to display <h1> and a <ul> on the same line. I have used float, inline and many other ways but it doesn't seem to work. It is like the header doesn't want to play along with unordered list. All help appreciated.

The html code looks like this:

<div class="page">
   <div id="header">
            <h1>IRIS</h1>


            <ul id="menu">              
                <li><%: Html.ActionLink("Forsíða", "Index", "Home")%></li>
                <li><%: Html.ActionLink("Fréttir", "Index", "News")%></li>
                <li><%: Html.ActionLink("Greinar", "Index", "Article")%></li>
                <li><%: Html.ActionLink("Síðan Mín", "Index", "MySite")%></li>
                <li><%: Html.ActionLink("Spurt & Svarað", "QA", "Home")%></li>
                <li><%: Html.ActionLink("Upplýsingar", "Index", "Information")%></li>
            </ul>
    </div>
 </div>

And the css code I'm using looks like this:

.page
{
width: 70%;
margin-left: Auto;
margin-right: Auto;
}



body
{
margin:0;
padding:0;    
background: url('/Content/Image/background-gradient.png') repeat-x;
}


#header
{
background-color: Gray;
}

#header h1:
{
margin:0;
padding:0;
display:inline;
}

ul#menu
{
display:inline;
border:solid;
border-width:1px;
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
margin: 0;
text-align: right;
}

ul#menu li
{
display: inline;
list-style: none;
}

ul#menu li#greeting
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}

ul#menu li a
{
padding: 5px 10px;
float:left;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
}

ul#menu li a:hover
{
background-color: #fff;
text-decoration: none;
}

ul#menu li a:active
{
background-color: #a6e2a6;
text-decoration: none;
}

ul#menu li.selected a
{
background-color: #fff;
color: #000;
}

#main
{
border: solid black;
clear:both;    
width:75%;
padding: 30px 30px 15px 30px;
margin-bottom: 30px;
}

Ok so the answer to the problem has been found, thanks to Mathieu and everyone else. This is what I used:

#header h1
{
    margin:0;
    padding:0;
    padding-left:7px;
    display:inline;
}

ul#menu
{
    width:85%;
    float: right;
    display:inline;
    padding: 0 0 2px;
    margin: 0;
    text-align: right;
}

If anyone thinks of something better please post :)

Upvotes: 5

Views: 9718

Answers (4)

seler
seler

Reputation: 9193

there are so many ways to achieve that. i would do this like that:

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1, ul { display: table-cell; }
            li {
                float: left;
            }
        </style>
    </head>
    <body>
        <h1>LIPSUM</h1>
        <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
        </ul>
    </body>
</html>

or

        h1 { position: absolute; }
        ul { margin-left: 60px; }

Upvotes: 0

jabal
jabal

Reputation: 12337

This works for me in FF4 and IE8 as well:

<h1 style="display: inline;">IRIS</h1>
       <ul id="menu" style="display: inline;">              
            <li style="display: inline;">aaa</li>
            <li style="display: inline;">bbbb</li>
            <li style="display: inline;">ccccccc</li>
        </ul>

Upvotes: 0

Jeff
Jeff

Reputation: 14279

Float both the h1 and the ul.

You may be experiencing issues because #header h1 ul: does not match the ul. I'm not entirely sure what you are trying to match on; if its supposed to be a style for the ul, then just do this #header ul. If its for the h1, then do #header h1.

Upvotes: 0

mathieu
mathieu

Reputation: 31192

Your selector for h1 was wrong :

h1
{
    margin:0;
    padding:0;
    display:inline;
}

And for ul and li, you dont need float

ul#menu
{
    display:inline;
    border:solid;
    border-width:1px;
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    margin: 0;
    text-align: right;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

See fiddle here : http://jsfiddle.net/Y6D6p/

Upvotes: 6

Related Questions