Web developer specializing in server-side technologies here, venturing into the world of styling for the first time.
I recently attempted to recreate the header section with the id=topbar from a specific website. Despite my efforts to align the h1 element (Scott Hanselman) with the navigation list items (About, Blog, etc.), I struggled with using properties like float: left and display: inline to overcome the block nature of the h1. Unfortunately, my attempts were unsuccessful!
While experimenting with the CSS using Chrome Dev Tools, I couldn't figure out how the elements were perfectly aligned within the containerInner. Toggling the inherited margin property made the navigation items below the h1, behaving as expected for a block element.
My main question is, why isn't the h1 element taking up all available horizontal space? It seems like my assumptions about using the float and display properties were off the mark.
Here's what I've come up with so far:
HTML<!doctype html>
<head>
<meta charset="utf-8">
<title>First Last</title>
<link rel="stylesheet" href="blog_style.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="top-ribbon-outer">
<div class="top-ribbon-inner">
<h1>First Last</h1>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
margin-left: 50px;
}
.top-ribbon-outer {
width: 100%;
height: 50px;
color: white;
background-color: black;
position: relative;
}
.top-ribbon-inner {
height: 20px;
}
h1 {
margin-bottom: 0px;
margin-top: 0px;
float: left;
/*display: inline;*/
}
li {
float: left;
padding-left: 15px;
padding-right: 15px;
}
ul {
list-style-type: none;
}