I need for some of my thumbnails to be the last element on its horizontal column (not sure of my word choice here), so that the following element will be placed beneath it on the page. Until now I’ve been lazy and just added <br/>s inline as needed, but I now need to get legit.
I’ve tried several things such as adding “\a” with the ::after selector, but this has the same result as an inline <br/> - a new line after the top of the image. Which means I need to add enough to clear the image, and this varies image to image and from viewport size to viewport size. I need a carriage return from the bottom of the image.
If I’m not clear please let me know. Thanks for your help
<p>
Brad's son, Adam, has a birthday coming up, so Brad thought getting Adam's djembe repaired would be a great surprise to spring on him!
Brad and Adam are both musicians. He snuck the djembe out of Adam's house and shipped it to Dr. Tom.
</p>
<br/>
<a href = "Images/adams-djembe-before.jpg" target = "_blank">
<img src = "Images/adams-djembe-before-thumb.jpg" height = "150"
alt = "Djembe hand drum from Mali, Africa needing a skin." hspace = "5" class = "leadingPlate"/>
</a>
<a href = "Images/adams-djembe-before3.jpg" target = "_blank">
<img src = "Images/adams-djembe-before3-thumb.jpg" height = "150"
alt = "Djembe from Mali, Africa with a torn drum head." hspace = "5" class = "leadingPlate"/>
</a>
<a href = "Images/adams-djembe-before5.jpg" target = "_blank">
<img src = "Images/adams-djembe-before5-thumb.jpg" height = "150"
alt = "African djembe from Mali with a ripped drum head." hspace = "5" class = "leadingPlate"/>
</a>
<a href = "Images/adams-djembe-before8.jpg" target = "_blank">
<img src = "Images/adams-djembe-before8-thumb.jpg" height = "150"
alt = "Djembe from Mali, Africa with a ripped drum head." hspace = "5" class = "leadingPlate"/>
</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>
We immediately recognized the drum. The wood, rope and workmanship all served as signatures for Kangaba Percussion of Mali, Africa. We've
repaired quite a few of these djembes, so we had a good idea of what to expect.
</p>`indent preformatted text by 4 spaces`
As you can see, I’ve used several line breaks to get the text following the series of thumbnails to not get crowded into the bit of space to the right of them. I’ve thought of using margins, but as I’ve mentioned, thumbnails vary in size as do viewports.
The hspace attribute specifies the whitespace on left and right side of an image. I currently have this set to 5px, so maybe I can adjust this. Or not. Just popped into my head. I’ll have to research.
Some suggestions: re
*move the BRs!
it could be argued that your thumbnail is a LIST, in which case you could float the LIs, and give the UL overflow:hidden; to clear the floats ( as Ryan suggested). At the very least you could wrap a DIV around the ancho and style that with overflow:hidden;
IF for whatever reason you loath the idea of a semantic wrapper around your image, you could use adjacent selectors to clear the paragraph AFTER a link ( assuming you have removed the BRs). a+p{ clear: both; }
So I tried the Clearfix Method, and it helped a lot, except with Epiphany, which doesn’t seem to recognize it at all. Clearing the floats is probably part of the solution.
I’m afraid I don’t have Epiphany. What does clearfix do for it? Any change? screenshots + updated code would be nice.
To be honest, I haven’t even heard f Epiphany…ever…until just now. The market share must be extremely small. No browser stats I’ve ever seen has it listed.
Epihany is based on webkit I believe and should have no trouble with the clearfix solutions. As Ryan said if you have an example of where it doesn’t work we could have a look at the problem.
I wouldn’t float those rows of thumbnails anyway and would rather use display:inline-block and avoid float clearing issues altogether. As long as the following text content starts in a p tag then it will start on the next line naturally and without the need for any breaks. You can always apply a margin to the image if you want space around it vertically (or indeed horizontally).
The reason you are using loads of breaks at the moment is because floated content is removed from the flow (unless you contain it or clear it) and the breaks slide up under the float until they meet the content above the floated images.
Breaks are not meant to make space in a layout anyway but as logical line breaks in prose such as addresses, poetry or separating form elements; there are very few other valid uses for them. Instead it is best to use a semantic html structure which will be p elements for paragraphs and the appropriate heading tags for headings etc. You can then create your space with margin and paddings as required. Deprecated presentational attributes (such as hspace) should not be used these days as they just complicate the issue.
Browsers are allowed to ignore breaks that follow some block elements and historically IE would not render double breaks, so purely from a logical stance it makes sense to use something that will be more consistent such as margin or padding.
Using semantic html will 9 times out of ten give you the result that you were after in the first place and not just because the semantic police say use it
It took me two days to figure out why some thumbnails would scale way down even on my large screen and the block would only take up a portion of the column. I knew it had something to do with the parent. Finally, I figured out to set the width of the div I was wrapping my blocks in to 100%. It now occurs to me I could use this to my advantage in terms of formatting and who knows what else.
Had I known what I was doing to begin with, this would have been an easy fix. I’m stuck right now on one detail: the top border of the footer on the tabla page has scooted over for some reason. Haven’t been able to find the typo or ommision or whatever that’s causing this even after running the html through a validator.
If there was a doh! emoticon handy I’d . . . beat my head with it. Thanks.
And thanks to everyone. I seriously considered every suggestion and actually tried several. They would probably all work with the proper modifications, and I’m sure they all have their place. What I finally settled on is probably the most straight forward and least likely to have support issues.
. Or a website will do.
