By mallet on

Hi all

I am having some real problems aligning images to the right of the text. Problem with drupal 6 is, I can only seem to stack my title, the description body and the imagecache field one on top of the other. But I cant get the imagecache field to be moved to the right of the text. I tried experimenting views options: style, row style but no joy. Would it be something to do with text wrapping maybe?
A good example on how I want to do this is, second to the left column of this website: http://www.pistonheads.com

I did however notice that on the imagecache views field, theres a "Rewrite the output of this field" not sure if theres anything I can put in there?

I am a complete newbie on this so any help will be greatly appreciated.

-Mallet

Comments

Oleksa-1’s picture

Oleksa-1 commented

In your css
add
img {float:right;}

mallet’s picture

mallet commented

Thanks for the reply. Which css file do I edit? As I have four css files within aquanaut theme. Is it the style css file?

EDIT:
sorry, I think it is the style css file but there is too much going on in the css file. where do I put the float code exactly?

JasperHorn’s picture

JasperHorn commented

just about anywhere (just as long as it is not wiutin brackets of something else.

There might be differences depending on location, though - which may actually make it harder to put it in the right place. Basically, the file is read from top to bottom and if something contradicts something said earlier, it will "overwrite" the earlier statement*.
The tricky thing is that you don't want to overwrite any placement of images on the page other than the one you are trying to move, while you do want to overwrite the placement of the image which you are trying to move.
However, if other images do not have a value set for float (which is likely), no matter where you put this text, this will severely screw up your layout. So blindly adding that code does not sound like a solution to me. I would suggest doing something with classes, but I do not know how they will stand the html filter, so I can't give you any advice on that.

*note: say make all text red and then make all text with the identifier "blue" blue, this will overwrite the text color only for the blue text, the rest of the text will still be red as overwriting is different from canceling out.

Oleksa-1’s picture

Oleksa-1 commented

You absolutly right. I think you need to play with classes, something like
.content img {float:right;}
at the end of your style.css

Advice: install firebug+firefox - and you will see all classes in your theme

mallet’s picture

mallet commented

thanks all for the reply. still Having a bit trouble :( you can take look at my test website and see what I am trying to do: www.malletmk2.co.uk

the 3 images on line are broken which I know about. The bottom two images are the ones I am trying to focus. When I use fire bug, I cant seem to cross reference it to the css style file on the aquanaut theme. As when I search for it in the css file, its not there.
The section when I highlight it with fire bug comes up with: td class="col-1"
any help to resolve this?

scotthoff’s picture

scotthoff commented

Are you using firebug?

You should download that for firefox. You can right mouse click over an image and then you "inspect element" it will tell you what file and line of code is formatting that image. You can then open up the file and that line and change it.

scotthoff’s picture

scotthoff commented

Are you using some sort of CSS gzip module? Your CSS file has a long and random name of http://www.malletmk2.co.uk/sites/default/files/css/css_cbed9b78c13b2e953...

In any case, get to that file and add the following line anywhere.

.view-display-id-page .field-content img {
float:right;
}
costarica’s picture

costarica commented

I appreciate any help:

http://drupal.org/node/778786

Thank you!

scotthoff’s picture

scotthoff commented

Did my previous suggestion work? What does this have to do with aligning images?

mallet’s picture

mallet commented

I am indeed using firebug for firefox. I am not using ccs gzip module. Your suggestion worked in regards to finding the css file. Theres quite a few css file in that folder. When I tried using firebug, it points to a css file ending with 792.css on line 142
unfortunately I tried to putting the float tag on both css files ending 792 and 6de and didnt work. I know this was mentioned in a earlier post but does matter putting the floating tag anywhere on the css file matter? my concern is whether or not I should put the float tag just before the text body or after the image itself.
I also notice that if you hover right of the image with fire-bug, its a long horizontal empty space.

scotthoff’s picture

scotthoff commented

Did you make the change on the site linke above? I can look at it for you if that is the case.

mallet’s picture

mallet commented

yes I did. your more then welcome to look at it.

Patroclas’s picture

Patroclas commented

Go to admin/settings/performance and check that 'Optimize css' is disabled. It looks as if you may have this enabled.

mallet’s picture

mallet commented

I tried that. The css file now points to: /sites/default/files/color/aquanaut-ad574ffb/style.css
I have edited that file to include the float right tag and it doesnt work. Have I done something wrong?

scotthoff’s picture

scotthoff commented

Well you are in a much better spot than you were. Editing the CSS with that compression on would be a nightmare.

scotthoff’s picture

scotthoff commented

First of all, is the page you link to above still representative of the site. Can you not link to the actual site??

Adding float on the image might not be enough, you need to be specific. Did you try exactly what I gave you above.

.view-display-id-page .field-content img {
float:right;
}

You might also try adding:

#content .view-display-id-page .field-content img {
float:right;
}

Note that adding #content, makes it more specific.

mallet’s picture

mallet commented

first off, thanks for the help again.
malletmk2.co.uk is still representing that page link. the link should look like this with the css at the end: http://www.malletmk2.co.uk/sites/default/files/color/aquanaut-ad574ffb/s...

I tried the above tags, both separately then I tried to add them both together but still not getting any further :(
Is there anything I should deactivate? or a setting I left out that could be conflicting?

mallet’s picture

mallet commented

anyone out there to help? I am still stuck :(

scotthoff’s picture

scotthoff commented

Try skyping me at fhc-shoff, if you let me get on your computer via webex, I can probably fix this pretty quick.