SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: tabbed nav

  1. #1
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    tabbed nav

    please i am trying to place the link on the left hand side(id navigation) into tabs that looks like the background is,
    this is the site, still unde r construction
    reachesy.co.uk
    HTML 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>
        <title>Reacheasy - Foremost website for easy reach of things globally</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link href="reasy.css" rel="stylesheet" type="text/css"/>  
    </head>
      <body>
    <div id="outer">
    <div id="page">
    <div id="header">
    <h1>Reacheasy</h1>
      <ul id="nav">
      <li class="current"><a href="index.html">Home</a></li>
         <li><a href="women.html">Women</a></li>
         <li><a href="men.html">Men</a></li>
         <li><a href="children.html">Children</a></li>
         <li><a href="homeandappliances.html">Home&amp;Appliances</a></li>
         <li><a href="visionandsound.html">Vision&amp;Sounds</a></li>
          <li><a href="motoring.html">Motoring</a></li>
          <li><a href="homemore.html">More</a></li>
          <li><a href="homecontact.html">Contact us</a></li>
          <li><a href=" rl.html">Register/Log in</a></li>
      </ul>
    </div> <!--end of navigation div -->
    </div>
    <div id="navigation">
      <ul>
         <li><a href="left.html">Offer</a></li>
         <li><a href="left2.html">Free</a></li>
        <li><a href="/comparison/category/clotheswomen/">Women's Clothing</a></li>
         <li><a href="/comparison/category/shoeswomen/"> Women's Shoe </a></li>
         <li><a href="/comparison/category/underwear women/">Underwear&amp;Lingerie</a></li>
         <li><a href="women'sperfume.html">Perfume</a></li>
         <li><a href="/comparison/category/accessorieswomen/">Accessories</a></li>
          <li> <a href="women'smore.html">More</a></li>
      </ul>
    </div> <!--end of navigation div -->
    <div id="bodycontent">
    <div id="bannercontainer">
    <a href="img/pr.jpg"></a>
    </div>
    <div id="pbanner">
      <ul id="promo-banners">
      <li class="promo-banner">
        <h2>
            <a href="/comparison/category/clotheswomen/">Women's Clothing</a>
         </h2>
    <a href="/comparison/category/clotheswomen/"><img height="198" width="228"  src="img/fashion.jpg" alt=" alibi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
            <a href="/comparison/category/shoeswomen/"> Women's Shoe </a>
         </h2>
    <a href="/comparison/category/shoeswomen/"><img height="198" width="228"  src="img/womensshoe.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
          <a href="/comparison/category/underwear women/">Underwear&amp;Lingerie</a>
         </h2>
    <a href="/comparison/category/underwear women/"><img height="198" width="228"  src="img/underwear.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
            <a href="women'sperfume.html">Perfume</a>
         </h2>
    <a href="women'sperfume.html"><img height="198" width="228"  src="img/womensperfume.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
            <a href="/comparison/category/accessorieswomen/">Accessories</a>
         </h2>
    <a href="/comparison/category/accessorieswomen/"><img height="198" width="228"  src="img/womensaccessories.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
            <a href="women'smore.html">More</a>
         </h2>
    <a href="women'smore.html"><img height="198" width="228"  src="img/men.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
      </ul>
      </div>
    </div>
    </div>
    <div id="footer">
    <ul id="footlink">
         <li><a href="contact.html">Contact us</a></li>
         <li><a href="termsandcondition.html">Terms&amp;Condition</a></li>
         <li><a href="right.html">Copyright</a></li>
         <li><a href="faq.html">Faq</a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    and the css is

    Code:
    /*
    CSS for Reacheasy site
    */
    	body,html {
     	margin: 0;
    }
     
    #page {
     	width: 1060px;
     	margin: 0 auto;
     	position: relative
     	/* is the same as: 
     	margin-top: 0;
     	margin-bottom: 0;
     	margin-left: auto;
     	margin-right: auto;
     */
    }
    
    /* sticky footer */
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    #outer:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    /* ... */
    /*
    CSS for Reacheasy site
    */
    html, body {
        height:100%;
        margin:0;
        padding:0;
        border:none;
    background: url("img/aurora.jpg");
    }
    #outer {
        width:1060px;
        margin:auto;
        min-height:100%;
        margin-top:-52px;
        border-left:1px solid black;
        border-right:1px solid black;
    background: #A1A1A1 url(backgrounds/nav-bg.jpg) repeat-y left top    
    }
    * html #outer {
        height:100%
    }
    h1 {
        font-size: xx-large;
        color: white;
        padding: 2em 0 .2em .4em;
        margin: 0;
        background: url(img/header.jpg) repeat-y right;
    }
    ul#nav {
        height: 2em;
        list-style: none;
        margin: 0;
        padding: .2em 0;
        margin:0;
        background: url(img/tabs.gif);
        border: 0 solid;
    }
    ul#nav li {
        background: #48f url(img/tabs.gif);
        float: left;
        margin: 0 1px 0 0;
        padding-left: 10px;
        border-right: 1px solid #A1A1A1;
        border: 0 solid;
    }
    ul#nav a {
        background: url(img/tabs.gif) 100% 0;
        color: #008;
        display: block;
        float: left;
        height: 2em;
        line-height: 2em;
        padding-right: 10px;
        text-decoration: none;
        border: 0 solid;
    }
    ul#nav li.current {
        background-color: #48f;
        background-position: 0 -60px;
    }
    ul#nav li.current a {
        background-position: 100% -60px;
        color: #fff;
        font-weight: bold;
    }
    #navigation {
        width: 180px;
        float:left;
    }
    
    #navigation li {
        margin: 0 1px 0 0;
        padding-left: 0px;
        text-decoration: none;
       list-style: none;
    }
    #navigation a {
        color: #008;
        padding-right: 10px;
        text-decoration: none;
    }
    
    #navigation a:visited{
     color: #008;
    }
    
    #bodycontent {
        float:right;
        width:880px;
        background:black;
      
    }
    #header {
        width:100%;
        border-top:52px solid #fff;
        border-bottom:1px solid #A1A1A1;
    }
    #footer {
        width:1060px;
        clear:both;
        height:50px;
        border-top:1px solid #000;
        background-color:#fff;
        border-bottom:1px solid #000;
        color:  #000000;
        text-align:center;
        margin:0 auto;  
    }
    
    ul#footlink {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    float: left;
    width: 100%;
    color: #fff;
    }
    
    ul#footlink li { 
    display: inline;
    text-align:center; 
    }
    
    #bannercontainer{
           width: 800px;
           height: 300px;
           padding: 0;
           margin-left: auto;
           margin-right: auto;
           background: #eee;
           border: 1px solid #000;
        }
    
        #bannercontainer a{
           display: block;
           width: 800px;
           height: 300px;
           padding: 0;
           background:#eee url(img/pr.jpg) 0 0 no-repeat;
        }
    
        #bannercontainer a:link,#bannercontainer a:visited{
           background:#eee url(img/pr.jpg) 0 0 no-repeat;
        }
    
        #bannercontainer a:hover{
           background:#eee url(img/pr.jpg) 150px 0 no-repeat;
        }
    #promo-banners{
      width:860px;
    }
    
    .promo-banner{
       border: medium none;
       display:block;
       float: left;
       padding: 0 19px 5px 0;
       width: 230px;
    }
    .promo-seo{
    color:white;
    display:block;
    float:left;
    font:12px arial;
    height:75px;
    margin-bottom:5px;
    padding:7px 5px 0;
    text-align:left!important;
    width:218px;
    }
    .promo-seo-link{
    color:#bdbdbd;
    text-decoration:none;
    }
    .promo-seo-link:visited{
    color:#bdbdbd;
    }
    thanks
    Last edited by ralph.m; Sep 21, 2011 at 00:01.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's not really clear how you want that navigation to look. Could you post a picture of what it should look like, or explain it a bit more?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's not really clear how you want that navigation to look. Could you post a picture of what it should look like, or explain it a bit more?
    thanks ralph, please i would like it to be like the left hand navigation in tesco.com(
    Start shopping
    My account
    Book a delivery slot
    Amend your order
    Favourites
    Every little helps
    Special offers
    Real food recipes)
    thanks

  4. #4
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    duplicate

    hello, reposting my question, please the id navigation in my html seem to be a block tab, pleae ow can each link be induvidual tab and not a block thanks
    HTML 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>
        <title>Reacheasy - Foremost website for easy reach of things globally</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link href="reasy.css" rel="stylesheet" type="text/css"/>  
    </head>
      <body>
    <div id="outer">
    <div id="page">
    <div id="header">
    <h1>Reacheasy</h1>
      <ul id="nav">
      <li class="current"><a href="index.html">Home</a></li>
         <li><a href="women.html">Women</a></li>
         <li><a href="men.html">Men</a></li>
         <li><a href="children.html">Children</a></li>
         <li><a href="homeandappliances.html">Home&amp;Appliances</a></li>
         <li><a href="visionandsound.html">Vision&amp;Sounds</a></li>
          <li><a href="motoring.html">Motoring</a></li>
          <li><a href="homemore.html">More</a></li>
          <li><a href="homecontact.html">Contact us</a></li>
          <li><a href=" rl.html">Register/Log in</a></li>
      </ul>
    </div> <!--end of navigation div -->
    </div>
    <div id="navigation">
      <ul>
         <li><a href="left.html">Offer</a></li>
         <li><a href="left2.html">Free</a></li>
        <li><a href="/comparison/category/clotheswomen/">Women's Clothing</a></li>
         <li><a href="/comparison/category/shoeswomen/"> Women's Shoe </a></li>
         <li><a href="/comparison/category/underwear women/">Underwear&amp;Lingerie</a></li>
         <li><a href="women'sperfume.html">Perfume</a></li>
         <li><a href="/comparison/category/accessorieswomen/">Accessories</a></li>
          <li> <a href="women'smore.html">More</a></li>
      </ul>
    </div> <!--end of navigation div -->
    <div id="bodycontent">
    <div id="bannercontainer">
    <a href="img/pr.jpg"></a>
    </div>
    <div id="pbanner">
      <ul id="promo-banners">
      <li class="promo-banner">
        <h2>
            <a href="/comparison/category/clotheswomen/">Women's Clothing</a>
         </h2>
    <a href="/comparison/category/clotheswomen/"><img height="198" width="228"  src="img/fashion.jpg" alt=" alibi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
            <a href="/comparison/category/shoeswomen/"> Women's Shoe </a>
         </h2>
    <a href="/comparison/category/shoeswomen/"><img height="198" width="228"  src="img/womensshoe.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
          <a href="/comparison/category/underwear women/">Underwear&amp;Lingerie</a>
         </h2>
    <a href="/comparison/category/underwear women/"><img height="198" width="228"  src="img/underwear.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
            <a href="women'sperfume.html">Perfume</a>
         </h2>
    <a href="women'sperfume.html"><img height="198" width="228"  src="img/womensperfume.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
            <a href="/comparison/category/accessorieswomen/">Accessories</a>
         </h2>
    <a href="/comparison/category/accessorieswomen/"><img height="198" width="228"  src="img/womensaccessories.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
    <li class="promo-banner">
        <h2>
            <a href="women'smore.html">More</a>
         </h2>
    <a href="women'smore.html"><img height="198" width="228"  src="img/men.jpg" alt=" alabi"/>
    </a>
    <p class="promo-seo">
     glam up for this season hottest party reduction
    <a href="men.html">Men</a>
    </p>
      </li>
      </ul>
      </div>
    </div>
    </div>
    <div id="footer">
    <ul id="footlink">
         <li><a href="contact.html">Contact us</a></li>
         <li><a href="termsandcondition.html">Terms&amp;Condition</a></li>
         <li><a href="right.html">Copyright</a></li>
         <li><a href="faq.html">Faq</a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    below is the css
    Code:
    /*
    CSS for Reacheasy site
    */
    	body,html {
     	margin: 0;
    }
     
    #page {
     	width: 1060px;
     	margin: 0 auto;
     	position: relative
     	/* is the same as: 
     	margin-top: 0;
     	margin-bottom: 0;
     	margin-left: auto;
     	margin-right: auto;
     */
    }
    
    /* sticky footer */
    /*Opera Fix*/
    body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    #outer:after {
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    /* ... */
    /*
    CSS for Reacheasy site
    */
    html, body {
        height:100%;
        margin:0;
        padding:0;
        border:none;
    background: url("img/aurora.jpg");
    }
    #outer {
        width:1060px;
        margin:auto;
        min-height:100%;
        margin-top:-52px;
        border-left:1px solid black;
        border-right:1px solid black;
    background: #A1A1A1 url(backgrounds/nav-bg.jpg) repeat-y left top    
    }
    * html #outer {
        height:100%
    }
    h1 {
        font-size: xx-large;
        color: white;
        padding: 2em 0 .2em .4em;
        margin: 0;
        background: url(img/header.jpg) repeat-y right;
    }
    ul#nav {
        height: 2em;
        list-style: none;
        margin: 0;
        padding: .2em 0;
        margin:0;
        background: url(img/tabs.gif);
        border: 0 solid;
    }
    ul#nav li {
        background: #48f url(img/tabs.gif);
        float: left;
        margin: 0 1px 0 0;
        padding-left: 10px;
        border-right: 1px solid #A1A1A1;
        border: 0 solid;
    }
    ul#nav a {
        background: url(img/tabs.gif) 100% 0;
        color: #008;
        display: block;
        float: left;
        height: 2em;
        line-height: 2em;
        padding-right: 10px;
        text-decoration: none;
        border: 0 solid;
    }
    ul#nav li.current {
        background-color: #48f;
        background-position: 0 -60px;
    }
    ul#nav li.current a {
        background-position: 100% -60px;
        color: #fff;
        font-weight: bold;
    }
    #navigation {
        width: 180px;
        float:left;
    }
    
    #navigation li {
        margin: 0 1px 0 0;
        padding-left: 0px;
        text-decoration: none;
       list-style: none;
       background: #48f url(img/tabs.gif);
        border-right: 1px solid #A1A1A1;
         
    
    }
    #navigation a {
        color: #008;
        padding-right: 10px;
        text-decoration: none;
        height: 2em;
        line-height: 1em;
        
    }
    
    #navigation a:visited{
     color: #008;
    }
    
    #bodycontent {
        float:right;
        width:880px;
        background:black;
      
    }
    #header {
        width:100%;
        border-top:52px solid #fff;
        border-bottom:1px solid #A1A1A1;
    }
    #footer {
        width:1060px;
        clear:both;
        height:50px;
        border-top:1px solid #000;
        background-color:#fff;
        border-bottom:1px solid #000;
        color:  #000000;
        text-align:center;
        margin:0 auto;  
    }
    
    ul#footlink {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    float: left;
    width: 100%;
    color: #fff;
    }
    
    ul#footlink li { 
    display: inline;
    text-align:center; 
    }
    
    #bannercontainer{
           width: 800px;
           height: 300px;
           padding: 0;
           margin-left: auto;
           margin-right: auto;
           background: #eee;
           border: 1px solid #000;
        }
    
        #bannercontainer a{
           display: block;
           width: 800px;
           height: 300px;
           padding: 0;
           background:#eee url(img/pr.jpg) 0 0 no-repeat;
        }
    
        #bannercontainer a:link,#bannercontainer a:visited{
           background:#eee url(img/pr.jpg) 0 0 no-repeat;
        }
    
        #bannercontainer a:hover{
           background:#eee url(img/pr.jpg) 150px 0 no-repeat;
        }
    #promo-banners{
      width:860px;
    }
    
    .promo-banner{
       border: medium none;
       display:block;
       float: left;
       padding: 0 19px 5px 0;
       width: 230px;
    }
    .promo-seo{
    color:white;
    display:block;
    float:left;
    font:12px arial;
    height:75px;
    margin-bottom:5px;
    padding:7px 5px 0;
    text-align:left!important;
    width:218px;
    }
    .promo-seo-link{
    color:#bdbdbd;
    text-decoration:none;
    }
    .promo-seo-link:visited{
    color:#bdbdbd;
    }
    Last edited by Paul O'B; Sep 21, 2011 at 08:59.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    How familiar are you with CSS? Using a tool like Firebug for Firefox, or the web developer tools for other browsers like Chrome, Safari or Opera, you can look under the hood and see what HTML and CSS was used for that navigation. (Just right click on the navigation and choose Inspect Element.) The CSS for that menu is actually quite simple. We can help you with it if you like, but it's worth having a look yourself, as that's a great way to learn.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thanks i was able to realise that i did input the border-bottom , so i got it now, thanks ralph

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Threads merged.

    Please restate your problem if it has not been solved yet.

  8. #8
    SitePoint Addict
    Join Date
    Oct 2010
    Posts
    323
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thanks paul, its been solved


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
  •