Float, position és egyebek

2017/08/25. - írta: csiripiszli12

Szóval az első nagyobb önálló feladat egy saját online névjegy (bemutatkozó oldal) elkészítése.

Azt találtam ki, hogy oldalt legyen egy kép, ami fix, és mellette az oldal többi része tudjon gördülni, ahogy lejjebb megy az olvasó. Amikor ezt le akartam kódolni, akkor jól belegabalyodtam a különböző kódokba, úgymint float és position: fixed és társai. Viszont szeretném megérteni ezeket a kódokat, így elhatároztam, hogy különböző variációkat kódolok le.

Kiindultam abból, hogy sima háttérképet tudok kódolni:

1. háttérkép + címsorok:  itt.

és megnézem, mi történik, ha a háttérképet tartalmazó egységen belül teszek egy dobozt:

2. háttérkép + dobozban a címsorok: itt

Ennél arra is rájöttem, hogy ha a doboz méreteinél a magasságot 100%-nál nagyobbra állítom, akkor lehet görgetni. Amúgy nem néz ki rosszul, még az is lehet, hogy megváltoztatom a névjegy-elképzelésemet :)

Egyelőre itt tartok. Mivel a magyarázatból úgy sejtem, hogy nem jó ötlet egyszerre használni a float és a position kódokat, ezért akarok egy olyan változatot, amiben

3. megnézem, mit csinál a float: left (merthogy talán ez van legközelebb az eredeti elképzelésemhez),

(UPDATE: itt) és

4. a position: fixed

(UPDATE: itt - és azt hiszem, ezzel felfogtam, hogy mi a helyzet, ha fix pozíciót adok egy elemnek, úgyhogy most boldogan elmegyünk sétálni a kutyámmal.)

meg ha még adódik valami, akkor azt is.

Ezzel persze elszüttyögök egy ideig, és nem tudom, magához az online névjegyemhez mikor térek vissza, de azt gondolom, többet érek vele, ha most több időt szánok rá, és megértem rendesen a dolgokat, utána már, gondolom, könnyebb lesz megcsinálni azt a névjegyet, amit szeretnék.

Szólj hozzá!

A bejegyzés trackback címe:

https://mijutotteszembe.blog.hu/api/trackback/id/tr5212779084

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.