Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Making Header a Link with CSS

    Hi...
    I am trying to make it so that the header of my page is a link (it will link back to the home page. The flower logo and words DELIPROOFCOLLECTIVE will be links)

    I have it set up so that this is the background image of my header and so I can't make it a link. The nav is a UL list on top of it.

    Thanks...

    The site is: http://deliproof.com

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello sophshep,
    Try something like this:
    Code:
    * { margin: 0;
        padding: 0; }
    
    html {overflow-y: scroll; } /* this is css 3 level - do you really want that? */
    
    body {background: url(images/bg3.png) repeat-x top #e4f7fa; }
    
    /*ul { list-style: none inside;}*/
    
    p {font-size: 1.2em;
        line-height: 1.2em;
        margin-bottom: 1.2em;
        }
    
    a {outline: none;}
    
    a img {border: none;}
    
    .floatleft {float: left;}
    .floatright {float: right;}
    .clear {clear: both;}
    
    
    #footer-wrap {
    	margin: 0 auto -35px;
    	width: 100%;
    	}
    
    #page-wrap {
        width: 1000px;
        margin: 0 auto;
    	}
    #link a{ /*sets height/width of #link and makes it clickable*/
    width: 1000px;
    height: 100px;
    display: block;
    }#header {
        height: 221px;
        width: 1000px;
        margin: 0 auto;
        background-image: url(images/header3.png);
        background-repeat: no-repeat;
        }
    	
    #header2 {
        height: 221px;
        width: 1000px;
        margin: 0 auto;
        background-image: url(images/header2.png);
        background-repeat: no-repeat;
        }
    
    #nav {
    list-style-type:none;
    margin: -200px 0 0 0; /*brings #nav back up after #link pushed it down*/
        }
    and the bit of markup you'll need to add:
    Code:
    <div id="footer-wrap">
    
    <div id="page-wrap">
    
    <div id="header">  
    <div id="link"><a href="http://http://codingforums.com/"<a></div>  
    
    	<ul id="nav">
    	
       	  <li class="collective"><a href="collective.html"></a></li>
    		<li class="stuff"><a href="stuff.html"></a></li>
    		<li class="about"><a href="index.html"></a></li>
    		<li class="special"><a href="http://deliproof.com/special"></a></li>
    
    	</ul>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks so much excavator, you rule

    i'm still getting the hang of all this stuff!


  •  

    Posting Permissions

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