CODEWITHSUNDEEP
htmlcss
pixelmeow
pixelmeow

Reputation: 654

Can't make float:left work on horizontal ul

I've just finished a CSS3 class and I want to use what I've learned on my website. I want a horizontal bar across the top of the page with two images and some text between them, centered in the page. The problem is that I can't seem to get the float:left to work on the <li> elements.

I'll be using the same technique to put a menu below this bar. This is just the beginning of this page and may not even be the best design, I'm just trying to use in the real world what I learned in class a step at a time.

I'm trying to stay away from using classes everywhere in the HTML code, that's a lot of trouble in maintenance and changing things.

See my website.

Here's the HTML:

<div>
    <ul id="topBar" class="clearfix">
        <li><img src="../../images/heinleinmedalgold-glow150.jpg" /></li>
        <li id="logo">pixelmeow's pages</li>
        <li><img src="../../images/heart_grenade.jpg" /></li>
    </ul>
</div>

Here's the CSS:

@import url(reset.css);
.clearfix:before, .clearfix:after {
    content:" ";
    display:table;
}
.clearfix:after {
    clear:both;
}
body {
    width:100%;
}
#topBar {
    width:100%;
    height:10em;
    background-color:black;
}
#topBar ul {
    margin:0 auto;
}
#topBar ul li {
    float:left;
    list-style:none;
    border:2px solid red;
    height:5em;
    display:inline-block;
}
#topBar ul li:first-child {
    text-align:right;
}
#topBar ul li:nth-of-type(2) {
    min-width:40%;
    padding-top:5em;
    text-align:center;
}
#topBar ul li:last-child {
    text-align:left
}
#logo {
    font-family:kells_uncialbold;
    color:gray;
    top: 50px;

}

Upvotes: 0

Views: 98

Answers (2)

Paulie_D
Paulie_D

Reputation: 114989

It's probably worth mentioning that a list here is probably not the best choice for layout. Also, you might have trouble centering when using floats.

JSfiddle Demo

div#topbar {
  text-align: center;
  background-color: black;
  color: white;
}
div#topbar img {
  vertical-align: middle;
}
#logo {
  display: inline-block;
  vertical-align: middle;
}
<div id="topbar">
  <img src="http://pixelmeow.com/images/heinleinmedalgold-glow150.jpg" />
  <h1 id="logo">pixelmeow's pages</h1>

  <img src="http://pixelmeow.com/images/heart_grenade.jpg" />
</div>

Upvotes: 1

j08691
j08691

Reputation: 207891

Your selectors are incorrect. #topBar ul li should be #topBar li. What you have tries to select a <ul> that's a descendant of an element with the ID of topBar, when in reality it is the element with that ID. So you could use either #topBar li or ul#topBar li.

@import url(reset.css);
.clearfix:before, .clearfix:after {
    content:" ";
    display:table;
}
.clearfix:after {
    clear:both;
}
body {
    width:100%;
}
#topBar {
    width:100%;
    height:10em;
    background-color:black;
}
#topBar {
    margin:0 auto;
}
#topBar li {
    float:left;
    list-style:none;
    border:2px solid red;
    height:5em;
    display:inline-block;
}
#topBar li:first-child {
    text-align:right;
}
#topBar li:nth-of-type(2) {
    min-width:40%;
    padding-top:5em;
    text-align:center;
}
#topBar li:last-child {
    text-align:left
}
#logo {
    font-family:kells_uncialbold;
    color:gray;
    top: 50px;

}
<div>
    <ul id="topBar" class="clearfix">
        <li><img src="http://pixelmeow.com/images/heinleinmedalgold-glow150.jpg" /></li>
        <li id="logo">pixelmeow's pages</li>
        <li><img src="http://pixelmeow.com/images/heart_grenade.jpg" /></li>
    </ul>
</div>

Upvotes: 2

Related Questions