Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

Stick to left

Newbie
  
Join Date: Jun 2009
Posts: 11
#1: Oct 21 '09
Hi

How can i stick tabs to left. Now it has 40px distance to left.

Expand|Select|Wrap|Line Numbers
  1. <style>
  2. #Content {
  3.             background-color: #fafafa;
  4.             border: 1px solid #a2b6cb;
  5.             padding: 10px;
  6.             margin-top: -13px;
  7.         }
  8.  
  9. UL#Tabs {
  10.             font-family: Verdana, Arial;
  11.             font-size: 12px;
  12.             font-weight: bold;
  13.             list-style-type: none;
  14.             padding-bottom: 28px;
  15.             border-bottom: 1px solid #a2b6cb;
  16.             margin-bottom: 12px;
  17.             z-index: 1;
  18.         }
  19.         #Tabs LI.Tab {
  20.             float: left;
  21.             height: 25px;
  22.             background-color: #deedfb;
  23.             margin: 2px 0px 0px 5px;
  24.             border: 1px solid #a2b6cb;
  25.         }
  26.         #Tabs LI.Tab A {
  27.             float: left;
  28.             display: block;
  29.             color: #666666;
  30.             text-decoration: none;
  31.             padding: 5px;
  32.         }
  33.         #Tabs LI.Tab A:hover {
  34.             background-color: #bfe0fe;
  35.             border-bottom: 1px solid #bfe0fe;
  36.         }
  37.         /* Selected Tab */
  38.         #Tabs LI.SelectedTab {
  39.             float: left;
  40.             height: 25px;
  41.             background-color: #fafafa;
  42.             margin: 2px 0px 0px 5px;
  43.             border-top: 1px solid #a2b6cb;
  44.             border-right: 1px solid #a2b6cb;
  45.             border-bottom: 1px solid #fafafa;
  46.             border-left: 1px solid #a2b6cb;
  47.         }
  48.         #Tabs LI.SelectedTab A {
  49.             float: left;
  50.             display: block;
  51.             color: #666666;
  52.             text-decoration: none;
  53.             padding: 5px;
  54.             cursor: default;
  55.         }
  56. </style>
  57.  
  58. <script type="text/javascript">
  59.         // Index Page
  60.         function index() {
  61.             // Tab
  62.             document.getElementById('IndexTab').className = 'SelectedTab';
  63.             document.getElementById('InstallTab').className = 'Tab';
  64.             document.getElementById('UpgradeTab').className = 'Tab';
  65.             document.getElementById('UsageTab').className = 'Tab';
  66.             // Page
  67.             document.getElementById('Index').style.display= 'block';
  68.             document.getElementById('IndexTab').className = 'SelectedTab';
  69.             document.getElementById('Install').style.display = 'none';
  70.             document.getElementById('Upgrade').style.display = 'none';
  71.             document.getElementById('Usage').style.display = 'none';
  72.         }
  73.         // Installation Page
  74.         function install() {
  75.             // Tab
  76.             document.getElementById('IndexTab').className = 'Tab';
  77.             document.getElementById('InstallTab').className = 'SelectedTab';
  78.             document.getElementById('UpgradeTab').className = 'Tab';
  79.             document.getElementById('UsageTab').className = 'Tab';
  80.             // Page
  81.             document.getElementById('Index').style.display= 'none';
  82.             document.getElementById('Install').style.display = 'block';
  83.             document.getElementById('Upgrade').style.display = 'none';
  84.             document.getElementById('Usage').style.display = 'none';
  85.         }
  86.         // Upgrade Page
  87.         function upgrade() {
  88.             // Tab
  89.             document.getElementById('IndexTab').className = 'Tab';
  90.             document.getElementById('InstallTab').className = 'Tab';
  91.             document.getElementById('UpgradeTab').className = 'SelectedTab';
  92.             document.getElementById('UpgradeTab').href = 'Tab';
  93.             document.getElementById('UsageTab').className = 'Tab';
  94.             // Page
  95.             document.getElementById('Index').style.display= 'none';
  96.             document.getElementById('Install').style.display = 'none';
  97.             document.getElementById('Upgrade').style.display = 'block';
  98.             document.getElementById('Usage').style.display = 'none';
  99.         }
  100.         // Usage Page
  101.         function usage() {
  102.             // Tab
  103.             document.getElementById('IndexTab').className = 'Tab';
  104.             document.getElementById('InstallTab').className = 'Tab';
  105.             document.getElementById('UpgradeTab').className = 'Tab';
  106.             document.getElementById('UsageTab').className = 'SelectedTab';
  107.             // Page
  108.             document.getElementById('Index').style.display= 'none';        
  109.             document.getElementById('Install').style.display = 'none';
  110.             document.getElementById('Upgrade').style.display = 'none';
  111.             document.getElementById('Usage').style.display = 'block';
  112.         }
  113. </script>
  114.  
  115. <ul id="Tabs">
  116.         <li id="UsageTab" class="Tab"><a href="#Usage" onclick="usage(); return false;" title="Usage Instructions">Usage</a></li>
  117.         <li id="UpgradeTab" class="Tab"><a href="#Upgrade" onclick="upgrade(); return false;" title="Upgrade Instructions">Upgrade</a></li>
  118.         <li id="InstallTab" class="Tab"><a href="#Installation" onclick="install(); return false;" title="Installation Instructions">Installation</a></li>
  119.         <li id="IndexTab" class="SelectedTab"><a href="#Index" onclick="index(); return false;" title="Index Instructions">Index</a></li>
  120.  
  121. </ul>
  122.  
  123. <div id="Content">
  124.     <!-- Index -->
  125.     <div id="Index">
  126.         INDEX
  127.     </div>
  128.  
  129.     <!-- Installation Instructions -->
  130.     <div id="Install" style="display: none;">
  131.         INSTALL
  132.     </div>
  133.  
  134.     <!-- Upgrade Instructions -->    
  135.     <div id="Upgrade" style="display: none;">
  136.         UPGRADE
  137.     </div>
  138.  
  139.     <!-- Usage Instructions -->    
  140.     <div id="Usage" style="display: none;">
  141.         USAGE
  142.     </div>
  143. </div>
  144.  
Attached Files
File Type: txt asdf.txt (4.5 KB, 8 views)

Newbie
  
Join Date: Jun 2009
Location: Whitehall, PA
Posts: 7
#2: Oct 23 '09

re: Stick to left

Add 'padding-left: 0;' to the UL#Tabs declaration. You set padding-bottom, but never zeroed out the left.

A recommendation for the future: try setting all margins/padding to 0 and build from there, rather than trying to debug default browser behavior.
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,501 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved