Cikkajánló
Hoztam egy újabb jópofa CSS kódot, amit G-Portálon, WordPress-ben vagy bárhol máshol is lehet alkalmazni :) Akár szélső sávban, akár a főmodulban is. Én most a példa kódot egy
Kellemes estét mindenkinek :) Így hétvégére hoztam újabb kettő darab letölthető G-Portálos teljes sablont. Egy Kristen Stewart és egy Troian Bellisario sablon készült el. Úgy, mint az eddigieket, itt
A változatosság kedvéért hoztam egy újabb Photoshop fejlécet. Úgy szeretem ezt a színésznőt, így gondoltam készítek vele egy fejlécet. Lehet a hétvégén készítek hozzá egy G-Portálos témát is, mert
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
2016. február. 02.
Táblázat készítése 2.0

Ha már elsőnek leírtam a rendes táblázat készítését, gondoltam leírok még egy verziót, mikor nem táblázatban, hanem DIV kódba teszitek a tartalmat. Nekem személy szerint egyre megy. Kinézetre úgy sem mondja meg a kutya sem, hogy milyen kódot használtunk a táblázatunkhoz. Mindenki döntse el maga, hogy neki melyik a szimpatikusabb és használja azt ;)

 

Ennél is a legegyszerűbben úgy tudtok táblázatot készíteni akár WordPress-ben akár G-Portálon vagy olyan szolgáltatónál, ahol tartalomkezelő van, hogy a forráskódban dolgoztok és így hozzátok létre a táblázatot és írjátok meg hozzá a CSS kódot is. Lejjebb találtok minta DIV táblázatot kóddal, szóval nem lesz nehéz elkészíteni. :) A CSS kódot minden esetben az alap CSS kódotokba kell majd bemásolni a végén. Nem kell a CSS-t minden alkalommal abba a bejegyzésbe illeszteni forráskód nézetben, amiben lesz egy DIV táblázat, hanem a style.css fájlba kell bemásolni a többi CSS kód közé. G-Portálon pedig a többi CSS közé kell másolni, amit legtöbbször egy szélső modulban tartotok.

 

LindaDesign
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
LindaDesign
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

A fenti DIV kód

 

<div id="tablazat">
<div class="sorok">
<div class="tartalom">
<a href="/">LindaDesign</a><br />Ide jön a tartalom</div>
<div class="tartalom">Ide jön a tartalom</div>
<div class="tartalom">Ide jön a tartalom</div>
</div>
<div class="sorok">
<div class="tartalom">
<a href="/">LindaDesign</a><br />Ide jön a tartalom</div>
<div class="tartalom">Ide jön a tartalom</div>
<div class="tartalom">Ide jön a tartalom</div>
</div>
</div>

 

 

A DIV kódban már értelemszerűen feltűnik, hogy melyik a sor és az oszlop. Ez a példa kód is két sorból és három oszlopból áll.

 

Egy teljes sor kódja ez

 

<div class="sorok">
<div class="tartalom"><a href="/">LindaDesign</a><br />
Ide jön a tartalom</div>
<div class="tartalom">Ide jön a tartalom</div>
<div class="tartalom">Ide jön a tartalom</div>
</div>

 

Értelemszerűen, ha több sort szeretnétek, akkor még egy ilyen adag kódot bemásoltok alá, ha kevesebbet, akkor töröltök belőle. Ha nem kell a 3 oszlop, csak kettő vagy egy, akkor ilyen sort (sorokat) kell törölni a kódból:

 

<div class="tartalom">Ide jön a tartalom</div>

 

A tartalmi résznek lehet adni háttérképet vagy háttérszínt, bármilyen betűtípussal lehet írni benne, kerete is lehet vagy bármi. Csak CSS kód tudása kell a táblázat kinézetéhez, semmi más :) Képet is lehet tenni a táblázatba. A class=”tartalom” kódrész átírható, átnevezhető, így egy-egy rukrika kinézete eltérhet a többitől.

 

Ha a forráskódban megszerkesztettétek a DIV táblázatok oszlopait és sorait, utána nyugodtan menjenek vissza rendes szerkesztő nézetbe és ott töltsétek fel a táblázatot tartalommal. Szöveg, kép, link, stb. Szerkesztő nézetben a táblázat tök natúr kinézetű, ami nem hiba, mivel itt még nem hat rá a CSS kód. Elmentés után már felveszi a CSS kód kinézetét. Persze csak akkor, ha a CSS már a megfelelő helyére be van másolva és tud hatni a táblázatra.

 

 

Ez az én táblázatom CSS kódja
Ha valamelyik érték pl. G-Portálon a CSS kód hatására sem változik, akkor az adott kódsor mögé be kell írni ezt: !important. Például: line-height: 19px !important;
Ha ti nem szeretnétek, hogy a táblázatok között legyen rés, mint nálam fent a demóban, akkor a border-spacing értéket vegyétek le nullára.

 

<style type="text/css">
#tablazat { /* az egész táblázat */
margin: 0px auto; /* ettől lesz a táblázat középen */
width: 610px; /* az egész táblázat szélessége */
display: table; /* fix, ne módosítsd */
border-collapse: separate;
border-spacing: 3px;
}
.sorok { /* fix, ne módosítsd */
display: table-row;
}
.tartalom { /* tartalom háttere, betűmérete, betűtípusa */
font-family: Arial, Helvetica, sans-serif;
background-color: #F3F3F3;
color: #707070;
border: 1px solid #E5E5E5;
padding: 8px;
font-size: 13px;
text-align: justify;
line-height: 19px !important;
display: table-cell; /* fix, ne módosítsd */
vertical-align: top; /* fix, ne módosítsd */
}
.tartalom a:link, .tartalom a:visited { /* a táblázatban a linkek betűtípusa, betűmérete */
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
color: #5E6F9C;
font-size: 12px;
}
.tartalom a:hover { /* a táblázatban a linkek betűtípusa, betűmérete, ha ráviszed az egeret */
color: #000000;
}
--></style>

Kapcsolódó bejegyzések

lindadesign
709 megtekintés

Előző, következő cikk

Ikonok dátum és név elé külön blog modulban

Kértétek és elhoztam azt a leírást, amivel ikonokat lehet tenni a G-Portálon majdnem bárhová :) Ennek a leírása itt olvasható el. Ahhoz a leíráshoz kapcsolódik ez a rész is. Felvetettétek, hogy a név elé is szeretnétek ikont tenni. Nos

Coppermine galéria témák

Jajj, de nagyon régen nem frissítettem már. Néha időm, néha meg kedvem nincsen hozzá, de most hoztam kettő darab Coppermine galéria témát. Az egyik Alicia Vikaner-rel készült, a másik pedig Phoebe Tonkin-os. Persze a képek cserélhetőek benne :) Annyi

 

Hozzászólások