INN - LSCIDump

[OmerMor]

Phil,
try to use more pronounced outline to the text that's positioned on top of pictures to make it more readable.
In your CSS, add the following line:

Code: [Select]

text-shadow: -1px -1px 5px #000, 1px -1px 5px #000, -1px 1px 5px #000, 1px 1px 5px #000, -1px -0px 5px #000, 1px -0px 5px #000, 0px 1px 5px #000, 0px -1px 5px #000;
To these elements:

• .home-slider-block-inner
• .xcel-setting-header-type-dark-light .site-branding

The .site-branding element could also benefit from some light transparent background like this:

Code: [Select]

background-color: rgba(0, 255, 255, 0.25);

[troflip]

Yeah, I was going to darken the background of the text-on-the-pictures to make it more readable. It's not in a finished state at all. Ideally I'd like a dark somewhat transparent bar across the full width.

troflip, did you try float right

Code: [Select]

img  {
    float: right;
}

What for? It's been a while since I've done a lot of css and stuff, but my understanding was that that was for wrapping text around images. There's no text in this case, just an image. Anyway, problem is already solved.

[MusicallyInspired]

Maybe not, but it's a trick web designers still use to send block elements to the right one after the other instead of on top of the other. It's commonly used in navigation bars, actually.

[Collector]

What for? It's been a while since I've done a lot of css and stuff, but my understanding was that that was for wrapping text around images. There's no text in this case, just an image. Anyway, problem is already solved.

No, it is for all sorts of elements to move them regardless of other elements. What you are talking about sound like what you can do simply with the  built-in 'img' attribute of 'align'. With float you can even force list items to align horizontally, like the navigation links at the top of this site right above the breadcrumbs. Without the CSS style they would display vertically. It is how I did the 'previous' and 'next' navigation links at the bottom of the SCI specifications and tutorials on the Wiki. They are on the same level with the 'previous' aligned to the left and the 'next' aligned to the right. See this page: http://sciwiki.sierrahelp.com//index.php?title=SCI_Studio_Tutorial_2#Actors

[troflip]

But... I want them centered, not right-aligned.

[troflip]

Anyone know how I can get an image to display next to some text?

What I'm trying to get:

Code: [Select]

Some text that wraps to more lines if      ***********
it needs to.                               *         *
                                           *         *
                                           ***********

**********     Then this time the text is on the right
*        *     side of the image.
*        *
**********

Now the next one                           ***********
                                           *         *
                                           *         *
                                           ***********

**********     And another one.
*        *     
*        *
**********

One problem is that I want the rows separate. They are always merging together even if they are contained in a div.

And even if I have text adjacent to an img, for some reason the first line of text appears the full row width and on top of the image. Subsequent lines float around it. No combination of float: left or float: right seems to work.

[Kawa]

One problem is that I want the rows separate. They are always merging together even if they are contained in a div.

"clear: both" on the divs. It shifts that element to below any floating elements that came before.

[troflip]

Cool that works :-)