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 to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    navigation/image/clickable

    hi can anyone help me?
    whats the code to insert 3 gif images (navigation buttons) into a design using html and css as well. i have uploaded the images to give you an idea.

    thanks


    HTML/CSS code


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Layout</title>
    <style type="text/css">
    <!--
    #navigation {
    	padding: 0;
    }
    
    #navigation li {
    	float:left;
    	list-style:none;
    }
    
    #navigation li span{
    	display:block;
    /*
    	text-indent:-4200px;
    */	
    }
    
    #navigation a {
    	display:block;
    	background-color:#b3b3b3;
    	width:80px;
    	height:28px;
    }
    
    #nav-what a{
    
    }
    
    #nav-case a{
    }
    
    #nav-contact a{
    }
    
    #case {
    	clear:left;
    	width:400px;
    	padding:5px;
    	background-color:#E6E6E6;
    }
    
    #case h2{
    	margin-top:20px;
    }
    
    
    #case p{
    	margin-left:147px;
    }
    
    #case img{
    	float:left;
    }
    
    #footer {
    	width:400px;
    	padding:5px;
    	background:url(footer-bg.gif) repeat-x bottom #b3b3b3;
    }
    
    #footer ul {
    	padding:0px;
    	margin:0 0 5px 0;
    	width:100%;
    }
    #footer  li {
    	margin: 0 5px 0 0;
    	display:inline;
    	list-style:none;
    }
    
    -->
    </style>
    </head>
    
    <body>
    
    
    <!-- navigation -->
    <ul id="navigation">
      <li id="nav-what"><a href="#"><span>What we do</span></a></li>  <li 
    
    id="nav-case"><a href="#"><span>Case studies</span></a></li>
      <li id="nav-contact"><a href="#"><span>Contact us</span></a></li>
    </ul>
    <!-- end navigation -->
    
    
    <!-- case -->
    <div id="case">
    <img src="photo.gif" width="137" height="137" />
    <h2>Sample case study</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam 
    
    ull Introduction: Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. nonummy arcu. </p>
    <p><a href="#">See the full case >></a></p>
    </div>
    <!-- end case -->
    
    <!-- footer -->
    <div id="footer">
      <ul>
        <li><a href="#">What we do</a></li>
        <li><a href="#">Case studies</a></li>
        <li><a href="#">Contact us </a></li>
      </ul>
        
      <ul>
        <li><a href="#">Privacy policy</a></li>
        <li><a href="#">Terms &amp; conditions</a></li>
      </ul>
      <p>&copy;2010 <a href="mailto:your-email-
    
    address@kingston.ac.uk">k0903881@kingston.ac.uk</a>,  All Rights 
    
    Reserved</p>
    </div>
    <!-- end footer -->
    
    </body>
    </html>
    Attached Images Attached Images    
    Last edited by leah2704; 04-20-2011 at 01:56 AM.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    - why don't you put your code between code tags?

    xhtml and css - w3c validation errors

    - what you did to solve your problem?

    best regards

  • Users who have thanked oesxyl for this post:

    leah2704 (04-20-2011)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    o yh i had totally 4gtn thx


  •  

    Posting Permissions

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