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 : Szélső modulnak egyedi modulstílus táblázat nélkül

Szélső modulnak egyedi modulstílus táblázat nélkül


FONTOS, ha a szélső modult feljebb szeretnéd helyezni!

Ha elkészítetted a fejlécedet, akkor NE töltsd fel a Stílus és Felületben a fejléc részhez!!! Töltsd fel a képet rendesen egy képtárba az oldaladon. Mondjuk egy olyan képtárba, amit alapból a design kellékeidnek hoztál létre. Ha feltöltötted akkor a CSS kód body részébe kell beilleszteni ugyanoda, ahova a rendes hátteret is szoktad tenni. A body rész kb. így nézzen ki:

<style type="text/css">
body {
background-attachment: scroll !important;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
background-image: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery
/1393355368_69.png
), url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery
/1393528647_74.png
);
background-color: #e8e9e8;
background-position: center top, center top;
background-repeat: no-repeat, repeat-y;
}
--></style>

A body részben a hátterek elrendezése leírásáról itt olvashatsz: Több háttér oldaladnak CSS-el

Egy kicsivel ezzel a kóddal leegyszerűsítjük az egyedi modulok használatát G-Portálon. Eddig is lehetett használni egyedi modulstílusokat itt, csak eddig ezt táblázattal oldottuk meg. Ezentúl táblázatkód nélkül is simán megoldható méghozzá úgy, hogy a szélső és középső moduloknak is más-más egyedi modulstílust állítunk be. Ebben a leírásban most a szélső egyedi modulstílus használatát írom le.
A középső egyedi modul leírása pedig itt olvasható:
Középső modulnak egyedi modulstílus táblázat nélkül


Kattints a képre a teljes mérethez!

Az egyedi modulstílus készítéséről itt, a három részre vágásról pedig itt olvashattok.
Ha meg van a három rész a modulstílusból (fejléc, tartalom, lábléc) akkor töltsd fel egy képtárba a G-Portálon a képeket vagy egy olyan tárhelyre, ami neked szimpatikus. A három kép url címét pedig a CSS kódban a megfelelő url címnél le kell cserélni. Ez egyértelműen kitűnik a kódban.

CSS kód leírása

Ez a rész akkor kell csak, ha azt szeretnéd, hogy a modulok a lap tetejéről induljanak. Lásd a képen. Ha nálad marad minden a régiben, akkor erre a kódrészre nincsen szükséged.

td.sitecol:nth-child(1) {
position: relative;
top: 10px;}

Itt kell megadni a modul szélességét. Ez mindig nagyobb érték legyen, mint az egyedi modulod (amit megcsináltál képszerkesztőben) szélessége! A háttér ilyenkor értelemszerűen átlátszó legyen, az-az transparent.

.column_side {
width: 350px;
background-color: transparent !important;}

És innen jön maga a modulstílus. Először a fejléc képet kellene beilleszteni a kódban az URL címben a zárójelek közé. A width és height értékeket is töltsd ki a biztonság kedvéért. A width a modulfejléc képed szélessége, a height pedig a magassága. A padding-nál tudod beállítani a modulcímek helyzetét.

.column_side td.modtitle{
font-family: book antiqua;
font-weight: normal;
text-align: left;
font-size: 24px;
color: #000000;
background-color: transparent;
background-image: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1405355273_09.png);
background-repeat: no-repeat;
width: 330px !important;
height: 234px;
padding: 0 0 88px 30px;}

A következő a tartalmi rész. Ide jön a háttér képed, ahova a tartalmat írod majd. Itt is cseréld az URL címet. A padding beállítással tudod azt állítani, hogy a tartalom mennyivel dobódjon el befelé a háttér szélétől. Itt igazából ennyi. Persze a tartalom kinézetét is megváltoztathatod benne, ha ez nem megy a te modulodhoz.

.column_side td.modbody{
background-color: transparent;
background-image: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1405355266_21.png);
background-repeat: repeat-y;
font-family: book antiqua;
font-size: 16px;
color: #ffffff;
line-height: 17px;
text-align: justify;
padding: 0 20px 0 15px;}

És végül kell egy lábléc is. Ahhoz erre a kódra lesz szükség. Itt is írd át az URL címet és a lábléced szélességét és magasságát is add meg inkább. A padding-bottom arra való, hogy az egymás alatti két modul között mennyi legyen a távolság. Mindig nagyobb értéket kell megadni, mint a lábléced magassága!

.column_side td.modbottom{
background-color: transparent;
background-image: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1405355258_89.png);
background-repeat: no-repeat;
width: 330px !important;
height: 224px;
padding-bottom: 254px;}

A background-repeat-oknál és a background-color-oknál nem kell semmit sem megváltoztatnod. Az mindenhol maradjon úgy, ahogy ebben a kódban is van.

CSS kód

<style type="text/css">
td.sitecol:nth-child(1) {
position: relative;
top: 10px;
}

.column_side {
width: 350px;
background-color: transparent !important;
}

.column_side td.modtitle{
font-family: book antiqua;
font-weight: normal;
text-align: left;
font-size: 24px;
color: #000000;
background-color: transparent;
background-image: url(http://aranymeli.gportal.hu/
portal/aranymeli/image/gallery/1405355273_09.png);
background-repeat: no-repeat;
width: 330px !important;
height: 234px;
padding: 0 0 88px 30px;
}

.column_side td.modbody{
border-bottom: 0px solid #dfb598;
background-color: transparent;
background-image: url(http://aranymeli.gportal.hu/
portal/aranymeli/image/gallery/1405355266_21.png);
background-repeat: repeat-y;
font-family: book antiqua;
font-size: 16px;
color: #ffffff;
line-height: 17px;
text-align: justify;
padding: 0 20px 0 15px;
}

.column_side td.modbottom{
background-color: transparent;
background-image: url(http://aranymeli.gportal.hu/
portal/aranymeli/image/gallery/1405355258_89.png);
background-repeat: no-repeat;
width: 330px !important;
height: 224px;
padding-bottom: 254px;
}
--></style>

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

Nem lehet saját lovad? Nevelj virtuálisan ITT! Nevelj, versenyezz, licitálj szebbnél szebb lovakra!    *****    -Portálépítés és portáldíszítés kezdõknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!-    *****    The Resident - A kórházi drámasorozat január 21-én indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!    *****    Mindenféle kérdésedre õszinte választ kaphatsz a valódi Kérdõasztrológia segítségével.    *****    Részletes személyiség és sors analízis / születési horoszkóp / ajándék 3 év elõrejelzéssel. Most érdemes ide látogatni!!    *****    Ha diplomás asztrológust keresel, aki BECSÜLET KASSZÁS alapon ad tanácsot és INGYEN OKTAT, akkor keress bizalommal!    *****    A BIOTÉRKÉP AZ IGAZI KARMA! MEGMUTATJA PONTOSAN,MILYEN FELADATTAL SZÜLETTÉL.EGY PRÓBÁT MEGÉR. SOK SEGÍTSÉG MINDEN NAP!!!    *****    Megnyitott a madárvendéglõ! Gyertek vendégségbe ti is Mályvához és Pipitérhez! Irány a Mesetár!    *****    Megnyitottam cikkes, véleményes blogomat! Sok-sok érdekes bejegyzéssel várlak naponta, ne hagyd ki! - Alice    *****    Sztárokról és idolokról írok,ajánlókat hozok,tippeket és tageket osztok meg veletek!Nézz be egy blogkóros lány oldalára!    *****    Az igazi karma a horoszkópodban a Felszálló holdcsomópont,a Chiron,a Lilith (Fekete Hold),Rendeld meg most!Várlak, katt!    *****    családi adókedvezmény 2018 nyomtatvány letöltés, feltételek tudnivalók    *****    Rendelj születési horoszkópot és 3 év elõrejelzés ajándékba a tiéd. Ne feledd a horoszkóp a lélek tükre,bele kell nézni!    *****    családi pótlék utalás 2018 - csp utalás - utalás idõpontja 2018 - családi pótlék kifizetések !    *****    Ismerd meg az Olicity párost! Minden a Zöld Íjász címû sikersorozat imádott szerelmespárjáról! Mindennap friss!    *****    SZEREPJÁTÉK! Ha aktív oldalon szeretnél játszani, nézz be és légy része egy egyedi történetnek! Csatlakozz!    *****    Karácsonyi képekkel vár a Mesetár! Kukkants be a két nyuszihoz és Miska macskához! Boldog ünnepeket kíván: Nyuszi Mama    *****    Kellemes Karácsonyi Ünnepet és Békés, Boldog Új Esztendõt Kívánok minden Kedves látogatómnak!    *****    Kellemes Ünnepeket kíván Neked is a Zara Larsson Magyarország! - Kellemes Ünnepeket kíván Neked is a Zara Larsson HU!    *****    The Resident - A FOX kórházi drámasorozata januárban indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!