HTML-szerkesztés kezdőknek!!!
-
#8337
Ha jól sejtem erről az oldalról van szó, ami ezt a stíluslapot használja[/url], és valószínűleg ezen iromány alapján készült.
Ha javasolhatnám, a CSS-kódot mindenek előtt egyszerűsítsd:
1. A CSS-kód legelejére például tedd az alábbit:
* {
margin: 0;
padding: 0;
border: none;
}
Ezzel minden elem margóját, kitöltését, és szegélyét eltünteted. Ez azért jó, mert eltünteted a böngésző alapbeállításaiból eredő margókat, kitöltéseket és szegélyeket, és nem kell ezeket egyesével kinyírni (esetedben a body, #container, #left, #content, #right elemeknél) - tiszta lappal indulhatsz.
2. Ahol lehet, csoportosíts! Ahogy látom 3 blokkot - #left, #content, #right - egymás mellé akarsz "lebegtetni". A helyett, hogy mindegyiknél megadod: float: left;, vond össze a 3 elemet:
#left, #content, #right {
float: left;
}
3. A position: relative; CSS deklaráció megadása nem kell, csak a helyet foglalja.
Így lesz a 720 bájt méretű stíluslapból 461 bájt méretű.
No akkor középre igazítás:
"és szövegre olvastam olyat, hogy: line-height: 100%;"
Ha van egy, egysoros szöveged, amit egy blokk típusú elemen belül akarsz elhelyezni, a blokk magasságával megegyező line-height tulajdonsággal ruházol fel, akkor függőlegesen középre fog pozicionálódni a szöveg.
Tehát HTML-kódrészlet:
<div id="content"><pTartalom</p></div>
CSS-kódrészlet:
#content{
height:300px;
width:500px;
background-color:#FFCC00;
}
#content p {
line-height: 300px;
}
Viszont ha a HTML-kódban az adott blokkba több sor kerül:
<div id="content"><pTartalom 1</p><pTartalom 2</p></div>
akkor ez a trükk már nem működik megfelelően.
"viszont annyit azért kérdeznék, merthogy mindenhol azt írják, hogy nehéz a középre igazítás, hogy:"
Tegyük fel, hogy van az alábbi iromány alapján készült HTML, és CSS kódod.
Középre akarod pozicionálni a #container elemet.
Ez esetben 1. a <body> elemnek megadod, hogy a szöveget pozicionálja középre:
body {
text-align: center;
}
2. a #container blokknak, meg a két oldalról automatikus margót adsz (a szöveg középre igazitását meg visszaveszed):
#container {
margin: 0 auto;
text-align: left;
width:650px;
}
Szóval így
És vízszintesen középre is van pozicionálva a #container blokk.
Középre pozicionálásról még itt illetve itt olvashatsz.