Ugrás a főoldalra!

Felhasználónév:

Jelszó:

 :: ".$_ASWC_['NAME']." ".$_ASWC_['VERSION']." ".$_ASWC_['STATUS'];?> - [Látogatók: 627656]  
Freelance Jobs

Témaköreink

 


On-line

Dev, Admin: 0
Lektorok, írók: 1
  ÷Magus|BOT
Felhasználók: 0
Vendégek: 1
Tegnap: 0
E havi:
 

Statisztika

Oktatóanyagok száma
 Publikus: 128

Legolvasottabb írónk
 outesticide 291297

Legszorgalmasabb írók
1. balymo 24
2. outesticide 20
3. tipli 19
4. adrob 18
5. akciolap 15

Legolvasottabb címek
1. CSS
Egyszerü vízszintes menü és vízszintes menü legördülő almenükkel [49405]
2. CSS
A pozícionálás, és a z-index [26226]
3. CSS
Függőleges menü, legördülő almenüvel [20637]
4. CSS
Függőleges menü készítése listából [20428]
5. CSS
Bevezetés a CSS alapjaiba [19628]
 

 

CSS -> Megjelenítés, pozícionálás és a körülfofyatás

Író: outesticide ( outesticide@netoktato.hu )
  http://vajdasag.rs
Készült: 2005-04-13 22:43:40
Lektorálta: outesticide
Lektorálva:
2005-10-01 12:57:56 [14962]
A CSS lehetőséget ad a különböző elemek elhelyezésére, a szöveg, egy adott elem körüli körülfolyatására.
Ezáltal biztonságosabban jeleníthetjük meg oldalainkat különböző felhasználóknál, és egyszerűbbé is válik oldalaink szerkesztése.

1. A dobozok (DIV)



Képzeljük el a DIV-eket egy doboznak, amellyet bármilyen tartalommal (kép, szöveg...) töltünk fel amire szükségünk van.
Ugyanakkor nem muszály feltöltenünk sem, hiszen jól jöhet egy üres DIV helykitöltésre is.
Elhelyezésüket mi szabjuk meg, és egymástól függetlenné is tehetjük őket. Méretet, színt adhatunk neki, mint bármely más HTML elemnek.

Mint említettem egy előző cikkben érdemes a design kialakításánál, a honlap szerkesztésénél keretszínt adni neki, és így könnyen meghatározhatjuk mi, hova kerül az oldalon.
Itt megemlíteném egy nagy előnyét a DIV-nek: ha IFRAME-t vagy FRAME-et használsz a keresőprogramok nem veszik be ezek tartalmát a találatok közé; ha DIV-et alkalmazol akkor viszont igen.
Ezen kívül, még rengeteg előnye van. Ha használjátok, ti is rá fogtok jönni.
A HTML kódja <DIV id=""></DIV> itt az ID egy egyedi azonosító, amellyel később a CSS-ből elérhetjük a következő módon:
#divazonosító{
      tulajdonságok...
}

(ID megadása nem kötelező, de ha valamilyen tulajdonságot, vagy tulajdonságokat csak erre a DIV-re szeretnél alkalmazni, akkor meg kell adni)

2. A doboz (réteg) megjelenési tulajdonságai



A doboz számtalan tulajdonsággal rendelkezik, hiszen egy igen alapvető, általános elem. Tömören összefoglalva a következő tulajdonságokat alkalmazhatjuk.
Beállíthatjuk méretüket, keret-, szegély-, margótulajdonságaikat, a tartalom-, háttértulajdonságaikat, láthatóságukat, átlátszóságukat (egyes böngészők esetében).

height: magasság
width: szélesség
padding: szegély
margin: margó
border: keret
background: háttér (lehet kép, vagy csak szín)
font: a tartalom szövegtulajdonsága

A fentiekről az előző cikkekben már volt szó. Most két olyan tulajdonság következik amiről még nem.
A láthatóság
Szintakszisa:
visibility:

Értékei:

hidden:rejtett, tehát nem látható az adott elem
visible: látható az adott elem

Az átlátszóság
Szintaksziksa
opacity:

Értékei:

.1
.2
.3
.4
.5
.6
.7
.8
.9

A szám természetesen nemcsak 5 lehet. Kilenctől egyig alkalmathatók a számok.
Minnél kisebb a szám, annál átlátszóbb lesz az adott elem.
Ám ez Internet Explorer alatt nem megy így. A következőt kell használnunk:
filter: alpha(opacity=50);

Itt az opacity értéke nullától 100-ig bármilyen szám lehet. Szintén minnél kisebb a szám annál átlátszóbb.
(Opera ezt a tulajdonságot nem támogatja.)

display: a doboz típusát határozza meg
Értékei:

inline: az elem (egy vagy több) soron belüli dobozban fog elhelyezkedni
block: az elem megjelenése blokkszintű lesz
list-item: az elem listaként jelenik meg
table: táblázatszerű elhelyezkedés
none: a doboz nem jön létre


Az adott doboz tartalmának kilógását, túlcsordulását az
overflow: tulajdonsággal szabhatjuk meg.

visible: a tartalom megjelenik, teljes méretében
hidden: a tartalom kilógó részei nem jelennek meg
scroll: a tartalom a dobozban marad, és görgethető lesz
auto: a böngésző állítja meg az overflow értékét


2. A pozícionálás



Talán ez a legfontosabb, és leghasznosabb dolog amit csinálni lehet egy DIV-vel, de akár az összes többi elemel is.

1. Egy réteg elhelyezkedését a position: tulajdonsággal érhetjük el. Lehetséges értékei:
absolute: (Lásd: "Méretek és mértékegységek" c. cikkben)
relative: (Lásd: "Méretek és mértékegységek" c. cikkben)
fixed: a réteg elhelyezése absolute módon történik, viszont rögzítve van, tehát nem gördül együtt a tartalommal. Figyeljünk arra, hogy mihez képest rögzített az adott elem.
A fixed és absolute tulajdonság esetében a réteg, a többi elemtől függetlenül helyezkedik el.
A fentiek csak a DIV eltolásának, elhelyezkedésének tulajdonságát határozza meg. Ez még nem elég magában egy doboz megfelelő helyre való pozicionálására.

2. Miután a fenti position tulajdonságot beállítottuk, elkezdhetjük a megadott helyre való pozicionálását a rétegnek.
Ebben szerepet játszhat a margó és a kitöltési-, illetve keret szélesség.
A doboz függőleges eltolását a top illetve bottom tulajdonággal állíthatjuk be.

top: az oldal felső részétől számított távolság
bottom: az oldal alsó részétől számított távolság

A doboz vízszintes eltolása.

left: bal oldali távolság az oldal szélétől számítva
right: jobb oldali távolság az oldal szélétől számítva

Értékeik számok, általában pixelbe mérve.
Vigyázzunk a fenti tulajdonságokkal, hisz nem mindig az oldal széleit veszik alapul.
Ha egy dobozt beteszel egy másik dobozba, akkor azt a külső dobozhoz(amibe van) képest kell elhelyezned.
#doboz1{
      background-color: #CCCCCC;
      height: 200px;
      width: 200px;
      position: absolute;
      top: 100px;
      bottom: auto;
      left: 100px;
      right: auto;
}
#doboz2{
      background-color: #FF0000;
      height: 100px;
      width: 100px;
      opacity: .5;
      filter: alpha(opacity=50); /* IE miatt */
      position: absolute;
      top: 50px;
      bottom: auto;
      right: auto;
      left: 50px;
}

A HTML forrás:
<div id="doboz1">
  <div id="doboz2">
  </div>
</div>

A legkülső DIV a "doboz1", az oldal tetejétől és bal oldalától 100px-re van, absolut pozicionálással.
A benne lévő "doboz2" DIV félig átlátszó, absolut pozicionálással a "doboz1" tetejétől és oldalától 50px-re van.

3. A dobozok olyan sorrendbe helyezkednek el az oldalon, amilyen sorrendbe megadtuk őket a HTML-ben.
A legelső lesz legalul, és az utána következők mind egymás fölé rendeződnek.
Tételezzük fel hogy egy adott DIV-et félig el akarsz takarni egy másikkal.
Ehhez szükséged lesz a z-index: tulajdonságra.
Értékei mértékegység nélküli egész számok. A legfelső doboz z-indexe például 0, akkor a többi dobozé 1 és 2.
Minél kisebb a szám, annál lejjebb helyezkedik el.
#doboz1{
      background-color: #CCCCCC;
      height: 200px;
      width: 200px;
      position: absolute;   
      top: 100px;
      bottom: auto;
      left: 100px;
      right: auto;
      z-index: 1;
}
#doboz2{
      background-color: #FF0000;
      height: 100px;
      width: 100px;
      opacity: .4;
      filter: alpha(opacity=40); /* IE miatt */
      position: absolute;
      top: 50px;
      bottom: auto;
      right: auto;
      left: 50px;
      z-index: 0;
}

A HTML forrásban a két doboz egymás alatt van.
A CSS tulajdonságaik ugyanazok, mint az előző példában, csak mivel itt nem egymásban vannak hanem egymás alatt (tehát a második lenne felül alaphelyzetben) a z-index tulajdonsággal megváltoztattuk sorrendjüket.

3. A körülfolyás



Tételezzük fel hogy a szövegbe képeket akarunk elhelyezni, úgy hogy szavak közvetlen a kép mellett maradjanak, tehát körülfollyák.
De jól jöhet iniciálék használatakor is.
Ezt a float: tulajdonsággal érhetjük el.
Értékei:

left: az elem balra tolódik, a szöveg az elem jobb oldalán folyik (fentről lefelé)
right: jobbra tolódik, a szöveg bal oldalt folyik le
none: nem történik körülfolyás

Ha a float tulajdonság hatását meg akarjuk szüntentni akkor használjuk a clear: beállítást.
Értékei:

left: a float left hatását megszünteti
right: a float right hatását megszünteni
both: minden float tulajdonság hatását érvényteleníti
none: alapbeállítás, az adott elemre kihatással lesz a float
* Minden további kérdéseddel fordulj az anyag írójához.

 

Hello Vendég

Az oktatóanyagok olvasásához be kell jelentkezned.

Szeretnék regisztrálni.

Elfelejtettem a jelszavam!
Kiküldöm magamnak!