...

View Full Version : Clear Float Image



kompressaur
09-30-2011, 12:38 PM
Hello ive been struggling with a problem for 3 or 4 years, yess that long. Its only now that im starting to address them. Ive been too busy learning drupal to have the time for css. I hope someone can help me as the drupal community doesnt seem to want to know.

My website page here-
http://onlinebanter.com/

As you can see on the Popular Today block the images are all 'higilty pigilty'. I have them flated left. I think i need to add some kind of clear thingy but ive got no idea what to add or where. Could anyone advise me of what sort of css i should be using and maybe i can work out the drupal way of things?

Thanks

abduraooft
09-30-2011, 02:08 PM
You have things like
<span class="field-content"><div class="picleft"><div class="picture">
<a title="View user profile." href="/members/trickrick"><img width="30" height="30" class="imagecache imagecache-taximage" title="View user profile." alt="trickrick's picture" src="http://onlinebanter.com/sites/default/files/imagecache/taximage/pictures/picture-136.jpg"></a></div>
</div></span> in your markup, which makes you markup invalid. You can't nest a block level element like <div> inside an inline element like <span>

Any chance to get it fixed first?

Anyway, try adding
div.views-row-odd, div.views-row-even{
clear:left;
} into your CSS file

kompressaur
09-30-2011, 06:39 PM
Ah thanks for the reply abduraooft. My CSS issues are starting to affect my family life. It's all i do and think of. My family and friends dont understand that i need to sort these things. I can't let it go. Ive sat alone for 4 years now. I need to end all this.

That div class "picleft" was added by me abduraooft. I added the div to the image to float it left. Would there be another way of doing this?

.picleft {
float:left;
padding:7px 6px 1px 0px;
}

The span is created by Drupal Views module. Views adds a load of divs i believe. I dont know enough yet about classes and stuff to look into it more. My plan was just to try and get things looking 'ok', then finishing off the drupal things on my site, open it, and then spend the rest of my life tinkering with css, html and php.

I added the css you suggested and cleared my cache but still no change. It could possibly be a drupal thing. Yet again ive told all my family not to bother me for 2 days as im gonna sit and try and get a grasp of it. I will make a referance to this thread from a drupal thread here-
http://drupal.stackexchange.com/questions/12306/views-field-theming

I will keep at it and all help would be appreciated. You can see me crying on the css threads on my site. I know once it all sinks in it will be a big ah hah moment.

kompressaur
09-30-2011, 10:00 PM
I dunno why it never worked the first time abduraooft but your suggestion seems to be working now thanks. I'll learn how to make it prettier etc. Line heights for text confuse me a bit. Also ill look at centering the text etc. as mentioned though ive got the rest of my life for that. I hope you all dont mind me popping in when ive been pulling whats left of my hair out.

Thanks

abduraooft
10-01-2011, 10:05 AM
That div class "picleft" was added by me abduraooft. I added the div to the image to float it left. Would there be another way of doing this?

.picleft {
float:left;
padding:7px 6px 1px 0px;
}

Try

<span class="field-content">
<a class="picture" title="View user profile." href="/members/trickrick"><img width="30" height="30" class="imagecache imagecache-taximage" title="View user profile." alt="trickrick's picture" src="http://onlinebanter.com/sites/default/files/imagecache/taximage/pictures/picture-136.jpg"></a></span>

Have you heard about divits (http://csscreator.com/divitis)?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum