www.webdeveloper.com
Results 1 to 3 of 3

Thread: Navigation text padding problem

  1. #1
    Join Date
    Jun 2003
    Posts
    445

    Navigation text padding problem

    I'm looking to have the same amount of width-spacing of vertical dividers between navigation text. What happens currently is, when the text is longer, you can see the spacing between the dividers is longer too. How can that be fixed? Thanks.

    http://i42.tinypic.com/2uygg9z.jpg

    PHP Code:
    #apDiv1 {
        
    positionabsolute;
        
    left:20px;
        
    top:89px;
        
    width:54px;
        
    height:29px;
        
    z-index:1;
        
    text-align:center;
    }
    .
    style2 {
    border-right1px #000000 solid;
        
    font-familyVerdanasans-serif;
        
    font-size15px;
        
    colorwhite;

    Code:
    <div id="apDiv1">
    <table width="700" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td class="style2">Short</td>
        <td class="style2">Long Long</td>
        <td class="style2">Long Long Long</td>
        <td class="style2">Short</td>
        <td class="style2">Short</td>
      </tr>
    </table>
    </div>

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    same amount of width-spacing
    If you mean you would like the same spacing between text items regardless of their length, I would do it using a <ul> instead of tables which imo can be messy when used for page content layout.

    I display the <li>'s inline and then to get equal spacing you can play with the padding or margin settings as you like depending on where you want <li> borders to be.

    In the example below each of the text items will have 20px between where one item ends and the next one starts.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

    <
    html xmlns="http://www.w3.org/1999/xhtml"
    <
    head
    <
    title></title
    <
    style type="text/css"
    <!-- 
     
    #apDiv1 { 
        
    positionabsolute
        
    left:20px
        
    top:89px;  
        
    height:29px
        
    z-index:1
        
    text-align:center

     
    #apDiv1 ul { 
     
    list-style-typenone 

     
    #apDiv1 ul li { 
     
    displayinline;
     
    margin0px 10px 0px 10px;
     
    padding0px px 0px px;
     
    border-right1px solid red;
     
    border-left1px solid blue;

     
    --> 
    </
    style

    </
    head
    <
    body
     
    <
    div id="apDiv1">
     <
    ul>
        <
    li>Short</li>
        <
    li>Long Long</li>
        <
    li>Long Long Longxxxxxxxxxxxxxxxx</li>
        <
    li>Shortxxxxxxxxxxx</li>
        <
    li>Short</li>
     </
    ul>
    </
    div>
     
    </
    body
    </
    html
    Last edited by tirna; 04-08-2010 at 09:31 PM.

  3. #3
    Join Date
    Jun 2003
    Posts
    445
    Yes, that's what I'm looking for. However, there is one more thing that I don't understand; when I try to change the right padding through this:
    PHP Code:
    padding0px px 0px px;
    border-right1px solid black
    it doesn't change anything, and I tried changing the four padding fields with numbers....

    But, when I changed the padding to:
    PHP Code:
    padding-right15px
    then it works. The reason I want padding to the right only, is so the padding pushes the vertical border away to the right. And the reason I don't want both the left and right borders is because I don't want them to end-up overlapping each other when they meet.

    EDIT:

    I also want to apply a rollover. Where would I place that in the CSS?
    PHP Code:
    .roll:hoover {
        
    text-decorationunderline;

    Last edited by jamesx521; 04-09-2010 at 12:01 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles