SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css navigation tables?

    Hi,

    I am trying to use some <div>'s to create my navigation tabs but I am having a few problems getting them to align correctly next to each other.

    Here is the CSS

    Code:
    	.navunselected { FONT-WEIGHT: bold; FONT-SIZE: 13px; BACKGROUND-IMAGE: url(../images/tabs/navunselected_bg.gif); COLOR: #ffffff; BACKGROUND-REPEAT: repeat-x; FONT-FAMILY: Verdana, Verdana,sans-serif; TEXT-DECORATION: none; height:21px;}
    	.navunselected1 {height:21; width:21px; background-image: url(../images/tabs/navunselected_firsttab.gif);}
    	.navunselected3 {height:21; width:21px; background-image: url(../images/tabs/navunselected_secondtab.gif);}
    Here is the HTML (with a bit of ASP.net )

    Code:
    <div class="navunselected1"></div>
    <div class="navunselected"><asp:HyperLink ID="HyperlinkPH1" Runat="server" NavigateUrl="default.aspx?tabs=1" CssClass="nav">Home</asp:HyperLink>&nbsp;</div>
    <div class="navunselected3"></div>
    can anyone help me out please?

    Thanks,

    Al

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

    To align elements alongside each other you will need to float them. So add float:left to each of the styles above.

    To make content start on a new line after the floats you will need to add clear:both to the following element.

    If you are making a navigation then you really should use lists as they are more semantic. There are a load of tutorials here and even a generator to automatw the process.

    http://css.maxdesign.com.au/listamatic/

    Hope it helps

  3. #3
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! I'll take a look at using the list.

  4. #4
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I have been looking into using an list for navigation tabs and I have a question or two. Below is some code from an example that I have been playing with but I would like to have an image either side of the tabs (images are attached to the post).

    How would I go about setting the images up on the list?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
     #navlist
    {
    padding: 3px 0;
    margin-left: 0;
    border-bottom: 1px solid #778;
    font: bold 12px Verdana, sans-serif;
    }
    
    #navlist li
    {
    list-style: none;
    margin: 0;
    display: inline;
    }
    
    #navlist li a
    {
    padding: 3px 0.5em;
    margin-left: 0px;
    border: 1px solid #778;
    border-bottom: none;
    background: #DDE000;
    text-decoration: none;
    }
    
    #navlist li a:link { color: #448; }
    #navlist li a:visited { color: #667; }
    
    #navlist li a:hover
    {
    color: #000;
    background: #AAE;
    border-color: #227;
    }
    
    #navlist li a#current
    {
    background: white;
    border-bottom: 1px solid white;
    }
    </style>
    </head>
    
    <body>
     <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>
    </body>
    </html>
    I hope it is possible to use the list to produce this as that would be fantastic and very versital (SP)

    If you or if anyone else could give me a hand it would be very much appriciated!

    thanks

    Al
    Attached Images Attached Images

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't see your images yet but I'm guessing you may want to look at something like this: http://www.alistapart.com/articles/slidingdoors/

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The link Tyssen gave is good and there is also a sitepoint article here:

    http://www.sitepoint.com/article/accessible-menu-tabs

    Either of the above should suit your purpose

  7. #7
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much Tyssen and Paul. those links look perfect! I am going to spend a hour or so working on these today.

    Al

  8. #8
    SitePoint Evangelist Muller2's Avatar
    Join Date
    Feb 2005
    Location
    Oxford, UK
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tyssen/Paul

    I have been working on the navigation using the code/layout that was on one of the examples but I am having a slight problem. The tabs I want cross over on the edges and the ones in the example don't.

    I have been playing with the code but I can't quite achieve exactly what I am after. I have posted my html/css and images below and I have got my selected tab almost working which should give the idea of where I'm trying to get too.

    If you could help me out and point me in the right direction I would be really appriciative.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <!-- saved from url=(0056)http://www.alistapart.com/d/slidingdoors/final_tabs.html -->
    <HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Sliding Doors of CSS | Master File</TITLE>
    <style>
    BODY {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small/1.5em Georgia,Serif; COLOR: #000; PADDING-TOP: 0px; voice-family: inherit
    }
    UNKNOWN {
    	FONT-SIZE: small
    }
    #header {
    	FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
    }
    #header UL {
    	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
    }
    #header LI {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
    }
    #header A {
    	PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #ffffff; PADDING-TOP: 5px; TEXT-DECORATION: none
    }
    #header A {
    	FLOAT: none
    }
    #header A:hover {
    	COLOR: #333
    }
    #header #current {
    	BACKGROUND-IMAGE: url(left_on.gif)
    }
    #header #current A {
    	BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #ffffff
    }
    
    </style>
    <META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
    <BODY>
    <DIV id=header>
    <UL>
      <LI><A 
      href="http://www.alistapart.com/d/slidingdoors/final_tabs.html#">Home</A> 
    </LI>
      <LI><A 
      href="http://www.alistapart.com/d/slidingdoors/final_tabs.html#">News</A> 
    </LI>
      <LI><A 
      href="http://www.alistapart.com/d/slidingdoors/final_tabs.html#">Products</A> 
      </LI>
      <LI id=current><A 
      href="http://www.alistapart.com/d/slidingdoors/final_tabs.html#">taselected tab</A> 
      </LI>
      <LI><A 
      href="http://www.alistapart.com/d/slidingdoors/final_tabs.html#">Contact</A> 
      </LI></UL></DIV></BODY></HTML>
    Images are attached.

    Thanks,

    Al
    Attached Images Attached Images

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

    You need to make bigger images so the layout can expand as mentioned in the articles.

    You should also re-think how the image swill work as the way you have it means that you also have to change the tabs on the images before the current one as well.

    Here's the best I can do with your images .

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    body {
     font: small/1.5em Georgia,Serif; 
     background:#fff;
     color:#000
    }
    #header {
     font-size:93%; 
     background:#dae0d2 url(images/bg.gif) repeat-x 50% 100%; 
     float: left; 
     width: 100%; 
     line-height: normal
    }
    #header ul {
     padding:10px 10px 0;
     list-style: none;
    }
    #header li {
     padding:0 0 0 5px;
     background: url(images/left.gif) no-repeat left top; 
     float: left;
    }
    #header a {
     padding:5px 28px 4px 6px; 
     display: block;
     font-weight: bold; 
     background: url(images/navunselected.gif) no-repeat right top; 
     float: left;
     color: #fff;
     text-decoration: none
    }
    #header a {
     float: none
    }
    #header a:hover {
     color: #333
    }
    #header #current {
     background-image: url(images/left_on.gif)
    }
    #header li#before a{background:url(images/left.gif) repeat-x right top;padding-right:10px;}
    #header li#current { background: url(images/right_on.gif) no-repeat right top; }
    #header #current a {
     background: url(images/left_on.gif) no-repeat left top; 
     padding-bottom: 5px; 
     padding-left:21px;
     color: #fff;
     margin-left:-6px
    }
    </style>
    </head>
    <body>
    <div id="header">
     <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li id="before"><a href="#">Products</a></li>
      <li id="current"><a href="#">current tab</a></li>
      <li><a  href="#">Contact</a></li>
     </ul>
    </div>
    </body>
    </html>
    Hope it helps


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
  •