Textpattern CMS

#1 2006-08-10 18:53:24

snyvo

Member

Registered: 2006-08-10

Posts: 11

posting image in sidebar

hey everyone

Can anyone offer me a solution for this: I’m using textpattern as CMS for a website, mostly consisting of semi-static pages. Please take a look at one of the static articles:

<a href=“http://www.collectiefdebonair.be/doodshoofd” rel=“nofollow”>http://www.collectiefdebonair.be/doodshoofd</a>

The idea is to post a couple of images with each article – in the yellow bar at the right. I don’t want the image floating in the text area like it is now. The problem is, I don’t know how I can get the images in this yellow sidebar:

• when I use a content div that spans the entire width, the article text flows over the yellow column

• I could create a sidebar div, but the images that are posted in the article editor are always displayed in the content div.

Any ideas?

Thanks in advance!

#2 2006-08-11 01:25:03

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: posting image in sidebar

I’m assuming you’re using the article image to insert the picture. I’m not sure you can display the article image outside the article form itself – someone with more experience needs to answer that one.

when I use a content div that spans the entire width, the article text flows over the yellow column

You could place a second DIV inside the full width container to hold the article text that has a right margin equal to the yellow sidebar plus appropriate spacing. That should keep the article text left. You can then float the image to the right alongside the text.

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#3 2006-08-11 08:56:06

snyvo

Member

Registered: 2006-08-10

Posts: 11

Re: posting image in sidebar

NyteOwl, thanks for your reaction

Creating a second div inside the full width container won’t solve the problem I guess: the article text and article image are always posted inside the same div – so the image will end up in the same div, the one with the right margin that forces the text and the image to float within the white area.

Maybe there’s a way I can solve this with clever CSS? I’ve tried many options but can’t figure this out… any help is still very much appreciated!

#4 2006-08-11 20:45:33

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: posting image in sidebar

Hmmm, ok I took a closer look trry this:

Instead of wrapping the image in P tags, use a SPAN and apply float: right; margin: -25px 10px 0 0; to the SPANned image.

The margins are to pull the image up so the top edge is in line with the middle of the left side header and more or less center it in the sidebar space – purely aesthetics and can be safely removed or altered as desired.

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#5 2006-08-12 17:48:56

snyvo

Member

Registered: 2006-08-10

Posts: 11

Re: posting image in sidebar

NyteOwl thanks again for your help.

This would indeed be a solution, IF it were possible to wrap the image into a span. But apparently, textile doesn’t support this, wrapping an image in % does not translate to a span…

#6 2006-08-12 18:06:29

alicson

Member

Registered: 2004-05-26

Posts: 465

Website

Re: posting image in sidebar

It’s fun to use Textile, but you don’t have to use Textile… you can just use the HTML tags around the Textile, or use straight HTML for this instance.

---

textpattern.org :: find and share Textpattern resources
docs.textpattern.io :: Textpattern user documentation

#7 2006-08-12 22:25:56

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: posting image in sidebar

I am one of a minority in all likelyhood, that have Textile disabled and use straight html. I found it easier in the long run, especially since when I’m testing a new layout I do it locally in static x/html and move it over when I have it the way I want.

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;