Issues with header images and navigation

Hi All,

I’m having some issues with my header. There are two images. One a background tile that is repeated on the x axis. A logo image and navigation. When I positioned the logo the nav links to the right lost functionality. Why would this happen? How do I fix it?

http://jsbin.com/iqoQuGAy/9/edit

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
	<title>why?</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body>
<!--HEADER -->
	<header>
		<div id="pageHeader">
		<a href="#" id="logo"></a>
	<!--NAVIGATION -->
		<nav id="mainNav">
			<ul>
				<li id="about-link"><a href="#about">about</a></li>
				<li id="work-link"><a href="#work">work</a></li>
				<li id="contact-link"><a href="#contact">contact</a></li>
				<li id="resume-link"><a href="#resume">resume</a></li>
			</ul>
		</nav>
		</div>
</header> <!-- end header -->
  </body>
</html>
/*Global styles -----------------------------------------------------------------------------------------------------------*/

/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;
	font: inherit;
}

/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}


html {
	background-color: #E7E9D1;
	background-image: url(http://s24.postimg.org/4rcaja0lh/image.png);
}

body
{
	position: relative;
	font-family: Arial, helvetica, sans-serif;
	font-size: 14px;
}



/*header styles*/
header
{
	background-image: url("http://s7.postimg.org/59ft4upyf/header_bg.png");
	background-repeat: repeat-x;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 200;
}
#pageHeader
{
	height: 128px;
	margin: 0 auto;
	position: relative;
	width: 960px;
}
#pageHeader:after
{
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 425px;
	top: 0;
	background: url('http://s18.postimg.org/5ktpz4rid/logo.png') 0 0 no-repeat scroll;
}


/*nav styles*/
#mainNav {
	font-size: 18px;
	list-style: none outside none;
	text-align: center;
	padding-top: 20px;
}

#mainNav li {
	display: inline;
}

#mainNav a {
	text-decoration: none;
	color: rgb(252,250,230);
	display: inline-block;
	padding: 10px;
}

#mainNav a:hover {
	color: #9f9e8f;
}

#mainNav #about-link {
    margin-right: 50px;
}
#mainNav #work-link {
    margin-right: 0px;
}
#mainNav #contact-link {
    margin-left: 160px;
}
#mainNav #resume-link {
    margin-left: 20px;
}

I found a fix to my problem:

My #pageHeader div waz set to width: 100%; which was covering my links. Giving it a width fixes this:

#pageHeader:after {
content: ‘’;
display: block;
position: absolute;
width: 120px;
height: 100%;
left: 425px;
top: 0;
background: url(‘http://s18.postimg.org/5ktpz4rid/logo.png’) 0 0 no-repeat scroll;
}

Hi, andrea63. Glad you found a solution to the problem. Thanks very much for posting it so others can benefit from your experience.

If you are interested, you could also try something like this:


#pageHeader {
    width: 960px;
    height: 128px;
    margin: 0 auto;
    [color=red]position: relative;[/color]    /* not needed */
}
#pageHeader:after {
    content:'';
    display:block;
    width:120px;
    height:120px;
    background:url('http://s18.postimg.org/5ktpz4rid/logo.png') 0 0 no-repeat scroll;
    margin:-62px auto 0;
}

It’s better to use absolute positioning where absolutely needed. :slight_smile: In this case, it’s avoidable.

One less sometimes-impediment to creating a fluid layout someday. :slight_smile:

Cheers.

Thank you ronpat!!!

That totally worked as well!

Great. Thanks for the feedback.

:slight_smile: