Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Member
    Join Date
    Jan 2005
    Posts
    96
    Member #
    8693
    Hello, I finally woke up and realized that spacer.gif is outdated so I'm making the necessary changes. I'm also going to stay away from &nsbp; as well.

    I started by going to a professional website and saw this tag: <div class="spacer1px"></div>
    And the CSS goes like this:

    div.spacer { CLEAR: both; }
    div.spacer1px { CLEAR: both; FONT-SIZE: 1px; LINE-HEIGHT: 1px; HEIGHT: 1px; }

    So I made my own and it works well for vertical spacing.
    div.spacer200px { CLEAR: both; FONT-SIZE: 1px; LINE-HEIGHT: 1px; HEIGHT: 200px; }

    But then I tried to see if I could change the HEIGHT to WIDTH, but that failed. Here are my results:
    http://www.coloredink.org/constructi...s/problem.html

    Thanks for all your help!

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    padding
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Junior Member
    Join Date
    Apr 2006
    Posts
    2
    Member #
    12985
    DIV's produce a line break after each one, use nested div's or just attach a padding to the item you are trying to seperate. Depending upon the spacing required, the padding can be either... padding-top,padding-bottom,padding-right,padding-left and can be of the following format in whatever of the above terms you require.
    #spacer {padding-top:20px;}
    and called from the body html with..
    <div id="spacer">text 20 px down</div>

  5. #4
    Member
    Join Date
    Jan 2005
    Posts
    96
    Member #
    8693
    Hi Latonia, I tried your padding example and it still moved the text down instead of moving it to the right of left. Here is what I have:


    CSS
    #spacer {padding-right: 2px; padding-top: 0px; padding-bottom: 0px; padding-left: 0px;
    }
    p.pindnt4{ margin-top: 0; margin-left: 7.6em;
    }
    p.cntnt{ margin-top: 0; margin-left: 4em; }
    }

    BODY
    <p class="cntnt">1983- : <div id="spacer"></div><strong>Title</strong>, Paragraph text, sentences of content, more sentences of content.</p><p class="pindnt4">Another line of text indented.</p>

    Also, will I have any IE or Mozilla browser problems if I used the CSS element "useWhiteSpace"?

  6. #5
    Junior Member
    Join Date
    Apr 2006
    Posts
    2
    Member #
    12985
    Sorry...didnt see the example you had, try using a span instead..
    previous code you had..
    <div id="copyrightinfo" align="left"><a class="bottomtextlink" href="#">Next Month</a><img src="spacer.gif" width="20"><a class="bottomtextlink" href="february.html">Next Month</a></div>

    replace with...
    <div id="copyrightinfo" align="left"><a class="bottomtextlink" href="#">Next Month</a><span style="padding-left:20px;"><a class="bottomtextlink" href="february.html">Next Month</a></span></div>

  7. #6
    Member
    Join Date
    Jan 2005
    Posts
    96
    Member #
    8693
    hey hey, that worked! Thank you very much for your help, Latonia!

  8. #7
    Senior Member
    Join Date
    May 2005
    Location
    Essex, United Kingdom
    Posts
    200
    Member #
    10131
    I know this is picking haird but.... to be honest why the CSS equivalent? If you're using [minicode]<div class="spacer">&nbsp;</div>[/minicode] etc. how is it any better than using a spacer gif?

    Don't get me wrong i'm always promoting web standards, but this example is not any better than a spacer gif. Instead you could implement paddings and margins into your other div's so there would be no need for the spacer div.

  9. #8
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Quote Originally Posted by dchesterton
    I know this is picking haird but.... to be honest why the CSS equivalent? If you're using [minicode]<div class="spacer">&nbsp;</div>[/minicode] etc. how is it any better than using a spacer gif?

    Don't get me wrong i'm always promoting web standards, but this example is not any better than a spacer gif. Instead you could implement paddings and margins into your other div's so there would be no need for the spacer div.
    Hence my first answer

    Quote Originally Posted by karinne
    padding
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  10. #9
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    ok.. here is another way to do that..

    css code..
    Code:
    <style type="text/css">
    #nav
    { 
    background-color:#009900; 
    width:780px;  
    width:100%; 
    height:20px; 
    }
    
    #nav ul 
    { 
    margin:0px; 
    padding:0px;
    }
    
    #nav li 
    { 
    float:left; 
    display:block; 
    }
    
    #nav a 
    {
    text-decoration:none; 
    color:#FFFFFF; 
    }
    
    #button1{width: 100px; padding:0px 10px 0px 0px;  } 
    #button2{width: 100px; }
    </style>

    Code:
    <div id="nav">
    <ul  id="main_ul">
    <li id="main_li"><a href="#" id="button1">Next Month</a></li>
    <li id="main_li"><a href="#"  id="button2">Next Month</a></li>
    </ul>
    </div>


Remove Ads

Posting Permissions

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

Search tags for this page

css replace spacer gif

,

css spacer gif

,

div replace spacer gif

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:16 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com