Mielőtt számonkérnénk a weblapon, hogy miért nem formázza a stilus.css szerint, győződjünk meg róla, hogy csatoltuk-e azt.
(<link rel=”stylesheet” type=”text/css” href=”stilus.css” />)
Igazítások
Szöveg
A szöveg típusú jelölők (bekezdés, címsorok, …) igazítása a text-align tulajdonság megadásával történhet. Ha több helyen is előfordul, akkor érdemes készíteni rá egy stílust: (a példában középre igazítunk)
.kozep {
text-align: center;
}
Kép
A képekkel kapcsolatban két tipikus eset fordul elő:
igazítása a lapon
Ahhoz, hogy egy képet a megfelelő helyre tudjuk elhelyezni, két dolog kell:
- egy “dobozba” kell helyezni
- a doboznak a margókhoz való viszonyát kell megadni.
Konkrétan:
A feladat az, hogy egy képet helyezzük el egy cella jobb oldalára.
Akkor tehát a két dolog:
1.) dobozba rakjuk:
display: block;
majd 2.) megadjuk, hogy balról automatikus legyen a margótól való távolsága:
margin-left: auto;
szövegben elhelyezés (körbefuttatás)
Ha azt szeretnénk, hogy a képet körülfolyja a szövegünk, a float tulajdonságot kell megadnunk. Például a
float: right;
tulajdonságú elem jobbra “lebegteti” a képet, így a szöveg balról folyja körbe.
Táblázatok
Nézzük milyen tulajdonságúnak kell lennie egy tipikus érettségi feladatban a táblázatoknak (2010. tavaszi, környezetbarát feladat):
- A weblap szerkezete egy egysoros, kétoszlopos, középre igazított, 1000 képpont széles, szegély nélküli táblázattal készüljön!
- A táblázat háttérszíne PaleGreen (#98FB98 kódú világoszöld) legyen! A cellaközt és cellamargót állítsa 3-ra! Az első oszlop szélessége 150 képpont legyen!
- A táblázat bal oldali cellájába szúrja be a palack.png képet egymás alá négy példányban! A cella tartalma vízszintesen középre és függőlegesen felülre igazított legyen!
Itt aztán tobbzódunk a formázásban. Vegyük külön, mi az ami a táblázatra, s mi az, ami a cellákra vonatkozik. Ami nehézséget okozhat, az a cellaköz és cellamargó. A cellamargó az egyszerűbb, azt a cellaformázásnál adjuk meg, de a cellák közötti távolság (cellaköz) megadása viszont már nem a cellák magánügye, hanem a táblázathoz tartozik.
A Táblázat
Középre igazított, 1000 pont széles, szegély nélküli, háttérszíne PaleGreen. A cellaköz 3 px.
A Cella
A cellamargó 3px.
A baloldali cella
150 képpont széles, vízszintesen középre és függőlegesen felülre igazított.
Akkor nézzük konkrétabban:
Középre igazított: A táblázat egy “doboz”, tehát az igazítás a margóktól való távolsággal adható meg (Doboz kategória – SpD2007). A szélessége a width: tulajdonság (Elhelyezés kategória – SpD2007), szegély az egyértelmű (Szegély kategória – SpD2007) ( ha lenne szegélye, a sima vonal a “solid”), a háttérszíne a background-color (Háttér kategória – SpD2007). A cellaköz a border-spacing (Táblázat kategória – SpD2007)
#tablazatunk {
margin-right: auto;
margin-left: auto;
width: 1000px;
background-color: PaleGreen;
border-spacing: 3px;
}
A cella : (Doboz kategória – SpD2007)
td {
padding: 3px;
}
A balcella (Blokk kategória – SpD2007) igazítás, és szélesség (Elhelyezés kategória – SpD2007)
.balcella {
width: 150px;
vertical-align: top;
text-align: center;
}