Help! Need Input

Discussion in 'CSS' started by mikejonesok, Mar 25, 2011.

  1. #1
    Thanks for stopping by. I need help getting the positioning right for the log in or reg... text in the teaser columns on my website. http://tinyurl.com/6kmpls2

    What am I missing? I been messing with this for hours.
     
    Last edited: Mar 25, 2011
    mikejonesok, Mar 25, 2011 IP
  2. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Why the weird li order?

    Do this: first, set the left margin on the ul to 0
    Then, set the li in the right order, with the read more button in the last li tag. And skip tha absolute positioning.
    Then float the li tags left, and set widths on all of them to match upo the full width of the teaser, and make sure the read more buttons right alignment is correct.
    Then ditch the spans in the li tags, if you want any element wrapping the content use divs
    Then set some right margin or padding on the 2 first li tags to separate the social icon and the text and the button for read more.
    Then fiddle with individual padding inside the li tags for top and/or bottom to vertically align the 2 bits so it looks good. That should do it.
     
    style0, Mar 25, 2011 IP
  3. mikejonesok

    mikejonesok Guest

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for pointing me in the right direction. It's still not clean, but it will do for now.
     
    mikejonesok, Mar 25, 2011 IP
  4. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Well, the li tag with the "read more" - button is still the middle one of the 3 - singe you want it to the right, you need to place it last of the 3.
    If you do that, and skip absolute positioning and adjust all with height, width pading and margin it'll work. you can always float the last li tag right if needed.
     
    style0, Mar 26, 2011 IP
  5. mikejonesok

    mikejonesok Guest

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yes, but I really do not know where to look to change that. I am using Drupal and I look in all the theme's php files with no luck.
     
    mikejonesok, Mar 26, 2011 IP
  6. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Aha! Ok, I see, that's another story when you can't edit the actual code...

    in the themes style.css, find this declaration:
    #content .node-front .node-readmore a

    And change value for right to 5px and bottom to 10px

    This will put the round read-more-button neatly in the bottom right corner, I guess it'll have to do if you can't edit the code.
     
    style0, Mar 27, 2011 IP
  7. mikejonesok

    mikejonesok Guest

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I should be able to edit the code, but I just do not know how at the moment. Nevertheless, I do know how to change values in CSS files. So changing the values helped. Thanks again!
     
    mikejonesok, Mar 27, 2011 IP