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
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/
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.
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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 .