Gyakorló - 6 feladatai
Téma 1.
A hivatkozásainknak nem kell ilyen széles terület, de a tartalomnak jobb lenne szélesebb terület.
Tartalom a lényege minden weboldalnak, nem a külső hivatkozások felsorolása.
Gyakorlati feladatoknál, azért alkalmazunk minden területnek háttérszínt, hogy vizuálisan is jobban követhető, melyik div szakasz, mekkora területet foglal el.
Töröljük mindegyik hivatkozási div szakasznál, a listás ( li ) sorok meghatározásait:
li { width: 110px; padding-left: 15px; background-color: #cfc;}
Ahhoz, hogy a listák (ul) területe balra igazodjon a div szakaszon belül.
MA: paddingot kell lenullázni
IE: margint kell lenullázni.
Így mindkettő egyformán jeleníti meg, és ezt követően ismételten mozgathatjuk jobbra a marginnal, a kívánt értéknek megfelelően.
#navbal ul { list-style: none; margin: 0px; padding: 0px; margin-left: 20px;}
Mindegyik navigációs div szakasz szélességét megváltoztatjuk: 130px
A jobbos nav szakaszt is balra csúsztatjuk: float-left;
Ezekután, a tartalom, azaz content div szakasz szélességét megnövelhetjük 510px méretig.
#content {float: left; width: 510px; margin-bottom: 15px; background-color: #fc0; }
Téma 2.
A css, azaz stíluslapunk tartalma a navigációs div szakaszoknál, és a content div szakasznál:
#navbal { float:left; width: 130px; padding-top: 10px;background-color: #ffc;}
#navbal ul { list-style: none; margin: 0px; padding: 0px; margin-left: 20px;}
#navbal a { font-size: 14px; font-weight: bold; color: black; background-color: #ccc;}
#navbal a:hover { color: #fff; background-color: blue;}
#content {float: left; width: 510px; margin-bottom: 15px; background-color: #fc0; }
#content h2 {font-size: 1.2em; text-align: left; padding: 2px 0px 0px 20px; border-bottom: 2px solid blue;}
#content img { float: left; padding-right: 15px;}
#navjobb { float: left; width: 130px; padding-top: 10px; background-color: #ffc;}
#navjobb ul { list-style: none; margin: 0px; padding: 0px; margin-left: 20px;}
#navjobb a {font-size: 14px; font-weight: bold; color: #fff; background-color: red;}
#navjobb a:hover { font-weight: bold; color: #fff; background-color: blue;}
Téma 3.
A div szakaszok közötti távolságokat szüntessük meg, azaz érjenek össze.
Kivételt a lábléc div szakasznál, ott 2px távolságot meghagyunk.
Az első div szakasznál, töröljük az alsó margót, margin-bottom: 15px; és csúsztassuk melléje a második div szakaszt, írjuk be: float: left;
#siteName { float: left; width: 770px; height: 100px; background-image: url("hegyoldal_770x150.jpg");}
A címsor felső padding értékét, px értékre változtatjuk: padding-top: 15px;
A második div szakasznál, töröljük az alsó margót.
#pageName { width: 770px; margin-bottom: 15px; padding: 0px 0px 0.1px 0px; background-color: #0ff; }
Tartalom, azaz content div szakasz alsó margóját, 2px értékre állítjuk.
Így a lábléc div szakasza közelebb kerül a tartalomhoz, de azért elválik tőle.
#content {float: left; width: 510px; margin-bottom: 2px; background-color: #fc0; }
Az egész weblapunkat magába foglaló container div szakasz alsó padding értékét töröljük.
#container{width: 770px; margin: 10px 0px 20px 10px; padding-bottom: 2px; background-color: #fff;}
A lábléc div szakasznak adunk felső és alsó padding értéket, hogy a szövegsorok beljebb kerüljenek.
#lablec {clear: both; width: 770px; padding: 5px 0px 5px 0px; background-color: #ccc; }
Téma 4.
Minkét hivatkozási div szakasz alsó részén, egészen a lábléc div szakaszig, üres terület látható, a tartalom jobb és bal oldalán.
A területeket töltsük ki, háttérszínnel.
Ezt úgy valósítjuk meg, hogy a container div szakasz fehér hátterét, tetszőleges háttérszínre változtatjuk.
Jelenleg ugyan olyan színt alkalmazunk, mint a navigációs div szakaszoknak adtunk.
#container{width: 770px; margin: 10px 0px 20px 10px; background-color: #ffc;}
Téma 5.
Összefoglaló
Az xhtml lapunk body területének tartalma, nem változott.
Css, azaz stíluslapunkon lévő meghatározások, így alakulnak:
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38; padding-bottom: 20px;}
#container{width: 770px; margin: 10px 0px 20px 10px; background-color: #ffc;}
#siteName { float: left; width: 770px; height: 100px; background-image: url("hegyoldal_770x150.jpg");}
#siteName h1 {font-size: 35px; color: #fff; text-align: center; padding-top: 15px; border-bottom: 2px solid #fff; }
#siteName h1 {margin-left: 150px; margin-right: 150px; }
#pageName { width: 770px; padding: 0px 0px 0.1px 0px; background-color: #0ff; }
#pageName h2 {font-size: 25px; text-align: right; padding-right: 20px; }
#pageName img {margin-top: 5px; }
#navbal { float:left; width: 130px; padding-top: 10px;background-color: #ffc;}
#navbal ul { list-style: none; margin: 0px; padding: 0px; margin-left: 20px;}
#navbal a { font-size: 14px; font-weight: bold; color: black; background-color: #ccc;}
#navbal a:hover { color: #fff; background-color: blue;}
#content {float: left; width: 510px; margin-bottom: 2px; background-color: #fc0; }
#content h2 {font-size: 1.2em; text-align: left; padding: 2px 0px 0px 20px; border-bottom: 2px solid blue;}
#content img { float: left; padding-right: 15px;}
#navjobb { float: left; width: 130px; padding-top: 10px; background-color: #ffc;}
#navjobb ul { list-style: none; margin: 0px; padding: 0px; margin-left: 20px;}
#navjobb a {font-size: 14px; font-weight: bold; color: #fff; background-color: red;}
#navjobb a:hover { font-weight: bold; color: #fff; background-color: blue;}
p { font-size: 12px; padding: 0px 20px 0px 20px; }
.utolsop { font-size: 12px; padding: 0px 20px 20px 20px; }
strong { font-weight: bold; }
em { font-style: italic; }
span { border-bottom: 2px solid #fc0;}
#lablec {clear: both; width: 770px; padding: 2px 0px 2px 0px; background-color: #ccc;}
.lablecp { font-size: 0.6em; }