|
|
This layout uses a CSS fixed positioned div element for the footer address-div at the bottom layered above everything else. All other elements are positioned absolute - this includes the small page-header, the picture-change container on the left, the CSS menu and the text-container. The text elements (content-h2, text7a, text7b) within the text-container just sit in there with normal CSS mark-up.
The scroller column on the right is wrapped by the element divScrollTextWrap which is absolute positioned containing all other scroll elements which in turn are also absolute positioned within. The element divScrollTextWrap is positioned using the top, right and bottom parameters, so when the page is resized it moves along with the window size of the browser.
The divScrollTextCont text container is set to overflow:hidden, therefore showing no default vertical scroll bar. This can be set to auto so that when JavaScript is turned off, the user can still scroll and read the content.
The absolute positioned menu is made up of div, ul and li elements formatted with CSS. It is Pure CSS and runs WITHOUT JavaScript. Picture changing and resizing has been left out. Because of the Pure CSS Menu a lot of JavaScript has been left out, thus reducing file size and response times considerably, resulting in a better fade.
This Scroller:
CSSPIXELS.COM - This is a scroller window that utilises CSS and JavaScript. It can contain as many paragraphs as are required and even images can be included. The scrolling modes can be adjusted to different speed levels and the whole thing can be placed anywhere on a page. Live Feeds can be included as well (usage as a News-Ticker).
The Text Fade:
CSSPIXELS.COM - Text Fading works by accessing the DOM using JavaScript. Each text block item which needs to be faded has to be referenced by its own ID. This allows choosing individually what to fade and what not. Fading was not applied to the scroller here, but only to the body text, its heading and the small page header.
 |
