I am new to CSS and have a hard time positioning Logo(link) at the center of navigation links. Also, there are two background panels for the header. I have attached an example of what I’m trying to accomplish. I would appreciate your help.
you can make your logo as position:absolute;
Show us what you have tried so far and we will point you in the right direction.
It’s much easier for us if you supply some base code to start with so we can point out where you are going wrong and to help with task in hand.
Basically the best way to do the above is to use display:inline-block for the links and logo and have the logo as the central item in source order in those links rather than trying to place it there absolutely (which you could do if you preserve the space with padding). All the inline-block elements could then be centred by using text-align:center on the parent.
I relented
Here’s a couple of examples:
This one is pretty simple and uses inline-block as per the method I mention above.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.nav {
list-style:none;
margin:0;
padding:0;
position:relative;
text-align:center;
background:#f36c4f;
color:#fff;
font-size:140%;
padding:20px 10px;
font-family:Arial, Helvetica, sans-serif;
}
.nav li {
position:relative;
z-index:2;
display:inline-block;
vertical-align:bottom;
text-transform:uppercase;
}
.nav a, .nav span {
display:block;
color:#fff;
text-decoration:none;
margin:0 20px;
}
.nav a:visited {color:#fff}
.nav:after{
content:"";
position:absolute;
top:0;
bottom:50%;
right:0;
left:0;
background:#514642;
}
.nav span{
width:286px;/* image size*/
height:77px;/* image size */
background:rgba(255,255,255,0.3);/* for testing*/
font-size:77px;/* for testing*/
overflow:hidden;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="logo"><span>Logo</span></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
This one is more complex and uses absolute positioning for the logo but does allow for the source order to be a little better and more easily arranged at smaller screens.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.header {
position:relative;
padding:20px 0;
font-family:Arial, Helvetica, sans-serif;
background:#f36c4f;
text-transform:uppercase;
text-align:center;
}
.nav {
list-style:none;
margin:50px 0 0;/* adjust to suit image */
padding:0;
text-align:center;
color:#fff;
font-size:140%;
}
.nav li {
position:relative;
z-index:2;
display:inline-block;
vertical-align:bottom;
text-transform:uppercase;
}
.nav a {
display:block;
color:#fff;
text-decoration:none;
margin:0 18px;
}
.nav a:visited {
color:#fff
}
.header:after {
content:"";
position:absolute;
top:0;
bottom:50%;
right:0;
left:0;
background:#514642;
}
.logo {
position:absolute;
z-index:3;
left:0;
right:0;
width:286px;/* image size*/
height:77px;/* image size */
background:rgba(255,255,255,0.3);/* for testing*/
font-size:77px;/* for testing*/
overflow:hidden;
margin:auto;
color:#fff;
}
.nav li.about {margin-right:140px}/* space for logo*/
.nav li.work {margin-left:150px}/* space for logo*/
@media screen and (max-width:800px) {
.logo{
position:relative;
top:0;left:0;
right:0;bottom:0;
}
.nav{margin:10px 0 0}
.header .nav li {margin:0 15px}
}
</style>
</head>
<body>
<div class="header">
<h1 class="logo">Logo</h1>
<ul class="nav">
<li><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="work"><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Thank you for your help.
This is what I had:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content=".....">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div class="container_12 clearfix">
<div id="wrapper1">
<div id="header_panel1">
</div>
<div id="header_panel2">
<div class="nav">
<ul>
<li><a href="index.html" class="current">Home</a> </li>
<li><a href="about.html">About</a> </li>
<li><a href="index3.html" class="current"><img id="logo" src="img/ylogo.png" alt="...._logo">
<li><a href="portfolio.html">Portfolio</a> </li>
<li><a href="mailto:......@gmail.com"><img id="mail-nav" src="img/mail.png" alt="email"></li>
<li><a href="https://www.facebook.com/...." target="_blank"><img id="fb-nav" src="img/fb.png" alt="facebook"></li>
</ul>
</div>
</div><!-- end header_panel2 -->
</div><!-- end wrapper1 -->
</div> <!-- end container_12 -->
</body>
</html>
CSS:
@import url(http://reset5.googlecode.com/hg/reset.min.css);
body {
background-image: url("../img/ricepaper_v3.png");
}
img {
width: 100%;
height: auto;
display: block;
}
#wrapper1 {overflow: hidden;}
#header_panel1 {
background: #282828;
line-height: 2; /* tighten vertical spacing in nav */
padding: 20px 0;
}
#header_panel2 {
background: #39b54a;
line-height: 1; /* tighten vertical spacing in nav */
}
.nav{
width:200px;
padding: 3px 3px;
margin-right: 20px;
}
.nav ul li {
padding:7px;
display:inline;
list-style:none;
text-align:center;
}
.nav ul li a {
display: inline-block;
text-decoration: none;
color: #fff;
font: 400 1.0em sans-serif;
}
.nav ul li a:hover, .nav nav ul li a.current {
/* highlight buttons on rollover & highlight the current page */
color: #282828;
}
#logo:hover {
background: #282828;
}
#mail-nav:hover{
background: #282828;
}
#mail-nav{
display: inline-block;
}
#fb-nav:hover{
background: #282828;
}
#fb-nav{
display: inline-block;
}
Thank you very much. I agree, the second example definitely works better for smaller screens. I still have lots to learn, including z-index.
Thank you for your help. This is what I had:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content=".....">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<style>
@import url(http://reset5.googlecode.com/hg/reset.min.css);
body {
background-image: url("../img/ricepaper_v3.png");
}
img {
width: 100%;
height: auto;
display: block;
}
#wrapper1 {overflow: hidden;}
#header_panel1 {
background: #282828;
line-height: 2; /* tighten vertical spacing in nav */
padding: 20px 0;
}
#header_panel2 {
background: #39b54a;
line-height: 1; /* tighten vertical spacing in nav */
}
.nav{
width:200px;
padding: 3px 3px;
margin-right: 20px;
}
.nav ul li {
padding:7px;
display:inline;
list-style:none;
text-align:center;
}
.nav ul li a {
display: inline-block;
text-decoration: none;
color: #fff;
font: 400 1.0em sans-serif;
}
.nav ul li a:hover, .nav nav ul li a.current {
/* highlight buttons on rollover & highlight the current page */
color: #282828;
}
#logo:hover {
background: #282828;
}
#mail-nav:hover{
background: #282828;
}
#mail-nav{
display: inline-block;
}
#fb-nav:hover{
background: #282828;
}
#fb-nav{
display: inline-block;
}
</style>
</head>
<body>
<div class="container_12 clearfix">
<div id="wrapper1">
<div id="header_panel1">
</div>
<div id="header_panel2">
<div class="nav">
<ul>
<li><a href="index.html" class="current">Home</a> </li>
<li><a href="about.html">About</a> </li>
<li><a href="index3.html" class="current"><img id="logo" src="img/ylogo.png" alt="...._logo">
<li><a href="portfolio.html">Portfolio</a> </li>
<li><a href="mailto:......@gmail.com"><img id="mail-nav" src="img/mail.png" alt="email"></li>
<li><a href="https://www.facebook.com/...." target="_blank"><img id="fb-nav" src="img/fb.png" alt="facebook"></li>
</ul>
</div>
</div><!-- end header_panel2 -->
</div><!-- end wrapper1 -->
</div> <!-- end container_12 -->
</body>
</html>
You can adapt that to either of the methods I have shown above.
You need to fix the html as you have a missing closing list tag on the logo item.
To centre your code above you’d just need to add this.
.nav {text-align:center;width:auto}
.nav ul li{display:inline-block;vertical-align:bottom}
However for the full effect you should adapt to the examples I gave as it they are more efficient
For some reason I cannot position the Facebook icon in the same line as the rest of the navigation links. Can you please tell me what is causing this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="......">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<style type="text/css">
@import url(http://reset5.googlecode.com/hg/reset.min.css);
body {
background-image: url("../img/ricepaper_v3.png");
}
.header {
position:relative;
padding:10px 0;
font-family:Arial, Helvetica, sans-serif;
background:#39b54a;
text-transform:uppercase;
text-align:center;
webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);
moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);
}
.nav {
list-style:none;
margin:50px 0 0;/* adjust to suit image */
padding:0;
text-align:center;
color:#fff;
font-size:100%;
}
.nav li {
position:relative;
z-index:2;
display:inline-block;
vertical-align:bottom;
text-transform:uppercase;
}
.nav a {
display:block;
color:#fff;
text-decoration:none;
margin:0 10px;
}
.nav a:visited {
color:#fff
}
.nav a:hover {
color:#282828
}
.header:after {
content:"";
position:absolute;
top:0;
bottom:50%;
right:0;
left:0;
background:#282828;
}
.logo {
position:absolute;
z-index:3;
left:0;
right:0;
width:100px;/* image size*/
height:auto;/* image size */
font-size:77px;/* for testing*/
overflow:hidden;
margin:auto;
color:#fff;
}
.nav li.about {margin-right:50px}/* space for logo*/
.nav li.portfolio {margin-left:50px}/* space for logo*/
.logo:hover {
background: #282828
}
#mail-nav:hover{
background: #282828;
}
#mail-nav{
display: inline-block;
}
#fb-nav:hover{
background: #282828;
}
#fb-nav{
display: inline-block;
}
@media screen and (max-width:800px) {
.logo{
position:relative;
top:0;left:0;
right:0;bottom:0;
max-width: 380px;
/* center the logo on mobile devices */
}
.nav{margin:10px 0 0}
.header .nav li {margin:0 15px}
}
</style>
</head>
<body>
<div class="header">
<h1 class="logo"><a href="index_sample.html" class="current"><img id="logo" src="img/ylogo.png" alt="..._logo"></h1>
<ul class="nav">
<li><a href="#" class="current">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li><a href="mailto:...@gmail.com"><img id="mail-nav" src="img/mail.png" alt="email"></li>
<li><a href="https://www.facebook.com/..." target="_blank"><img id="fb-nav" src="img/fb.png" alt="facebook"></li>
</ul>
</div>
</div> <!-- end container_12 -->
</body>
</html>
Hi,
Sorry for the delay.
The problem is that you haven’t closed any of the ‘a’ tags. They should be like this:
<div class="header">
<h1 class="logo"><a href="index_sample.html" class="current"><img id="logo" src="img/ylogo.png" alt="..._logo"></a></h1>
<ul class="nav">
<li><a href="#" class="current">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li><a href="mailto:...@gmail.com"><img id="mail-nav" src="img/mail.png" alt="email"></a></li>
<li><a href="https://www.facebook.com/..." target="_blank"><img id="fb-nav" src="img/fb.png" alt="facebook"></a></li>
</ul>
</div>