SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded CSS Tabs Help

    ok I have a problem. It's probably best if I illustrate then explain:

    Problem


    Supposed to Look like



    I have been working on a code below for over 2 hours trying different implementation to try and get it to work but I don't think I can do it alone, so I need your help please.

    HTML
    Code:
     	<div id="navigation">
     	 <ul class="tab">
     	  <li><a href="/" title="Homepage" accesskey="1">homepage</a></li>
     	  <li><a href="/about/" title="About Me" accesskey="2">about me</a></li>
     	 </ul>
     	</div>
    CSS
    Code:
     html, body {
       background: #284B9A;
       color: #000000;
       font-family: Verdana, Arial, Helvetica, Sans-serif;
       font-size: 8pt;
       text-align: left;
       margin: 0;
       padding: 0;
       }
     
     #middle {
       background: #FFFFFF;
       padding: 0;
       margin: 0;
       border-top: 7px solid #CBBE8C;
       border-bottom: 7px solid #CBBE8C;
       }
       #middle .content {
     	width: 770px;
     	text-align: justify;
     	margin: 5px 15px 5px 25px;
     	padding: 0;
     	}
     	#middle .content .submenu {
     	  float: right;
     	  width: 170px;
     	  padding: 0 5px 0 5px;
     	  margin: 0;
     	  }
     	  #middle .content .submenu h2 {
     		color: #867D5C;
     		font-family: "Trebuchet MS", Arial, Verdana, Helvetica, Sans-serif;
     		font-size: 10pt;
     		font-weight: bold;
     		text-transform: uppercase;
     		margin: 0;
     		padding: 0;
     		}
     	#middle .content .text {
     	  float: left;
     	  width: 585px;
     	  }
     	  #middle .content .text .breadcrumbs {
     		color: #867D5C;
     		font-family: "Trebuchet MS", Arial, Verdana, Helvetica, Sans-serif;
     		font-size: 10pt;
     		font-weight: bold;
     		text-transform: uppercase;
     		text-decoration: none;
     		}
     		#middle .content .text .breadcrumbs .current {
     		  color: #CBBE8C;
     		  }
     	#middle .content .text h1 {
     	  color: #4469B8;
     	  font: 2.5em Georgia, Times, "Times New Roman", serif;
     	  letter-spacing: -0.04em;
     	  _letter-spacing: -0.07em;
     	  padding: 7px 0 0 0;
     	  margin: 0 0 -8px 0;
     	  }
       
     #navigation {
       color: #FFFFFF;
       font-family: "Trebuchet MS", Arial, Verdana, Helvetica, Sans-serif;
       font-size: 10pt;
       font-weight: bold;
       text-transform: uppercase;
       width: 770px;
       padding: 0;
       margin: -10px 0 -15px 0;
       }
     
       #navigation ul.tab {
     	list-style: none;
     	}
       #navigation ul.tab li {
     	display: inline;
     	line-height: 27px;
     	}
       #navigation ul.tab li a {
     	background: #CBBE8C url(../images/right_on.gif) top right no-repeat;
     	color: #FFFFFF;
     	height: 27px;
     	text-decoration: none;
     	padding: 4px 9px 3px 9px;
     	}
       #navigation ul.tab li a:hover {
     	background: #4569B9 url(../images/right.gif) top right no-repeat;
     	color: #FFFFFF;
     	text-decoration: none;
     	}
       
     #footer {
       clear: both;
       color: #FFFFFF;
       font-family: "Trebuchet MS", Arial, Verdana, Helvetica, Sans-serif;
       font-size: 12pt;
       text-transform: uppercase;
       width: 770px;
       padding: 5px 20px 25px 20px;
       }
       #footer a {
     	color: #FFFFFF;
     	text-decoration: none;
     	}
       #footer a:hover {
     	color: #9E977D;
     	text-decoration: none;
     	}
       #footer span {
     	float: right;
     	}
     	
     .clear {
       clear: both;
       }
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  2. #2
    Romans 12:2 codyrockx's Avatar
    Join Date
    Jul 2003
    Location
    Newberg, Oregon
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anchor tags do not normally accept width and height values in the css class. To allow that you must specify them as block elements:
    Code:
     display: block;
    Aside from that, I don't even see that you are displaying the left side image, are you? In your anchor classes it's named only as a right side image.
    Codyrobert.com - Designer and Developer

  3. #3
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well that's the point, I don't know where I could logically put the other side of the rounded curve. I was thinking of using a span but...I don't think it will work. I am more or less asking people to help me do it...i have tried using the anchor tag, li tag, ul tag and nothing seems to work to show both sides at once.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  4. #4
    SitePoint Zealot physt's Avatar
    Join Date
    Jul 2004
    Location
    Schenectady, NY
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Normally I would say just put the left image on the A and the right image on the ul. But in this case the Button sizes are all the same so why not just use 1 image?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So why don't you make your background the correct shape with two rounded corners. If you make it {width:100%} then it will stretch if the font size increases.

  6. #6
    SitePoint Zealot physt's Avatar
    Join Date
    Jul 2004
    Location
    Schenectady, NY
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This seems more like a job for sliding doors.. Although IE doesn't hover right without Javascript I think.. http://www.alistapart.com/articles/slidingdoors/

  7. #7
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by physt
    Normally I would say just put the left image on the A and the right image on the ul. But in this case the Button sizes are all the same so why not just use 1 image?
    Not all of it is going to be the same size....i need to be able to have it expand width and height for when the text scales.

    I am trying to do this in the simplest way possible. So far this is being far too complex.

    Quote Originally Posted by physt
    This seems more like a job for sliding doors.. Although IE doesn't hover right without Javascript I think.. http://www.alistapart.com/articles/slidingdoors/
    There is no spacing and when I started to edit the font-family and other information it really messed up the CSS and and wasn't sure how to work it out so it work properly.

    I am guessing I will have to use em's and percentages...if I want it to scale properly...
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

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

    What you are trying to do is basically easy as you want to place 4 corner images. 2 for the normal state and 2 for the rollover state (assunimg the main tab is just a background color.

    Therefore you need 4 "hooks" into which you can place your images and two of those hooks have to be affected by hover. So you can use the li element for one background corner and the anchor for another. Then for the two hovers you can use the anchor again for the hover but as the list won't hover you have to nest a span inside the anchor so you can target that on hover.

    Thats basically it. If you size the tabs in ems then they should be fluid depending on how you contsruct your rounded corners.

    Theres a simple sitepoint article here that shows the technique. Read through the comments as there are links to others examlples there.

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

    Hope that helps.

    Paul

  9. #9
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul....i'll have a look at that...
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  10. #10
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is not universal way to do this. I mean most people use inline lists but, that renders differently in some browsers, usually people use a span then with floats but, is there no other way?
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    but, is there no other way
    What other way do you want

    Its just a matter of manipulating elements so there must be hundreds of ways all with their own little obstacles to overcome .

    There are loads of examples here of rounded corners which use techniques that you need,

    I'm not quite sure what you are asking lol

    Paul

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

    Here is an example of one way that should be self explanatory. It has a non semantic span but I didn't want to confuse things by using other elements.

    http://www.pmob.co.uk/temp/tabexample.htm

    Hope that helps.

    Paul

  13. #13
    SitePoint Evangelist Ian R. Gordon's Avatar
    Join Date
    Feb 2004
    Location
    New York
    Posts
    474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. It helps a bit, but it still seems to me the CSS necessary to accomplish this is so much....


    Well if that that it takes, I will use it...I will have to research a far simpler and cleaner (code wise) way of accomplishing those rounded CSS tabs.
    Ian Gordon
    CSS / XHTML / PHP Programmer
    http://www.iangordon.us

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well It looks pretty simple to me I don't see how it could be much easier. The span could be replaced by a more semantic element such as strong to wrap the text instead.

    It would be simple if you didn't want the tabs to expand as you would only need two images. But as you wanted a fluid size (try expanding my example) you have to split the tabs in half so they can stretch.

    There are other ways such as using corner images in the html but then again you need four of them . Otherwise you'll just have to wait for css3

    Paul


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
  •