Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

CSS kód a G-Portálon
CSS kód a G-Portálon : Táblázat alakítása CSS kóddal

Táblázat alakítása CSS kóddal


Előfordul, hogy több táblázatot is használsz az oldaladon, és szeretnéd, hogy a táblázatok egységesen nézzenek ki, de ne kelljen őket külön-külön a modulban szerkeszteni. Erre találták fel a CSS kódot :)
Ez a leírás azt mutatja be, hogy egy kész táblázatot hogyan tudsz CSS-hez rendelni.

LindaDesign
Linkes szöveg kinézete
Tartalom kinézete a táblázatban Háttér a cellának

Az én táblázatomnak ez a kódja:

<table>
    <tbody>
        <tr>
            <td class="tartalom">
                <a href="//aranymeli.gportal.hu">LindaDesign</a><a href="//atispeedway.gportal.hu/"><br />
          </a>Linkes szöveg kinézete</td>
            <td class="tartalom">
                Tartalom kinézete a táblázatban </td>
            <td class="bg_tartalom">
                Háttér a cellának </td>
        </tr>
    </tbody>
</table>

Csak egy sima táblázatkód mindenféle értékek nélkül. Ugyanis az értékeket a CSS kódban adjuk meg. A te táblázatod kódjában annyit kell tenned, hogy a td után be kell másolnod egy class-t, amitől majd a CSS kód fog tudni rá hatni. Példa:  <td class="tartalom">értelemszerűen ide jön majd a szöveged</td>. A táblázat kódjában is kiemeltem, hogy miről is van szó pontosan. Nem muszáj neked is pont ezeket a class neveket adni. A tartalom helyett bármilyen másik szót is kitalálhatsz és azt írd oda. Csak arra vigyázz, hogy akkor, ami nálam a CSS kódban tartalom név alatt fut, azt neked át kell írnod arra, amit te adtál meg nevet.

<td class="bg_tartalom"> Mint látható van egy class, aminek nem csak simán tartalom a neve. Ez azért van, mert azt szerettem volna, hogy csak egy cellának legyen háttere, ne az összesnek így neki eltérő class nevet kellett megadni. Ennek a CSS-ben is külön kódot kell írni ilyenkor.

Egyébként általában az egyedi modulstílus is táblázatra épül, így azt is javaslom áttekinésre:
//aranymeli.gportal.hu/gindex.php?pg=35799649

A CSS kód

<style type="text/css">
/* táblázatos menü */
.tartalom { /* a cellák háttere, betűmérete, betűtípusa */
    font-family:Arial, Helvetica, sans-serif;
    background-color: #F3F3F3;
    padding: 6px;
    font-size: 15px;
    text-align: center;
    color: #3A3A3A;
    width: 205px;
}
.tartalom a:link, .tartalom a:visited { /* a cellában a linkek betűtípusa, betűmérete */
    font-family:Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #D32724;
}
.tartalom a:hover { /* a cellában a linkek betűtípusa, betűmérete, ha ráviszed az egeret */
    font-family:Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #000000;
}
.bg_tartalom { /* a háttérrel ellátott cella kinézete */
    color: #3A3A3A;
    text-shadow: 1px 1px 1px #ffffff;
    background-color: transparent;
    background-attachment: fixed;
    background-image: url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1261824073_45.gif);
    background-repeat: repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
    width: 205px;
}
-->
</style>

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

A legfrissebb Anime hírek , mindennap anime ajánló , mondocon képek , és hírek. Csatlakozz közösségünkhöz!    *****    Rendelj bármilyen asztrológiai elemzést,júniusban Te mondod meg,hogy mennyit szeretnél érte fizetni!Várlak az oldalamon!    *****    Egyetemistáknak kiemelt lakások eladóak. www.simonyiingatlan.hu Debrecen eladó kiváló lakások. www.simonyiingatlan.hu    *****    Egyetemistáknak kiemelt lakások eladóak. www.simonyiingatlan.hu Debrecen eladó kiváló lakások. www.simonyiingatlan.hu    *****    NÁLAM NINCSENNEK AKCIÓK, MINDEN ASZTROLÓGIAI ELEMZÉS "BECSÜLET KASSZÁS", A KONZULTÁCIÓ ÉS OKTATÁS INGYENES.    *****    **** Nokedli-lapja****Családi magazin****18-98 éves korosztály mindent megtalál itt, játékoktól a hírekig*****    *****    KÜLÖNLEGES AKCIÓ A CSILLAGJÖVÕ OLDALON JÚNIUSBAN.TE DÖNTHETED EL MENNYIBE KERÜLJÖN A HOROSZKÓP MEGRENDELÉSEID ÁRA!    *****    Minden héten anime/managa hírek , minden nap Anime ajánlók , Mondocon hírek. Itt nem fogsz unatkozni!! :)    *****    KÜLÖNLEGES CSILLAGJÖVÕ AKCIÓ JÚNIUSBAN.TE DÖNTHETED EL MENNYIBE KERÜLJÖN A SZÜLETÉSI HOROSZKÓP! VÁRLAK!RENDELD MEG MOST!    *****    Minimálbér és a garantált bérminimum összege 2019-ben    *****    Lépj be a lovak világába! Nevelj, versenyezz, szórakozz! Virtuális lónevelde, szerepjáték, olvasó sarok!    *****    Részletes születési horoszkóp, ajándék 3 év elõrejelzés, ingyenes konzultáció,tájékoztatás az oldalon! Rendeld meg most!    *****    A Világon egyetlen messengeren nézhetõ filmes oldal! NÉZZ FILMET FACEBOOK MESSENGEREN! Csatlakozz hozzánk!    *****    Outsider - Gay - Creative - Rebel - Tolerant - Furry - Brony - Hipster - Gamer - Otherkin - Geek - Autistic    *****    Ayang - Avagy milyen is a világ az én szememmel    *****    KÉRDÕASZTROLÓGIA OKTATÁS AZT ALAPOKTÓL, SAJÁT TANULÁSI TEMPÓD SZERINT - CSAK ITT!    *****    Konyhatündér blog! Egészséges, gyorsan elkészíthetõ ételek. Recept blog    *****    Konyhatündér    *****    Nokedli lapja **** Családi magazin **** Minden ami érdekelhet 18-89 éves korodig ****    *****    Nokedli-lapja *** °_|_° *** Családi magazin *** --*** Mindenrõl olvashat itt ami érdekes lehet 18-98 évesig!! ******___******