Gyakorló - 7 feladatai
Téma 1.
A baloldali navigációs listás felsorolásokat, átalakítjuk display block formátumra.
Így a baloldali és a jobboldali hivatkozások megjelenési formáját, egyszerűbb összehasonlítani.
Css, azaz stíluslapon így alakulnak a baloldali navigációs rész meghatározásai:
#navbal { float: left; width: 120px; padding: 10px 0px 10px 0px; background-color: #ffc;}
#navbal ul{list-style: none; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px; margin-left: 15px;}
#navbal a {background: red; display: block; width: 80px; text-decoration: none; color: #fff;}
#navbal a {border: 1px solid blue; margin-top: 2px; padding: 2px 5px 2px 5px;}
#navbal a:hover {background-color: blue; color: #fc0;}
Téma 2.
Elhelyezzük weblapunk jelképét a bal felső sarokba, azaz az első div szakasz baloldalán.
Mivel a tartalmi rész is fotózással foglakozik, ezért a jelkép is valami hasonló lesz, és itt helyezzük el webhelyünk címét is.
Mindenki készítse el egyedi jelképét.
A képet helyezzük rá, a már meglévő háttérképünkre és mentsük el fejlec_770x150 elnevezéssel, JPG formátumban.
Stíluslapon módosítani kell, a háttérkép útvonalának meghatározását.
#siteName{float: left; width: 770px; height: 120px; background-image: url("fejlec_770x150.jpg");}
Téma 3.
A baloldali hivatkozások színét változtassuk meg, hogy jobban elváljon a jobboldali hivatkozások megjelenési formájától.
Stíluslapon módosítani kell.
#navbal a {background: #3c4f38; display: block; width: 80px; text-decoration: none; color: #fff;}
#navbal a:hover {background-color: #fc0; color: black;}
Téma 4.
Összefoglaló.
Az xhtml lapunk tartalma nem változott.
A css, azaz stíluslapunk meghatározásai, í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: 120px; background-image: url("fejlec_770x150.jpg");}
#siteName { text-align: center; }
h1 {font-size: 35px; color: #fff; padding-top: 15px; border-bottom: 2px solid #fff; }
h1 {margin-right: 150px; margin-left: 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: 120px; padding: 10px 0px 10px 0px; background-color: #ffc;}
#navbal ul{list-style: none; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px; margin-left: 15px;}
#navbal a {background: #3c4f38; display: block; width: 80px; text-decoration: none; color: #fff;}
#navbal a {border: 1px solid blue; margin-top: 2px; padding: 2px 5px 2px 5px;}
#navbal a:hover {background-color: #fc0; color: black;}
#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; }