Luxurious article content formatting

I made a pic of what I’m after... see center div. (http://coppershade.org/Gutter1.jpg)

I’d like to have text flow around pictures that partially overlap or are completely outside the text paragraph, like in DTP software. To spice up the article, add a "faery-tale" Capital at the start of the text or have a screenshot mini with short explanatory text under it.

Indent puts space around the text, which is good, but adding a pic never allows me to move it outside the indents.

As you can see, I also want it scrollable with a nice looking(!) scrollbar. That can be in a separate div, if necessary.

But I’d like to edit the whole article and add pictures in one editor. Especially the short texts under the pictures, if I wouldn’t have to Photoshop that, that would be fantastafabulous!

Any thoughts?

Hi

check here for understand better than my lovly english http://www.mandarindesign.com/dropcaps2.html

For wrapping text around images you can use this example
<img src="pat to your image/image.png" alt="bla" align="left"/>this will put image at left so you can use it as align="right"

Google is your friend:

http://www.hesido.com/web.php?page=customscrollbar
http://www.mandarindesign.com/troops.html
http://css.maxdesign.com.au/floatutorial/tutorial0106.htm

A List Apart also has a number a very helpful articles about images partially outside text and wrapped.

Here’s one I bookmarked: Cross-Column Pull-Outs

Hehe, thanks! Cool... didn’t think it was possible Now I have something to play with tomorrow... ’night (and I must say these were very helpful responses to a first-ever poster... many forums are not like that;))

welcome to ModX

regarding the image outside the box, the key for this is negative margins in css.

for example... float: right; margin-right: -30px; will align the image to the right and allow the text to wrap around and the negative margin will let it overlap 30 pixels outside the right margins.

The fairy-tale first letter can also be achieved with css, you will need to prepare an alphabet (or at least the most common letters) to avoid opening photoshop during the update.

CSS is the key.

Quote from: Henrik at Jun 13, 2007, 01:43 PM

I made a pic of what I’m after... see center div. (http://coppershade.org/Gutter1.jpg)

If that picture is from a web site (or you can find a web site that looks like what you want), you can select "view source" in your browser to see how it was done. Also, while viewing the source, you can usually spot the reference to the .css file near the beginning of the page and paste its url into your browser to get a look at the actual .css that the page is formatted under.

There are some beautiful, pure .css, table-less designs at http://www.csszengarden.com/ and I think both the .html source and .css are available for all of them.

Bob

If that picture is from a web site (or you can find a web site that looks like what you want), you can select "view source" in your browser to see how it was done. Also, while viewing the source, you can usually spot the reference to the .css file near the beginning of the page and paste its url into your browser to get a look at the actual .css that the page is formatted under.



A great tool to see what other designers are doing is the "Web Developer" toolbar for Firefox. With one click you can see the css. it even gives you the ability to change the css in your browser window and see the results. Here is the link: http://chrispederick.com/work/web-developer/