On a website I am creating I wanted the navigation bar and an image placed just below it to fill the complete width of the screen with no padding. I have used a fixed position for the navigation bar and an absolute position for the image which works. However now I want to add some text under the image but it positions itself in the top right corner of the page, what do i need to change to make the text position itself under the image?
Here is my CSS:
body{
background-color: rgb(47,47,47);
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
color: rgb(230,230,230);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
width: 518px;
margin: 0 auto;
}
li{
float: left;
}
li a{
font-size: 24px;
display: block;
width: auto;
padding: 32px 30px;
text-decoration: none;
font-weight: bold;
color: rgb(230,230,230);
}
li a:hover{
background-color: rgb(47,47,47);
}
li a:active {
background-color: rgb(223, 66, 68)
}
nav{
background-color: rgb(6,6,6);
opacity: 0.8;
height: 100px;
position: fixed;
top:0px;
left:0px;
width: 100%;
z-index:1;
-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
#logo{
position: absolute;
top: 100px;
left:0px;
width: 100%;
}
HTML :
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<img id="logo" src="images/logo.png"/>
<h1>About me</h1>
</body>
Put image and text under one div and give css which is given to image, give it to that new div. i.e. position:absolute
to new created div.
like:
body{
background-color: rgb(47,47,47);
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
color: rgb(230,230,230);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
width: 518px;
margin: 0 auto;
}
li{
float: left;
}
li a{
font-size: 24px;
display: block;
width: auto;
padding: 32px 30px;
text-decoration: none;
font-weight: bold;
color: rgb(230,230,230);
}
li a:hover{
background-color: rgb(47,47,47);
}
li a:active {
background-color: rgb(223, 66, 68)
}
nav{
background-color: rgb(6,6,6);
opacity: 0.8;
height: 100px;
position: fixed;
top:0px;
left:0px;
width: 100%;
z-index:1;
-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
.belowDiv{
position: absolute;
top: 100px;
left:0px;
width: 100%;
}
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="belowDiv">
<img id="logo" src="images/logo.png"/>
<h1>About me</h1>
</div>