Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Clear Float Image

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You have things like
    Code:
    <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
    Code:
    div.views-row-odd, div.views-row-even{
    clear:left;
    }
    into your CSS file
    Last edited by abduraooft; 09-30-2011 at 01:12 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/ques...-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.

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    Code:
    <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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •