Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertically align top, rotated text

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #166695
    Colorful Tones
    Participant

    Here is my working sample: http://cdpn.io/HGdcx

    I’m having a hard time figuring out how to align the .entry-meta to be vertically aligned with the .entry-header, and regardless of whether the title has two, three lines of words wrapped.

    Suggestions are much appreciated! Big thanks.

    #166699
    BionicClick
    Participant

    man,

    There are a ton of ways I could assist in this one. however there are a few i am going to suggest to help you.

    1. create an image using php for that meta number and use that along with #2 below
    2. wrap the H1 and the meta info(maybe img) in a surrounding DIV. inside that div float the meta stuff left, float the H1 right with specific widths assigned, do not assign height on the H1 as it will vary.

    problem solved. http://codepen.io/anon/pen/EJAhm/

    using image: http://codepen.io/anon/pen/feoAD/

    #166753
    Colorful Tones
    Participant

    “Vertically aligned how?” from the topic title: “Vertically align top” to the header.

    Your logic definitely makes sense (“time element”, “wouldn’t use an image”).

    Your example does not allow the alignment to the top of header if there are multiple lines in the header, please see my original dilemma and example: “Really long title with lots of words that probably wrap to 2nd line”

    I’m going to go in another direction with this meta information, and appreciate both of your help. Thanks!

    #166756
    BionicClick
    Participant

    guess there are different ways to skin every cat. You can apply the CSS i have to the header element instead of the DIV I wrapped them in.

    As far as an image goes, I was offering a suggestion…Using an image is the last resort if nothing else works.

    As far as using widths to make floats work, he is right. And as far as my meta info falling outside the tag.. yeah… its because I didn’t add all the rotation stuff…

    here is a working example, no floats, no widths (except one on the meta info) , and no wrapping div.
    http://codepen.io/anon/pen/aHkrI/

    You may or may not need some of the left and top positioning after you get it in a live environment… and the width on the header tag is only there so i can display a wrapping header text.

    one last thing, you can also use http://leaverou.github.io/prefixfree/ to not need to add all those prefixed rotations for multiple browsers.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.