SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot HardDriver's Avatar
    Join Date
    Feb 2004
    Location
    Kentucky, USA
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Designing for Low Resolutions - can this work?

    I want to use this decorative element in my horizontal list, so it appears as if the raised area where the buttons are trails off into a more simple, flat surface. I accomplished this by using empty list items at either end of my horizontal list, then setting a decorative element as a background image and set the padding of the element so that it showed all of the background.

    This looks great, but at lower resolutions, the empty list items jump above and below the rest of the tabs and it looks terrible. Is there any way to get this decorative effect at either end using backgrounds that don't attempt to force the extending of the width of the page?

    I've included screenshots and source code below of what I'm talking about. Any help that you experts could offer would be greatly appreciated. Thanks!




    The list at a higher resolution:




    The list at a lower resolution:



    HTML Source:
    HTML Code:
         <div id="tabs">
         	<ul>
         	<li id="tab_left">&nbsp;</li>
         	  <li><a href="#">Home Page</a></li>
         	  <li id="current"><a href="#">Game Guides</a></li>
         	  <li><a href="#">Leaderboards</a></li>
         	  <li><a href="#">Message Boards</a></li>
         	  <li><a href="#">Store</a></li>
         	  <li><a href="#">Magazine</a></li>
         	<li id="tab_right">&nbsp;</li>
         	</ul>
         </div>
    CSS Source:
    PHP Code:
         /* TABS WITH GRADIENT */
         #tabs {
             
    border-topsolid 1px #DEDEDE;
             
    margin-bottom20px;
         }
         
    #tabs ul {
             
    backgroundurl(i/final/composite.pngrepeat-x bottom;
             
    fontbold .8em TahomaArialHelveticasans-serif;
             
    text-aligncenter;
             
    margin0;
             
    padding5px 0 12px 0;
           }
         
    #tabs ul li {
             
    displayinline;
             
    margin0 0 0 -3px;
          }
         
    #tabs ul li a {
             
    backgroundurl(i/final/composite.pngrepeat-x;
             
    background-position-272px;
             
    color#323232;
             
    text-decorationnone;
             
    padding3px 20px;
             
    border-width1px 1px 1px 2px;
             
    border-stylesolid;
             
    border-color#FFF #BDBDBD #DFDFDF #FFF;
         
    }
         
    #tabs ul li a:hover {
             
    background-position-384px;
             
    border-bottom-color#FFF;
         
    }
         
    /* CODE FOR IE */
         #tabs li#current a, #tabs ul li a:active {
             
    backgroundurl(i/final/composite.pngrepeat-x;
             
    background-position2px -139px;
             
    border-width2px 1px 2px 2px;
             
    border-stylesolid;
             
    padding4px 20px 2px 20px;
             
    positionrelative;
             
    top1px;
             
    left1px;
             
    border-color#797979 #fff #fff #797979;
         
    }
         
    /* END IE CODE*/
         
    html>body #tabs li#current a, #tabs ul li a:active {
             
    background-position-150px;
             
    border-width2px 1px 2px 2px;
             
    border-stylesolid;
             
    padding4px 20px 2px 20px;
             
    positionrelative;
             
    top1px;
             
    left1px;
             
    border-color#797979 #fff #fff #797979;
         
    }
         
    #tabs li#tab_left {
                 
    backgroundurl(i/final/tab_left.pngno-repeat right;
                 
    padding10px 50px;
         }
         
    #tabs li#tab_right {
                 
    backgroundurl(i/final/tab_right.pngno-repeat left;
                 
    padding10px 50px;
         } 

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,454
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    fluid CSS

    I think you should be able to lose the tab_left and tab_right that you are using to center the tabs at one resolution. see http://www.bluerobot.com/web/css/center1.html

  3. #3
    SitePoint Zealot HardDriver's Avatar
    Join Date
    Feb 2004
    Location
    Kentucky, USA
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your reply, but I don't think that will solve my problem. The list centers just fine at all resolutions with the way it is coded now, and if I lose the "tab_left" and "tab_right" elements, then how will my fading decorative elements (highlighted in red) on either end be displayed?


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
  •