SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Font Tab Issue

  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font Tab Issue

    Hi all!

    I have been working on creating these 4 tabs using JavaScript. It is working but when I add more text to each tab, it gets stretched out to the far right.

    I would like to make all the tabs so when I change more text to the tabs, it does not get wacky up.

    Here is the HTML code:

    Code:
    <head>
    
    <link href="tabcontent.css" rel="stylesheet" type="text/css">
    
    
    
    
    <script type="text/javascript" src="tabcontent.js">
    
    /***********************************************
    * Tab Content script
    ***********************************************/
    
    </script>
    
    
    </head>
    
    
    
    <body>
    
    
    
    <div class="tab">
    
    
    
    <ul id="sagetabs" class="shadetabs">
    <li><a href="#" rel="sage1" class="selected">Integration</a></li>
    <li><a href="#" rel="sage2">Contracts and Signature</a></li>
    <li><a href="#" rel="sage3">Solutions</a></li>
    <li><a href="#" rel="sage4">Software</a></li>
    
    </ul>
    
    <div class="tabbluebar"><img src="images/tabbluebar.gif"></div>
    
    <div class="tabfooter"><img src="images/tabfooter.gif"></div>
    
    
    <div style="border: 1px solid #D3D3D3; width:501px; height:456px; padding: 10px">
    
    <div id="sage1" class="paragraph1">
    
    
    knldknlskdnflskd sldknfsldk flskdn flksnd lfkn sldkfn lkn lsdknf lskddnf lksdf lksdn fls.
    
    <div class="list">
    	<ul class="li">
    		<li>hassdo  odihfosdf osdhf osdhf osihdfosidh fosd fosdhf osidhf osihdf o</li>
    		<li>sdfsdf sdfhskdhf sdhf ksdjhf ksjdh fksjdhf ksjdhfksjhd fkjshd kfjhs kdjfh ksjdhf ksjhd fkjshd kfjhsd kfjhs kdjfh ksdjhfksdjhf ksjhd fksjhd fkjshd fkjshd kfjhs kdjfh ksdjhf ksjdhf ksjdhf ksjdhf ksjdh fkjshd kfjhs kdjfh ksjdhf ksjdh fkshd fksh dkfs kdfskdfh skdjhf ksdjhf ksjhdf ks</li>
    		<li>sdfsdfsdlfjlksjdflk jsldkdjf lskjdf lksjdf lksjd flksjd lfkjs ldfkj sldkjf lskdjf lskdjf lskjd flskdjflsdkjf lskdjf lskdjflskdjf lskdjf lsdkjf lsdj flsdj flsdjflsdkjf lskdjf lskdjf lskdjf lskdjk flskjd flksjd flsdj flsjd flsjdlfjs dlfjs dlfjs dlfj sdlfjsdlf</li>
    	</ul>
    </div>
    
    
    </div>
    
    
    
    
    
    
    <div id="sage2" class="paragraph2">
    
    
    
    
    
    Accurately monitor and track budgets, programs, and departments with extensive budget controls.
    
    <div class="list">
    	<ul >
    		<li style="height: 3em;">■<span> Easily review budgeted amounts, dollars spent, committed funds, and available budget.</span></li>
    		<li style="height: 5em;">■<span> Quickly produce comparative statements for your management staff and board of directors illustrating the budget to actual position for your programs, grants, departments, and other cost center.</span></li>
    		<li style="height: 4em;">■<span> Estimating future periods with ease and calculate forecasted financial positions, including analyzing "what-if" scenarios for better decision making.</span></li>
    				<li style="height: 4em;">■<span> Estimating future periods with ease and calculate forecasted financial positions, including analyzing "what-if" scenarios for better decision making.</span></li>
    						<li style="height: 4em;">■<span> Estimating future periods with ease and calculate forecasted financial positions, including analyzing "what-if" scenarios for better decision making.</span></li>
    	</ul>
    </div>
    
    
    
    </div>
    
    
    
    
    
    
    
    
    <div id="sage3" class="tabcontent">
    Tab content 3 here<br />Tab content 3 here<br />
    </div>
    
    <div id="sage4" class="tabcontent">
    Tab content 4 here<br />Tab content 4 here<br />
    </div>
    
    </div>
    
    <script type="text/javascript">
    
    var sage=new ddtabcontent("sagetabs")
    sage.setpersist(true)
    sage.setselectedClassTarget("link") //"link" or "linkparent"
    sage.init()
    
    </script>
    
    
    
    </div>
    
    
    </body>


    I have attached the 2 rollover tab images for you to look at. I also have attached the JavaScript and External CSS within zip files.

    Please let me know if you need addition information so you can test it out.

    Thanks in advanced!!
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an image of how I wanted the tabs to look like when its done. Please see attached image.
    Attached Images Attached Images


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
  •