HTML head alignment
I am trying to create a header that contains an image along with links that will act as a navigation menu for navigating users. I want the layout to look like this .
However, I am unable to adjust the alignment of the nav menu to the right to vertically align it right above the underline in the title.
<header>
<div>
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
<a href="">Link1</a>
</li>
<li class="menuitem">
<a href="">Link2</a>
</li>
</ul>
</nav>
</header>
CSS:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid black;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
How do I keep the links to the right of the page along with moving them over the border? Any help would be greatly appreciated.
source to share
There are typos in your CSS snippet, it should probably be:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
border-bottom: 2px solid black;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
So, you need to fix this.
Having a header that is 5% of the page height doesn't make a lot of sense to me, and since the elements menuitem
move to the right, they don't have any block effect on the header content.
If you gave the header a fixed height that was big enough for example. height: 80px;
then it will be displayed the way you want.
EDIT:
An alternative is to provide a relative position menuitem
, then offset the vertex to the height of the image in the header (this is the only element with a fixed height) and apply a border to the div
header image (see http://codepen.io/raad/pen/oyncv ):
Html
<header>
<div class="imagecontainer">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
<a href="">Link2</a>
</li>
<li class="menuitem">
<a href="">Link1</a>
</li>
</ul>
</nav>
</header>
CSS
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
}
.imagecontainer {
border-bottom: 2px solid black;
}
.menuitem {
position: relative;
top: -36px;
display: inline;
float: right;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
source to share
Add this to your CSS:
#headernav {
float: right;
}
#headernav ul li {
display: inline;
}
This will be float
nav
on the right and display
your list inline
to keep each bullet side by side.
JSFiddle: http://jsfiddle.net/tsukasadt/puf0ws3x/
source to share
See the following fiddle: http://jsfiddle.net/nfpzzao7/
<header>
<div class="headerimage-container">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
<a href="">Link1</a>
</li>
<li class="menuitem">
<a href="">Link2</a>
</li>
</ul>
</nav>
</header>
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid red;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
.headerimage-container {
display: inline-block;
}
#headernav {
display: inline-block;
}
#headernav li {
float: left;
margin-right: 10px;
}
source to share