2 Questions: Vertical stripe on page? Extended underline?

[Doju]

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:

Header______________________________________________________________________________________
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Just for aesthetic purposes.

Thanks.

 

[Shakko]

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.

 

[Doju]

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.

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?

 

[jsm4182]

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?

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.

 

[IgnatiusTheKing]

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.

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