2 Questions: Vertical stripe on page? Extended underline?

Discussion in 'Web Design and Development' started by Doju, Oct 20, 2011.

  1. Doju, Oct 20, 2011
    Last edited: Oct 20, 2011

    Doju macrumors 68000

    Jun 16, 2008
    For a design aesthetic, I'd like to add a thin vertical strip that stretches from the top of one div to the bottom. Is there CSS to do this, or how would I best go about achieving this?

    Also, for headers, how would I go about achieving an underline that extends almost the full length of the div? So, it would look something like:

    Just for aesthetic purposes.

  2. Shakko macrumors member

    Apr 14, 2008
    For the horizontal border below a heading, thats really simple. You just need to add a border-bottom to the heading tag, and it should take up the full width of the container div. For a vertical border, things get more tricky. The best way would be to add a background image if you want it to extend from the top of the page all the way to the bottom.. or you can use a side border, but that will only extend to the content of its container.
  3. Doju thread starter macrumors 68000

    Jun 16, 2008
    I find when I do that for the header tag, it places it too far below the word. How would I bring it up further?
  4. jsm4182 macrumors 6502

    Apr 3, 2006
    Beacon, NY
    The space between the heading and the border-bottom is controlled with padding-bottom. If your padding-bottom is set to 0 thats as close as it can be.
  5. IgnatiusTheKing macrumors 68040


    Nov 17, 2007
    das Fort
    You can also adjust the "line-height" of the header if "padding-bottom: 0" doesn't make it close enough.

Share This Page