Forums

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

Home Forums CSS hr on height

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #45867
    nuodas159
    Participant

    https://css-tricks.com/simple-styles-for-horizontal-rules/

    It’s possible to do on height?
    smth like that?:

    hr {
    display: block;
    border: 0;
    background-image: -webkit-linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    width: 1px;
    height: auto;
    }

    #140685
    Paulie_D
    Member

    Why would you want a horizontal rule that is only 1px wide?

    I assume that you mean height as in the post title: http://codepen.io/Paulie-D/pen/uxbKh

    #140686
    nuodas159
    Participant

    Hmm, then how make vertical(1px width; height: 100%)?

    #140688
    Paulie_D
    Member

    Yes…what are you intending to do this this?

    #140691
    Paulie_D
    Member

    I would also point out that a 1px wide element won’t show a side to side (ltr or rtl) gradient.

    Finally, I checked by updating my Codepen (http://codepen.io/Paulie-D/pen/uxbKh) and height:auto or 100% doesn’t seem to work but that may be for another reason.

    #140718
    nuodas159
    Participant

    smth like that.

    http://codepen.io/anon/pen/DJets

    I want to do hr height: auto. I mean if Block(wrapper) height is 300px then hr is 300px , If block(wrapper) height is 500px then hr is 500px and etc..

    #140720
    Paulie_D
    Member

    To be honest that’s not what the `


    ` is for.

    **hr** stands for horizontal rule.

    The intention is that it separate two pieces of horizontal content **in the same element** and that isn’t how you are trying to use it.

    I’m not saying what you are trying to do is impossible but the height of the `


    ` cannot be automatic (AFAIK)…you would need (I think) JS to determine the height of the wrapper and use that as a basis of the `


    `.

    I’m wondering if CSS-columns might not be a better option (as that has a ‘rule’ feature) but that will depend on the content you are actually proposing to use.

    http://codepen.io/Paulie-D/pen/jqxkn

    #140724
    nuodas159
    Participant

    Thanks for helping. I found a way how to do it :) (with css)

    #140726
    Paulie_D
    Member

    >I found a way how to do it :) (with css)

    Could you show us?

    #140730
    nuodas159
    Participant

    http://codepen.io/anon/pen/cDKae

    Now I’am thinking how better optimize this code.

    P.S. I will use this code in forum ;D

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.