SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS alternate to <br />

    Is there is a CSS alternate to using the <br>/<br /> tag for simple line breaks?

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    frankie<br />
    hots<br />
    America<br/>

    <br/>
    <br/>
    <br/>
    <br/>
    frankie<br />
    hots<br />
    America<br/>

    p{padding:50px 5px 0 5px;}
    <p>
    frankie<br />
    hots<br />
    America<br/>
    </p>

  3. #3
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    Since an element's margins determine where it lies next to other
    block-level elem's, then the top & bottom margins would help
    with vertical spacing.

    If you just need to 'shape', let's say a paragraph within its container
    [a div] it also helps to set its width to about 90% - or less if you
    need a thinner one. This would change where line breaks occur...

    Good luck,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  4. #4
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    frankie<br />
    hots<br />
    America<br/>

    <br/>
    <br/>
    <br/>
    <br/>
    frankie<br />
    hots<br />
    America<br/>

    p{padding:50px 5px 0 5px;}
    <p>
    frankie<br />
    hots<br />
    America<br/>
    </p>
    I realize you can do that, but that's not what I meant. I should have been clearer, sorry.

    I was stacking a bunch of images one on top of another and some of the smaller ones (less width) were winding up on the same line together. I was using <br /> tags to make sure there was one image per line and I figured there had to be a better way.

  5. #5
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by frankiehots
    I realize you can do that, but that's not what I meant. I should have been clearer, sorry.

    I was stacking a bunch of images one on top of another and some of the smaller ones (less width) were winding up on the same line together. I was using <br /> tags to make sure there was one image per line and I figured there had to be a better way.
    in this case, maybe assigning a display:block to your images would help. Best if you put them in a div container, if they aren't already and then:

    Code:
    div#images img {
        display: block;
    }
    Dan G
    Marketing Strategist & Consultant

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2004
    Location
    Minneapolis, MN
    Posts
    1,924
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <l>frankie</l>
    <l>hots</l>
    <l>America</l>

    That will be the solution one day, hopefully.

  7. #7
    SitePoint Addict frankiehots's Avatar
    Join Date
    Jan 2002
    Location
    U.S.A. *Blue State*
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk
    in this case, maybe assigning a display:block to your images would help. Best if you put them in a div container
    That's works and is probably the best solution for now - thanks.

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by charmedlover
    <l>frankie</l>
    <l>hots</l>
    <l>America</l>

    That will be the solution one day, hopefully.
    An <L> element was proposed in 1993 (in HTML+) but didn't survive because <BR> already existed. Why do you think <L> "will be the solution"? Solution to what? How is using <L> here better than <BR>? The line breaks were only there for presentational purposes and thus they should be in the stylesheet, not in the markup.
    Simon Pieters

  9. #9
    SitePoint Addict Ronny's Avatar
    Join Date
    Sep 2003
    Location
    Israel
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    semantically-speaking, most of the time you'll be better off using <p>+CSS margins instead of <br />. Once in a while, if it's not really a paragraph and there isn't any elegenat CSS solution it's OK to use <br />.
    Check out my new vcard at RonnyO.com
    BlinkIP.com - The fastest way to your IP

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ronny
    semantically-speaking, most of the time you'll be better off using <p>+CSS margins instead of <br />. Once in a while, if it's not really a paragraph and there isn't any elegenat CSS solution it's OK to use <br />.
    You seem to be missing the point. If a line break is part of the content, you should use <br>. If it isn't, you shouldn't. It isn't a question about "whether CSS can do it or not".

    Examples where line breaks are part of the content are addresses, poems, and code snippets.
    Simon Pieters

  11. #11
    SitePoint Addict Ronny's Avatar
    Join Date
    Sep 2003
    Location
    Israel
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great examples Simon! Didn't think about these kinds of things. Thanks :-)
    Check out my new vcard at RonnyO.com
    BlinkIP.com - The fastest way to your IP


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
  •