HTML CSS - háttérkép és szöveg gördülése
body {
background-image: url("images/hatterkep.gif");
background-repeat: no-repeat;
background-position: 0% 0%;
background-attachment: fixed;
background-color: #e5f5fc;
position: fixed;
margin-top: 120px;
margin-bottom: 10px;
margin-left: 180px;
margin-right: 180px;
border: groove;
border-color: #86CCE9;
padding: 1em;
}
A fönti CSS blokk megadja, hogy a háttérkép ne mozogjon, és megadja a szöveg helyzetét - margóit.
Hogyan érhetem el azt, hogy a szöveg gördíthető legyen, de úgy, hogy ha lefelé görgetem, akkor a megadott fölső margótól följebb ne menjen, mert ott van a háttérképen egy grafikusan elkészített cím?
Magyarán: kellene egy doboz, amin belül gördíthető a szöveg, de a doboz maradjon a helyén! Létrehozható ilyen doboz a CSS segítségével?
Ha a fönti CSS blokkban megváltoztatom a position: fixed; bejegyzést
position: scroll; -ra, akkor a szöveg a weboldal tetejéig fölmegy, amit éppen megakadályoznék - vagyis, a szöveg csak a fölső margóig gördüljön, azon túl már ne látszódjék - ezt szeretném. Elérhető ez? Hogyan?
Minden tanácsot megbecsülök!
--
Pali
■ background-image: url("images/hatterkep.gif");
background-repeat: no-repeat;
background-position: 0% 0%;
background-attachment: fixed;
background-color: #e5f5fc;
position: fixed;
margin-top: 120px;
margin-bottom: 10px;
margin-left: 180px;
margin-right: 180px;
border: groove;
border-color: #86CCE9;
padding: 1em;
}
A fönti CSS blokk megadja, hogy a háttérkép ne mozogjon, és megadja a szöveg helyzetét - margóit.
Hogyan érhetem el azt, hogy a szöveg gördíthető legyen, de úgy, hogy ha lefelé görgetem, akkor a megadott fölső margótól följebb ne menjen, mert ott van a háttérképen egy grafikusan elkészített cím?
Magyarán: kellene egy doboz, amin belül gördíthető a szöveg, de a doboz maradjon a helyén! Létrehozható ilyen doboz a CSS segítségével?
Ha a fönti CSS blokkban megváltoztatom a position: fixed; bejegyzést
position: scroll; -ra, akkor a szöveg a weboldal tetejéig fölmegy, amit éppen megakadályoznék - vagyis, a szöveg csak a fölső margóig gördüljön, azon túl már ne látszódjék - ezt szeretném. Elérhető ez? Hogyan?
Minden tanácsot megbecsülök!
--
Pali
Overflow
Overflow
body {
background-image: url("images/hatterkep.gif");
background-repeat: no-repeat;
background-position: 0% 0%;
background-attachment: fixed;
background-color: #e5f5fc;
}
#header {
position: fixed;
width: 100%;
height: 120px;
}
#main {
overflow: scroll;
margin-top: 120px;
margin-bottom: 10px;
margin-left: 180px;
margin-right: 180px;
border: groove;
border-color: #86CCE9;
padding: 1em;
}
Aztán a HTML forrásban:
<DIV id="header"> </DIV>
<DIV id="main"> ... </DIV>
de siralmas az eredmény.
Ez szerint próbálkozom, de nem értem a lényeget:
http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#normal-flow
--
Pali
Talán...
Talán...
Most már marad annak elérése, hogy az egérgörgőre is gördüljön a szöveg ebben a dobozban. Azt hiszem, ez már megy majd egyedül is. :-)
Talán...
Hiába böngészem a CSS leírását
(http://www.w3.org/TR/1998/REC-CSS2-19980512/cover.html#minitoc),
sehol nem lelem annak okát, miért nem gördül az egérgörgőre ebben a dobozban a szöveg? Ehelyett a szöveg csak a gördítősávra mozdul.
Mit hagytam ki?
Hm?
Hm?
Sejtem, hogy ez már a JavaScript világa.
De van a CSS-ben olyan is, hogy :active meg :hover , de az előbb megnéztem, és ez másra szolgál.
Már én sem tudom, mire gondoljak!
Nálad simán gördül a szöveg a dobozban, amit a fönti módon hoztál létre, az egér középső gomjára is?
Nálam miért nem? Nem hagytam ki semmit, nem tettem hozzá egyenlőre semmit. Mozillában böngészem az oldalt.
Igen
Meg sem merem tippelni, hogy nálad mi lehet a gond - tényleg halván elképzelésem sincs :)
Igen
Nem baj! Azért köszönöm az eddigi segítséged! :-)