Obsah této stránky tvoří opět dva prvky
<div> – první obsahuje menu, druhý vlastní text
stránky. Menu je umístěno do levého horního rohu, a to pevně pomocí definice
#menu {
position: fixed;
top: 0; left: 0;
width: 180px;
}
Díky tomu menu zůstává vlevo nahoře, i když obsah stránky posouváte. Podíváte-li se na náhled tiskového výstupu, najdete menu vlevo nahoře na každé tisknuté stránce.
Zbytek textu je už jen výplň, která zaručí, že stránka bude delší než okno prohlížeče.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget ligula. Etiam sollicitudin neque. Fusce lobortis suscipit libero. In hac habitasse platea dictumst. Nullam nonummy nulla. Sed eget lectus. Quisque quam justo, gravida at, rhoncus at, feugiat imperdiet, ligula. Phasellus ut lacus ut erat interdum lacinia. Curabitur tortor velit, dictum in, bibendum et, viverra et, nulla. Quisque purus sem, placerat eu, laoreet non, gravida ut, nunc. Duis porttitor, sapien eu mollis gravida, ante arcu suscipit dui, et mattis mauris ipsum quis lacus. Phasellus leo sem, pellentesque vitae, viverra et, vehicula vel, massa.
Pellentesque elementum. Quisque eget augue. Pellentesque id lorem ut sapien dictum fermentum. Curabitur nunc mi, vehicula ac, lacinia eget, tempor non, diam. Donec et leo. Aliquam tempor. Nam malesuada pede et pede. In commodo odio auctor dui convallis venenatis. Maecenas nibh massa, fermentum ut, gravida in, tincidunt id, nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi non dolor vel odio viverra aliquet. Sed risus purus, ultrices ut, eleifend nec, tincidunt quis, diam. In mi ligula, aliquet id, pellentesque eu, euismod vel, nunc. Praesent ut quam eu ligula posuere molestie. Morbi consequat felis consectetuer orci. Curabitur a tellus.
Cras non ante. Etiam ac orci. Morbi id arcu. Phasellus congue dolor ac nibh luctus vehicula. Nulla facilisi. Pellentesque eu mauris sit amet augue consectetuer consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ac nunc. Fusce non arcu. Sed aliquam. Nulla non dolor a turpis gravida ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mattis risus sed justo. Fusce ornare. Nam elementum tincidunt mauris. Quisque euismod volutpat ipsum. Mauris viverra commodo felis. Ut a elit et risus lobortis elementum. Aliquam erat volutpat. Praesent porttitor. Vivamus consectetuer neque vel justo. Sed a metus. Vivamus pretium, orci a rutrum fermentum, wisi sapien fringilla dui, eu laoreet quam lacus sed urna. Cras cursus accumsan erat. Maecenas accumsan, nisl sed venenatis elementum, mi leo mollis dui, sed sodales lacus odio a felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pretium. Integer vel est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sed massa venenatis orci dapibus laoreet.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a libero non metus cursus placerat. Cras vel lacus. Maecenas tempor, orci vitae iaculis consectetuer, urna tellus hendrerit magna, at porttitor tellus ligula vitae urna. Etiam diam mi, adipiscing ac, volutpat non, pulvinar at, eros. Pellentesque eu erat eget leo scelerisque consectetuer. Pellentesque nec velit. In vel dui eget lorem malesuada iaculis. Maecenas eget pede. Mauris cursus ultricies nunc. Nam lectus lacus, congue rhoncus, adipiscing accumsan, lobortis gravida, quam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget ligula. Etiam sollicitudin neque. Fusce lobortis suscipit libero. In hac habitasse platea dictumst. Nullam nonummy nulla. Sed eget lectus. Quisque quam justo, gravida at, rhoncus at, feugiat imperdiet, ligula. Phasellus ut lacus ut erat interdum lacinia. Curabitur tortor velit, dictum in, bibendum et, viverra et, nulla. Quisque purus sem, placerat eu, laoreet non, gravida ut, nunc. Duis porttitor, sapien eu mollis gravida, ante arcu suscipit dui, et mattis mauris ipsum quis lacus. Phasellus leo sem, pellentesque vitae, viverra et, vehicula vel, massa.
Pellentesque elementum. Quisque eget augue. Pellentesque id lorem ut sapien dictum fermentum. Curabitur nunc mi, vehicula ac, lacinia eget, tempor non, diam. Donec et leo. Aliquam tempor. Nam malesuada pede et pede. In commodo odio auctor dui convallis venenatis. Maecenas nibh massa, fermentum ut, gravida in, tincidunt id, nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi non dolor vel odio viverra aliquet. Sed risus purus, ultrices ut, eleifend nec, tincidunt quis, diam. In mi ligula, aliquet id, pellentesque eu, euismod vel, nunc. Praesent ut quam eu ligula posuere molestie. Morbi consequat felis consectetuer orci. Curabitur a tellus.
Cras non ante. Etiam ac orci. Morbi id arcu. Phasellus congue dolor ac nibh luctus vehicula. Nulla facilisi. Pellentesque eu mauris sit amet augue consectetuer consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ac nunc. Fusce non arcu. Sed aliquam. Nulla non dolor a turpis gravida ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mattis risus sed justo. Fusce ornare. Nam elementum tincidunt mauris. Quisque euismod volutpat ipsum. Mauris viverra commodo felis. Ut a elit et risus lobortis elementum. Aliquam erat volutpat. Praesent porttitor. Vivamus consectetuer neque vel justo. Sed a metus. Vivamus pretium, orci a rutrum fermentum, wisi sapien fringilla dui, eu laoreet quam lacus sed urna. Cras cursus accumsan erat. Maecenas accumsan, nisl sed venenatis elementum, mi leo mollis dui, sed sodales lacus odio a felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pretium. Integer vel est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sed massa venenatis orci dapibus laoreet.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a libero non metus cursus placerat. Cras vel lacus. Maecenas tempor, orci vitae iaculis consectetuer, urna tellus hendrerit magna, at porttitor tellus ligula vitae urna. Etiam diam mi, adipiscing ac, volutpat non, pulvinar at, eros. Pellentesque eu erat eget leo scelerisque consectetuer. Pellentesque nec velit. In vel dui eget lorem malesuada iaculis. Maecenas eget pede. Mauris cursus ultricies nunc. Nam lectus lacus, congue rhoncus, adipiscing accumsan, lobortis gravida, quam.
zpět: CSS – pevné umístění