CODEWITHSUNDEEP
htmlcssnav
Jimmy Lee Spearman
Jimmy Lee Spearman

Reputation: 11

HTML CSS top bar issues

I am making a little website for my automated green house but I ran in to a kink right away! My "#title-bar" just disappears! If anyone can help me figure this out I will love you long time! :P

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>UrbanSector</title>
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome-4.2.0/css/font-awesome.min.css">  
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>

</head>
<body>
    <div id="container">
        <div id="title-bar">
            <i id="title-bar-logo" class="fa fa-leaf fa-2x fa-inverse"></i>
            <h3>UrbanSector</h3>
            <ul>
                <li><i class="fa fa-home fa-inverse"></i><a href="index.html">Home</a></li>
                <li><i class="fa fa-gear fa-inverse"></i><a href="">Notifications</a></li>
            </ul>
        </div>

        <nav>
            <div id="nav-btn-area">

            </div>
            <ul>
                <li>stuff</li>
                <li>stuff</li>
                <li>stuff</li>
            </ul>
        </nav>
    </div>

</body>
</html>




* {
/* border: limegreen 1px solid; */
padding: 0px;
margin: 0px;
}

body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif
}

#container {
width: 100%;
background-color: #E2E2E2;
display: block;
}

#title-bar {
padding: 2px;
background-color: #363636;
display: inline;
}

#title-bar h3 {
float: left;
margin-left: 5px;
color: #FFFFFF;
}

#title-bar ul {
display: inline;
float: right;
list-style-type: none;
}

#title-bar ul li{
margin-left: 5px;
float: left;
}

#title-bar ul li i{

}

#title-bar-logo {
clear: left;
float: left;
margin: auto;
color: green;
}

nav {
margin-top: 10px;
display: block;
background-color: #363636;
width: 14%;
}

Edited: To fix layout of post

Upvotes: 0

Views: 199

Answers (3)

Der Vampyr
Der Vampyr

Reputation: 951

Another way is to make display:inline; -> display:inline-block;

Upvotes: 0

Josh Harrison
Josh Harrison

Reputation: 6004

Change display: inline to overflow: hidden on your '#title-bar` CSS rule.

#title-bar {
padding: 2px;
background-color: #363636;
overflow: hidden;
}

This will clear the floats inside the container and cause it to get the height of its contents.

Upvotes: 0

Danield
Danield

Reputation: 125521

1) Remove the display: inline; rule from the #title-bar class and

2) Give it a height.. say 30px;

#title-bar {
  padding: 2px;
  background-color: #363636;
  height: 30px;
}

FIDDLE

Upvotes: 1

Related Questions