SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: Progress Indicator (Progress Tracker) alignment issue in IE6 and need to highlig

    I am seeing an issue in alignment of arrow image with the rest of the text and also highlighting an indicator is an issue because of the spacer.

    <code>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <STYLE type="text/css">

    .progress1 {
    height:34px;
    border-left:1px solid #948a63;
    border-top:1px solid #948a63;
    border-bottom:1px solid #948a63;
    text-align: left;
    background-color: #efefe7;
    color: #948a63;
    font-weight: bold;
    font-family: "Trebuchet MS, Arial, Helvetica, sans-serif 80%";
    vertical-align: middle;
    }


    .progress2 {
    height:34px;
    border-top:1px solid #948a63;
    border-bottom:1px solid #948a63;
    text-align: left;
    background-color: #efefe7;
    color: #948a63;
    font-weight: bold;
    font-family: "Trebuchet MS, Arial, Helvetica, sans-serif 80%";
    vertical-align: middle;
    }

    .arrow {
    height:34px;
    vertical-align: middle;
    background:url(arrow1.gif) left no-repeat #efefe7;
    padding:0;
    border:0;
    border-top:1px solid #948a63;
    border-bottom:1px solid #948a63;
    }
    </STYLE>


    <title>Arrow Progress Bar Mockup</title>
    </head>

    <body>
    <div>
    <span class="progress1">&nbsp;Indicator1&nbsp;</span><span class="arrow"><img src="spacer.gif" width="20" height="20" border=0></span><span class="progress2">&nbsp;Indicator2&nbsp;</span><span class="arrow"><img src="spacer.gif" width="20" height="20" border=0></span>
    </div>



    </body>
    </html>
    </code>
    Attached Images Attached Images

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a slightly different way to look at it with hardly any CSS.

    Code :
    <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>Spacing & Padding</title> 
    <head>
     
    <style type="text/css">
    <!--
    body { 
    font-family:"Trebuchet MS, Arial, Helvetica, sans-serif 80%";
    color: #948a63;
    font-weight: bold;
    }
     
    #div1 p { 
    margin-right:10px; 
    text-align:left; 
    border:1px solid #948a63;
    }
     
    .progress {
    float:left;
    padding:5px;
    background-color: #efefe7;
    }
     
    .arrow {
    vertical-align: -4px;
    }
    -->
    </style>
    <title>Arrow Progress Bar Mockup</title>
    </head>
     
    <body>
     
    <div id="div1">
      <p class="progress">Indicator 1&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></p>
      <p class="progress">Indicator 2&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></div>
     
    </body>
     
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Allan. It almost got me what i need. How i can extend (or span) 'indicator3' to end of the right corner of the page.

    <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>Spacing & Padding</title>
    <head>

    <style type="text/css">
    <!--
    body {
    font-family:"Trebuchet MS, Arial, Helvetica, sans-serif 80%";
    color: #948a63;
    font-weight: bold;
    }


    #div1 p {
    margin-right:0px;
    text-align:left;
    border-top:1px solid #948a63;
    border-bottom:1px solid #948a63;
    }

    .progress {
    float:left;
    background-color: #efefe7;
    }

    .arrow {
    vertical-align: -4px;
    }
    -->
    </style>
    <title>Arrow Progress Bar Mockup</title>
    </head>

    <body>

    <div id="div1">
    <p class="progress" style="border-left:1px solid #948a63;">Indicator 1&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></p>
    <p class="progress">Indicator 2&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></p>
    <p class="progress" style="border-right:1px solid #948a63;">Indicator 3&nbsp;</p>
    </div>

    </body>

    </html>

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    As I understand it you want to extend all of the indicators equally across the page. Here is my attempt, but there may be a better way. You will note that I have collapsed some of the rules together in this version.

    Code :
    <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
     
    <style type="text/css">
    <!--
    body { 
    font-family:"Trebuchet MS, Arial, Helvetica, sans-serif 80%";
    color: #948a63;
    font-weight: bold;
    margin:0px;
    }
     
    #div1 { 
    width: 100%;
    padding-left:10px;
    margin: 0px auto; 
    min-width: 950px;
    max-width: 1200px;
    overflow: hidden;
    }
     
    #div1 p { 
    margin: 20px 5px;
    text-align:left; 
    border:1px solid #948a63;
    width: 31%;
    float: left;
    padding: 5px;
    background-color: #efefe7;
    }
     
    .arrow {
    vertical-align: -4px;
    }
    -->
    </style>
    <title>Arrow Progress Bar</title>
    </head>
     
    <body>
     
    <div id="div1">
      <p class="a">Indicator 1&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></p>
      <p>Indicator 2&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></p>
      <p>Indicator 3&nbsp;<img class="arrow" src="arrow1.gif" width="19" height="19"></div>
     
    </body>
     
    </html>


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
  •