Sunspot: Slideshow overlapping static image.
-
Hello. I want to put a static image at the top of some pages with explanatory text then the slide-show beneath. When I add the text, the slide-show overlaps the static image.
I tried not adding a space, adding
, and entering shift + enter with no change to the overlapping. Is this a CSS issue?
No overlap (no text yet added)
http://baskcabinetry.com/welcome-2/polished-projects/commercial-lobby-manhattan/
http://baskcabinetry.com/welcome-2/fine-fenestration/entry-doors-manhattan/Overlapped (text already added):
http://baskcabinetry.wordpress.com/wp-admin/post.php?post=218&action=edit
http://baskcabinetry.com/welcome-2/polished-projects/residence-westchester-county-new-york/
http://baskcabinetry.com/welcome-2/polished-projects/residence-manhattan/Thank you for your time.
The blog I need help with is: (visible only to logged in users)
-
The blank space above in the second paragraph was comprised of two HTML break spaces bracketed by less than/more than symbols. I added extra spaces, but it still didn’t appear up in the message. Sorry.
-
Here’s a page where there’s text AND good spacing, but I can’t figure out the difference: http://baskcabinetry.com/welcome-2/first-rate-furniture/cabinetry/
-
a) The br tag is used to force a line break, not to create blank lines or extra space.
b) Differences: in the no-text examples, the alignment of the images is set to none; in the rest it’s set to left; in the last example you’ve tried to correct the problem by entering a bunch of paragraph breaks.
c) The problem is caused by the wrap-around effect of left aligned images. You cancel this effect by inserting this code at the desired point (in your case, between the text and the slideshow shortcode):
<div style="clear:both;"></div>PS To display code here, you enclose it in backtics (see the note on allowed markup).
-
Muy perfecto, justpi (I love pi[e]!)
I looked up DIV and it stands for “division”, so that makes sense.
All the best chocolate, J
-
You’re welcome!
“Div” defines a division, i.e. section, but a div tag pair by itself would have no effect. The crucial part of the code I suggested is the “clear:both” command. This means clear both (= left & right) floats, that is, stop the wrap-around effect of left- and right-aligned elements. -
-
If you care for more illumination, you could start with this article of mine:
- The topic ‘Sunspot: Slideshow overlapping static image.’ is closed to new replies.