Stíluslap létrehozása

Tartalom kialakítása

Folytassuk a tartalom kialakításával.

A Bejegyzések és Blokkok egyes címsorunk a tartalmi részek azonosítását segítik, de vizuális böngészőprogramokban ezeket nem kell megjelenítenünk, a vak látogatók számára viszont elérhetővé kell tenni ezeket, ezért a szokásos módon pozícionáljuk ki ezeket a képernyőről. Ezek a címsorok az adott szakaszok gyermek (és nem leszármazott) elemei, így tehát a megfelelő kód:

section#bejegyzesek > h1, section#blokkok > h1 {
  position: absolute;
  left: -9999px;
}

A kiemelt bejegyzések, további bejegyzések, sőt a lábléc kialakítása is olyan, mint amit a fejlécben a nyomvonal navigációnál beállítottunk, végezzük el itt is a szükséges átalakításokat, állítsuk be a szöveg igazítását középre, és állítsuk be a margókat is!

section#kiemeltbejegyzesek > h1, section#tovabbibejegyzesek > h1, footer
{
  background-image: url('images/elvalaszto_szel.png'), 
   url('images/elvalaszto_szel.png'), 
   url('images/elvalaszto_kozep.png');
   background-repeat: no-repeat, no-repeat, repeat-x;
   background-position: center left, center right, left top;
   height: 21px;
   text-align: center;
   font-size: 100%;
   font-weight: normal;
   margin-top: 10px;
   margin-bottom: 10px;
}

Az arculatterv alapján az összes bejegyzésnél és a bal oldali blokk minden eleménél egy áramköri lapkára hasonlító hátteret kell beállítanunk. Ezt ahhoz hasonlóan valósítjuk meg, mint ahogy a fejlécben látható ikonok esetén megtettük, vagyis többszörös háttérképek alkalmazásával.

section#kiemeltbejegyzesek article, section#tovabbibejegyzesek article, section#blokkok nav, section#blokkok aside  {
  
  padding: 12px 10px 20px 10px;
  margin: 10px 0px 20px 0px;
  background-color: #333;
  background-image: url('images/szegely_felso.png'), 
         url('images/szegely_also.png'), 
         url('images/szegely_oldal.png'), 
         url('images/szegely_oldal.png');
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
  background-position: left top, left bottom, top left, right top, center right;
  }

Az arculatterv alapján a bejegyzések szövegét sorkizárttá kell tennünk, és a képeket jobbra kell lebegtetnünk, a megfelelő margó beállításával.

section#kiemeltbejegyzesek article img, section#tovabbibejegyzesek article img 
{
 float: right;  
 margin-left: 10px;
 }
 
 section#kiemeltbejegyzesek article p, section#tovabbibejegyzesek article p {
  text-align: justify;
     }

Mivel a képek jobbra lebegnek, előfordulhat, hogy ha valaki nagyobb felbontásban nézi az oldalt, akkor a tartalmazó blokkból (annak kicsi magassága miatt) kilógnak a képek. Hogy ez ne fordulhasson elő, a tartalmazó blokkra vonatkozóan be kell állítanunk az overflow:hidden; tulajdonságot.

section#kiemeltbejegyzesek article, section#tovabbibejegyzesek article, section#blokkok nav, section#blokkok aside  
{
  overflow:hidden; /* ne lóghasson ki az előkép a dobozból */
}

Ezek után a blogunk az alábbiaknak megfelelően fog megjelenni:

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplabblog_tartalom1_full.jpgA blogunk megjelenése a módosítások után

Az arculatterven a blokkokat tartalmazó szakasz bal oldalra van igazítva, a bejegyzéseket tartalmazó szakasz pedig jobbra.

Folytassuk ezzel az átalakítást! Valósítsuk meg úgy az elrendezést, hogy a bal oldali szakasz fix szélességű legyen, a jobb oldali szakasz viszont relatív. Erre több működő módszer is létezik.

Mi a következő módszert követtük:

• A blokkok azonosítojú szakasznak kell bal oldalon lennie, ezért annak egy bal oldali lebegtetést állítunk be, valamint beállítjuk az arculattervben lemérhető szélességet (240px).
• A bejegyzések azonosítójú szakaszt is balra lebegtetjük, szélességének a teljes rendelkezésre álló helyet (100%) állítjuk be.
• A bejegyzések azonosítójú szakaszban található további szakaszokra beállítunk egy bal margót. Tudjuk, hogy a bal oldali oszlop szélessége 240px, az arculattervben lemérhető, hogy a két oszlop között 20px távolság van, így a bal oldali margó 260px lesz.
• A blokkok azonosítójú szakaszra negatív bal margót alkalmazunk, mégpedig -100% értékkel.

