Nov 17, 2007

vertical block in HTML and CSS

I met a task: to create a vertical image (line of repetitive images) starting under a header of a page and ending at the bottom.
If the window size of the browser changes the line should still hit the end of the page and no vertical rollers should appear.

After spending a day I found a solution. Take a look at the vertical bar to the left:


<div id="vertical"><div></div></div>


height: 100%;
position: absolute;
top: 0px;
height: 100%;
width: 56px;
overflow: hidden;
div#vertical div{
background-image: url('/images/vertical_bg.gif');
background-repeat: repeat-y;
margin-top: 212px;
height: 100%;

Here I use two DIVs, one in another.
The first has a full-page height.
Inner DIV has a background image and shifted relatively to the parent one with a "margin-top" style parameter.
"overflow: hidden" parameter of the outer DIV cuts the outstanding edges of the inner DIV and the browser does not have a vertical scrolling.
This way it always fits the page heights and does not cover the header.

The outer DIV has an "absolute" positioning.
Of course, I should remember to reserve the space to the left for all elements on the page with a "margin-left" or a "left" CSS parameter.

1 comment:

3hdx271rym said...

Bets on collegiate video games can solely be placed in person, not on-line. Betting on in-state collegiate sport outcomes is allowed, however player prop bets are prohibited. The ruling appeared to legitimize sports betting in a single day — turning a vice long the purview of barroom bookies and offshore gaming websites into model new} government income stream and a pillar of sports in the U.S. The NFL, NBA, MLB and other skilled leagues that sued Christie over New Jersey’s efforts to legalize second are|are actually} embracing the trade, even partnering with playing companies. Sports wagering superior with inexorable momentum after the Supreme Court in 2018 struck down a dafabet federal legislation that had limited such playing to Nevada.