Link: Please resize the browser to mobile view.
Issue with Header: I am facing alignment issues in the header. The elements do not seem to be aligned properly at the center of the header. The Android logo is aligned, but the text and dash image are not. :/
Navigation Problems: The Navigation Drop Down works when hovering over "ALL," but the links after Link 2 are hidden behind an image. I attempted to use z-index for a solution, but it did not work.
Content Area Troubles: Another problem arises with vertical alignment. There appears to be extra space at the bottom of the content section.
Index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="css/styled.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<div class="image_carousel">
<img src="images/menu.png" style="width: 15px; height: 22px;" />
<img src="images/android_icon.png" style="margin-top: 10px; width: 26px; height: 46px;" />
<div class="nav">
<a href="#" id="menu-icon">ALL</a>
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a></li>
<li><a href="#">LINK3</a></li>
<li><a href="#">LINK4</a></li>
<li><a href="#">LINK5</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</header>
<section>
<img src="images/headerimg.jpg" />
<div class="bround">
<img src="images/logo.jpg" class="imgleft" width="75px" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | <a href="">1 Comment</a></p>
</div>
<div class="clearfix"></div>
<div class="bround">
<img src="images/logo.jpg" class="imgleft" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | <a href="">1 Comment</a></p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<p>Copyright Confidential</p>
</footer>
</body>
</html>
CSS
img {
width: 100%;
}
header {
background: #83aa01;
width: 100%;
height: 76px;
/*position: fixed;*/
top: 0;
left: 0;
vertical-align:middle;
}
.image_carousel {
padding: 5px 0 1px 1px;
vertical-align: middle;
text-align: left;
}
.image_carousel img {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
}
.clearfix {
float: none;
clear: both;
}
div.bround {
background-color: #FFF;
color: #000;
padding: 20px;
margin-top: 10px;
margin-right: 0px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
img.imgleft {
position:relative;
float: left;
margin: 0px 5px 5px 0px;
width: 60px;
}
.bauthor {
color: #D3D3D3;
}
.bauthor a {
color: #83aa01;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
font-size: 20px;
}
div.nav {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
color: #FFF;
}
div.nav ul, div.nav:active ul {
display: none;
position: absolute;
padding: 0px;
background: #444;
color: #FFF;
top: 50px;
width: 20%;
border-radius: 4px 0 4px 4px;
}
div.nav li {
text-align: center;
width: 100%;
padding: 5px 0;
margin: 0px;
border-bottom: 1px dotted #FFF;
z-index:1000;
}
div.nav:hover ul {
display: block;
}
div.nav ul, div.nav a {
color: #FFF;
font-size: 17px;
font-weight: normal;
letter-spacing:2px;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
- Seeking Assistance!
Appreciate your help.