www.webdeveloper.com
Results 1 to 9 of 9

Thread: Spacer gifs into css?

  1. #1
    Join Date
    Apr 2006
    Posts
    233

    Spacer gifs into css?

    Hello

    Wondered how to convert all my spacer gifs into css - no idea how to.

    Was going to start on this simple page

    http://www.enhancedwireless.net/Company/contact.shtml

    Thanks for any tips/advice.

    KB

  2. #2
    Join Date
    Nov 2005
    Location
    PRoM
    Posts
    376
    I think the response you're going to end up with is that you don't need the spacer gifs. That's the whole point behind CSS.... you have absolute control over the positioning and therefore don't need them.

    But if you want to make more work for yourself than necessary I suppose you could make a div container for each spacer gif and position those as well.

  3. #3
    Join Date
    Apr 2006
    Posts
    233
    My post was in fact to ask HOW to use css instead of spacers - which of course I don't want to use. So how do I seamlessly replace current spacers with css?

    KB

  4. #4
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Set the appropriate margins and padding on the elements so as to give the required space between them.

  5. #5
    Join Date
    Apr 2006
    Posts
    233
    Danke schone - will try this

    KB

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Start by removing the tables and thinking about what the content of the page MEANS. It's a heading/banner and several lists. (Menus are lists of links.) The main content could be described by a definition list with the location being the "term" and the addressing info being the "definitions." And there's a footer of course.

  7. #7
    Join Date
    Apr 2006
    Posts
    233
    Thanks for the input

    KB

  8. #8
    Join Date
    Mar 2007
    Location
    Jeddah (Currently)
    Posts
    157

    Thumbs up Various Methods!

    Well, there are many other ways to do so, especially that the (*.gif) spacer is too old now and CSS is made for this.

    First of all, try using the "margins" property :

    HTML Code:
    <style type="text/css">
    .space                {margin-left:10px}
    </style>
    
    <div class="spacer">Text</div>
    Or the text indent :


    HTML Code:
    <style type="text/css">
    li.space              {text-indent:10px}
    /* Write it in a list, and remove the bullets */
    ul                      {list-style-type:none}
    </style>
    
    <ul>
      <li>Bla bla blaa</li>
    </ul>
    
    <!-- The list item and spacing have been formatted in the style tag -->
    Or simply, use the padding method :

    HTML Code:
    <!-- Great if you're using a table for your layout -->
    <style type="text/css">
    td.space              {padding-left:10px}
    </style>
    
    <table>
    <tr>
      <td>About Us</td>
      <td class="space">bla bla blaa</td>
    </tr>
    </table>
    Or just leave some space using the entity &nbsp;.. (NOT REALLY GOOD THOUGH)
    Last edited by MaNiC MoE ; 07-10-2007 at 12:57 AM. Reason: Fixed some mistakes and removed extra uneeded tags!

  9. #9
    Join Date
    Apr 2006
    Posts
    233
    Great - helpful, thanks much

    KB

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