ugrás a tartalomhoz

HTML CSS - háttérkép és szöveg gördülése

Csányi Pál · 2006. Már. 14. (K), 01.14
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
 
1

Overflow

Anonymous · 2006. Már. 14. (K), 01.36
Próbáltad már az overflow tulajdonságot megadni a doboznak?
2

Overflow

Csányi Pál · 2006. Már. 14. (K), 02.11
CSS fájlban:

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
3

Talán...

Anonymous · 2006. Már. 14. (K), 02.39
Hát nem tudom, hogy konkrétan hogy képzelted el, de amit leírtál, az valahogy szerintem így nézne ki:

body {
background-image: url("images/hatterkep.gif");
background-repeat: no-repeat;
background-position: 0% 0%;
background-attachment: fixed;
background-color: #e5f5fc;
}

.main {
overflow: auto;
margin-top: 120px;
margin-bottom: 10px;
margin-left: 180px;
margin-right: 180px;
border: groove;
border-color: #86CCE9;
padding: 1em;
float: left;
width: 500px;
height: 200px;
}

<div style="padding: 1em;">
  <DIV class="main"> ... </DIV>
</div>
Finomítani kell még, de kiindulásnak talán megteszi.
4

Talán...

Csányi Pál · 2006. Már. 15. (Sze), 00.12
Megteszi bizony!

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. :-)
5

Talán...

Anonymous · 2006. Már. 15. (Sze), 23.44
Sajnos, tévedtem!

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?
6

Hm?

Anonymous · 2006. Már. 15. (Sze), 23.54
Nem tudom, mire gondolsz, nálam simán görgethető a tartalom (egérrel is).
7

Hm?

Csányi Pál · 2006. Már. 16. (Cs), 00.08
Úgy rémlik, mintha tegnap olvastam volna ebben a CSS dokumentumban valahol olyat, hogy onmousewheel, vagy valamit, amiben volt a mouse szó.
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.
8

Igen

Anonymous · 2006. Már. 16. (Cs), 00.26
Orca Browser alatt néztem, nekem ebben görgethető az egérgörgővel.
Meg sem merem tippelni, hogy nálad mi lehet a gond - tényleg halván elképzelésem sincs :)
9

Igen

Csányi Pál · 2006. Már. 16. (Cs), 00.30
Próbáltam Mozilla beállítását; ott van egy rész az egérgörgőre is, de ott mindent rendben találtam..

Nem baj! Azért köszönöm az eddigi segítséged! :-)