section#bejegyzesek {
  float: left;
  width: 100%;
}
section#bejegyzesek section {
  margin-left: 260px; /*A bal margót a bal oldali oszlop szélességének megfelelően állítjuk be*/
  border-top: 0;
  margin-top: 10px;
}
section#blokkok {
  float: left;
  width: 240px; /*A bal oldali oszlop szélessége*/
  margin-left: -100%;
  padding: 0;
}

Ezek után így néz ki az arculat.

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplabblog_tartalom2_full.jpgA blogunk megjelenése a szakaszok igazítása után

Látható, hogy kialakult a kétoszlopos elrendezés, de pár dolgot még módosítanunk kell. Ilyen például az, hogy a lábléc (<footer>) elemre be kell állítanunk, hogy ne kerülhessen lebegtetett elem mellé.

 footer {clear:both;}

Ezen kívül a további bejegyzés blokkokra be kell állítani a megfelelő szélességeket és lebegtetéseket, hiszen ott az egyes bejegyzéseknek egymás mellé kell kerülniük az arculatterv szerint. Beállítjuk a dobozok szélességét, és a margóértékeket úgy, hogy az első oszlopban lévő elemeknél (amelyeket az nth-child látszólagos osztállyal címzünk meg) ne legyen bal oldali margó, a többinél viszont igen.

section#tovabbibejegyzesek article {
  float: right;
  width: 46%;
  margin-left: 0.5%;
  text-align: justify;
  margin-top: 10px;
}
section#tovabbibejegyzesek article:nth-child(2n) {
 margin-left: 0%;
 float: left;
 clear: left;
}

Most így néz ki az oldalunk:

A kép (nagyobb változata) külön ablakban is megtekinthető.alaplabblog_tartalom3_full.jpgA blogunk megjelenése a további bejegyzések igazításának beállítása után

Az arculattervhez képest jópár eltérést találunk még. Például az arculatterven látható volt a bal alsó sarokban egy hűtőventillátor. Helyezzük el ezt is. Ehhez a blokkon azonosítójú szakaszt kell módosítanunk úgy, hogy a kép ennek a szakasznak a háttérképe legyen, amelyet nem ismétlünk, és alulra pozícionálunk. A módosult kód tehát a következő:

section#blokkok {
  background-image: url('images/alaplap_huto.png');
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 230px;
}

Az elválasztók (kiemelt bejegyzések, további bejegyzések) szélessége az arculatterven nem a teljes szélességgel egyenlő, ezért módosítanunk kell a szélességet ezen elválasztók esetén, illetve középre kell igazítunk őket.

section#kiemeltbejegyzesek > h1, section#tovabbibejegyzesek > h1
{
width: 90%;
margin: 0 auto;
}

A menü blokkunkban a Menü tartalmú 1-es címsort ki kell pozícionálnunk a képernyőről, valamint a menüben látható szövegek tipográfiáját is módosítanunk kell.

nav#menu > h1 {
  position: absolute;
  left: -9999px;
}
nav#menu ul {
  list-style-type: none;
  font-size: 120%;
  margin-top: 10px;
}
nav#menu a {
 text-decoration: none;
 line-height: 140%;  
 text-shadow: 2px 2px 2px  #000;
}

Az <aside> elemek tartalmán is módosítanunk kell az arculattervnek megfelelően.

section#blokkok aside {
  padding-top: 10px;
  padding-bottom: 20px;
}
section#blokkok aside > h1 {
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: normal;
}
section#blokkok aside ul {
  list-style-type: square;
  margin-left: 15px;
}
section#blokkok aside ul li a {
  text-decoration: none;
}

Folytassuk a bejegyzésekre vonatkozó stílusok pontosításával!

section#bejegyzesek article h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}
section#bejegyzesek article h1 a {
  text-decoration: none;
}
section#bejegyzesek article time {
  display: block;
  font-size: 90%;
  font-style: italic;
  margin-bottom: 10px;
}  
section#blokkok h1 {
       text-shadow: 2px 2px 2px #000;
}

A lábléc megjelenését is módosítanunk kell!

footer a {
  text-decoration: none;
  margin-right: 20px;
  font-weight: bold;
}
footer a:last-child {margin-right:0;}

Ez a fajta elrendezés, amit létrehoztunk, nagyobb felbontásban igazán előnyös, bizonyos méret alá összenyomva már nem néz ki jól. Ezért állítsuk be a lapnak, hogy mi az a minimális szélesség, ami alá már nem engedjük átméretezni. Legyen ez az érték 800 képpont. Azt se engedjük meg, hogy nagyon szélesre lehessen széthúzni a tartalmat, mert úgy kényelmetlen olvasni a bejegyzéseket. A maximális szélesség legyen1200 képpont legyen!

body {
 min-width: 800px;
 max-width: 1200px;
}

A folytatásban megnézzük, hogy mit tehetünk annak érdekében kisebb felbontásokban is élvezhető legyen az oldal.

Az Alaplap blog jelenlegi állapota is letölthető az alábbiakban.

Vissza a tartalomjegyzékhez