|
|
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 flyout 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 uses Javascript to fly out. The menu can be replaced with a pure CSS menu or the CSS formatting expanded to utilise the hover states. However, the current menu in use has a special feature added where on hovering the submenus the picture on the left changes or resizes. Both, the menu and the picture-change container can be placed individually anywhere without loosing the interactivity between the two.
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.
 |
