SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 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

    Code HTML4Strict:
    <!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>
    Code CSS:
    /*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([url]http://s24.postimg.org/4rcaja0lh/image.png);[/url]
    }
     
    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;
    }

  2. #2
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    #pageHeader {
        width: 960px;
        height: 128px;
        margin: 0 auto;
        position: relative;    /* 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. In this case, it's avoidable.

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

    Cheers.

  4. #4
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you ronpat!!!!

    That totally worked as well!

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by andrea63 View Post
    Thank you ronpat!!!!

    That totally worked as well!
    Great. Thanks for the feedback.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •