SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Replacing <br /> with CSS

    Sitepoint Members,
    I use a lot of <br />s in my xhtml. Using CSS to remove a lone <br /> seems like a waste, but I do have blocks of 6 ot 7 <br />s. What's a simple way to use CSS to replace multiple <br />s.

    Thanks,

    Chris

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds more like a structural question. Why are you using the <br /> to begin with? Could you use a new <p> tag for example, and then use css to adjust the line height?

    Can you post an example for us?

    tip use http://pastebin.com/
    Get a little bit extra out of life with www.stakemyrep.com
    and stay motivated the easy way!

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Location
    Atlanta
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would wrap <p> tags around your content and set line height and margins for the <p> tag in CSS accordingly. If it's only one page, fine, use the br's, but if it's site-wide, the CSS for the p tag will save you a lot of time if you decide you want to tweak your layout in the future.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The only good time to use <br> is when you have something like a line of poetry or an address that you want to break into lines. We really need to see what kind of layout you are trying to achieve (along with the code) to advise on this. As others have said, you won't need breaks is you mark up content appropriately, such as with <p>, <div> <li> tags etc.

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    263 Post(s)
    Tagged
    5 Thread(s)
    It sounds to me as if you're using <br /> to create space between page elements, in which case you should be replacing it with padding/margins on the elements in question.

  6. #6
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    My website's structure is 3 columns. At the top of inside the outside columns I have 6 or 7 <br />s when I don't have an image to display. I really want a chunk or spacer I can just dump in there when I need to. I really can't customize each page for verticle spacing because below the spacing is a vericle list of links. I can't work with the code at the top of the list because the code for the verticle list is set for all pages and there's some variation from page to page.

    Thanks,

    Chris

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    263 Post(s)
    Tagged
    5 Thread(s)
    Without seeing the site in question, it's difficult to know what to suggest. If the space is a standard size that occurs on some pages, and on others is filled with an image, you could make a place-holder image of the correct size filled only with the background colour of the page. That would just look like empty space, but could easily be replaced with an actual image as necessary. (Remember to use alt="")

    There may well be better solutions, but we really need to see an example to advise you better.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Chris77 View Post
    My website's structure is 3 columns. At the top of inside the outside columns I have 6 or 7 <br />s when I don't have an image to display. I really want a chunk or spacer I can just dump in there when I need to. I really can't customize each page for verticle spacing because below the spacing is a vericle list of links. I can't work with the code at the top of the list because the code for the verticle list is set for all pages and there's some variation from page to page.
    I don't follow the logic there You can't customise each page yet you are willing to go and insert half a dozen breaks on each page when an image isn't present? Why not just add a an extra class to the column on pages without images and set extra top padding equal to the image's height.

    As others have mentioned breaks are structural html elements and not to be used for making space - that's CSS's job. Breaks are used for line breaks such as between addresses, poems, song lyrics, form elements. They are not to be used for making space of for paragraphs. Also finding consistency with formatting breaks is not that easy so you can't easily create an exact height and indeed breaks are ignored if they start or end in a parent tag.

    However, as others have said it would be helpful to see exactly what you have got in order to give more specific advice.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    If you always want a space for an image whether there's an image present or not, you could always just place a div there with width and height set. When you want an image there, you just place it in the div, but when you don't need it, the space will still be there.

  10. #10
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ralph,
    I don't think that will work because the image height changes from page to page. So if I have no image, I use a lot of BRs and if I have a short image I use fewer BRs, and if I have a tall image I use even fewer BRs.

    Chris

  11. #11
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If it's a design choice for the list to appear at the same vertical position on every page then it's an inevitable decision for the height of the images to be no greater than the required space available above the list. Then, as Ralph suggests, put a fixed height div set to the maximum image height above the list for the images to go in. Or else Paul's suggestion for top padding on the column with the addition of the images being positioned absolutely at the top.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Chris77 View Post
    if I have no image, I use a lot of BRs and if I have a short image I use fewer BRs, and if I have a tall image I use even fewer BRs.
    In that case, don't set a height on the div but instead a min-height. So if there's no image there, the div will sit at a min-height you decide on, but if there's a short image there, the div will still sit at that min height, but it will be able to expand if there's an image taller than the min-height.

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I think Ralph is on to something with the use of min-height or even height on a container... though if that's at the top of a content area it sounds more like something to just piss off visitors by wasting space.

    Overall it sounds like your choice of HTML tags is disastrously flawed; but as has been said SEVERAL times in this thread, you don't show us an example page, ANYTHING we tell you is guessing wildly.

  14. #14
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul O',
    Thanks for the code:
    --------

    "<div class="top"> <!-- image would go here when needed --></div>


    .top{
    min-height:250px;
    margin:0 0 10px;
    }

    That will even cater for images that are bigger than 250px tall just in case."

    It works great. Would I put an &nbsp; in place of an image when there's no image?


    Thanks,

    Chris

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Paul O',
    Thanks for the code:
    --------

    "<div class="top"> <!-- image would go here when needed --></div>


    .top{
    min-height:250px;
    margin:0 0 10px;
    }

    That will even cater for images that are bigger than 250px tall just in case."

    It works great. Would I put an * in place of an image when there's no image?


    Thanks,

    Chris
    Modern browsers will be ok with the empty div so there's no need for &nbsp;.


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
  •