CSS kérdésem van

[Garono]

Az is beletartozik, ha megnézed a HTML kódot, amit bemásoltam ide.

 

Szerk.: ohh, hülye vagyok, az nem tartozik bele. Csak a képen hírtelen úgy láttam, hogy a keret az hozzá tartozik az elsõhöz... mindegy.

 

Mindjárt megkeresem azt is.

 

[Garono]

Az meg így lesz:

<h2 id="post-100" class="storytitle"><a href="http://sanziblog.extra.hu/?p=100" rel="bookmark" title="Permanent link to Lehetett volna rosszabb is. Mondjuk ha meghaltam volna…">Lehetett volna rosszabb is. Mondjuk ha meghaltam volna…</a></h2>

 

.storytitle {
    float: left;
    margin: 0;
}

.storytitle a, .meta a, .feedback a, .commentauthor a, .commentmeta a, #comments a {
    text-decoration: none;
}

Na, így már megvan az elsõ is.

 

[Sanzi]

Köszi, megtaláltam. Bocs, csak éppen most próbálnám tanulgatni kevés sikerrel...

[Garono]

Pedig nagyon könnyû! Nézegesd azokat az oldalakat, amiket nagygabornak linkeltem be!

[tamasir]

@Garono!

Ez tanulságos volt! Jók ezek az oldalak! És végre magyarul!

[Garono]

Új CSS cikk a Weblaboron!

[Garono]

Ugye a height és a width tulajdonságnak meg lehet adni %-os értéket?

 

Ha igen, akkor valami nem sikerál, mert heightnek hiába adok 100%-ot, 0px magas lesz.

 

CSS:

#felso {
   background-color: black;
   height: 300px;
   width: 600px;
}
#kozepso {
   background-color: black;
   height: 100%;
   width: 600px;
}
#also {
   background-color: black;
   height: 100px;
   width: 600px;
}

 

 

HTML BODY:

<div id="felso"></div>
<div id="kozepso"></div>
<div id="also"></div>

 

Ja és MiniDisc, most nem azt kell nézni, hogy szabályos-e a kód, ez csak egy összedobott példa.

 

Szerk.: próbáltam úgy is, hogy egyetlen egy DIV van, és annak adok 100% magasságot, de semmi.

 

[Kovács Gyula (MiniDisk)]

divnek nem adhatsz %-os értéket. Vagy fix px érték - és akkor akkora lesz amekkorára beállítottad - , vagy semmit, és akkor a tartalom állítja be.

[Garono]

Hm. Ha width-nek adok meg %-os értéket, az mûködik.

[Kovács Gyula (MiniDisk)]

Egy darabig igen. De aztán csak problémát fog okozni.

[Garono]

De mindegy, nekem height-ben kellett volna.

 

Hogy nekem mennyi eszem van már megint! Máshogy is meg lehet csinálni, amit akarok.

[MacroGeri]

Lenne egy kérdésem CSS2-vel kapcsolatban. Melyik böngészõ ismeri a CSS2-t? Mert az IE-n kívül nem nagyon támogatják a CSS1-et sem. A FireFoxban is tehetnének már lépéseket ezzel kapcsolatban a fejlesztõk...

[Kovács Gyula (MiniDisk)]

Már megbocsáss, de pont hogy a Firefox támogatja legjobban a CSS2-t. Sõt, már a még nem is igazán létezõ CSS3-at is. Csak egy plda: Próbáld ki a border-radius-t, és rájöhetsz magad is. Egyébként ilyen téren az Internet Explorer 7-esben van némi elõre lépés a 6-oshoz képest, ami igazából CSS1.5-t támogatott. (Tudom, ilyen nincs, de sok mindent nem értett meg, pár dolgot meg igen.)

[payskin]

MacroGeri, hogy jutottál erre a következtetésre?

 

Az IE6 valóban támogat néhány dolgot a CSS2-bõl, azonban a szabványkövetése csapnivaló. Az egész webdesigner közösség emiatt szív 5 éve... Megcsinálják az oldalt Firefoxon vagy Safarin (ez a két böngészõ a leghûbb a CSS2 szabványhoz), esetleg Operán, aztán utána jöhetnek a különbözõ 'IE6-hackek', hogy azon is jó legyen. Tragédia. Valóban, az IE7 e téren hoz majd egy kis változást.

[Kovács Gyula (MiniDisk)]

Valóban, az IE7 e téren hoz majd egy kis változást.

Hozott, hozott. De arra is kell hack. Sajnos. Bizonyos esetekben, nagyobbat - látványosabbat - hibázik, mint az IE6-os. Ami elsõre szembetünik az IE7-nél, hogy a border hovert kezeli.

 

[Balintos]

Elég béna kérdés, de a ccs-s kódokat közvetlenül kell beilleszteni a forráskódba? Vagy egy .xls dokumentumon keresztül és ha azon keresztül akkor hogy illesztem be?

[Kovács Gyula (MiniDisk)]

Nem kell sehova sem beilleszteni. Fõleg nem .xls-be. Csinálsz egy valami.css fájlt, és ebbe írod a definíciókat. A weboldal headjeben pedig hivatkozz rá:

<link href="valami.css" type="text/css" rel="stylesheet">

[Garono]

Puff, megint falba.

 

HTML BODY:

<div id="tegla"></div>

CSS:

#tegla {
   background-color: black;
   height: 50px;
   margin: auto auto 15px auto;
   width: 100px;
}

 

Most ugye alulról 15 pixelre kéne lennie a "tegla"-nak? Mert sehogy sem sikerül. Probáltam minden oldalról külön-külön (margin-bottom: 15px), úgy sem jó. Jobb oldalra sikerült, de alulra nem. ír:

 

Mi lehet a hiba?

 

[Kovács Gyula (MiniDisk)]

Olyan, hogy auto auto 15px auto, nincs. Olyan van, hogy 0 auto 15px auto

[Garono]

Nade így se jó!

 

Szerk.: bár most szerintem nagy hülyeséget mondtam, mivel ha egyik helyrõl 0 a másikról 15px, akkor kizárják egymást.

 

[payskin]

De ez nem azt jelenti, hogy alulról 15 px-re kéne lennie a téglának, hanem hogy a tégla alatt van 15 px margó.

[Kovács Gyula (MiniDisk)]

 

Te most egy ilyesmit csináltál. A piros keret azért ekkora, hogy érzékeltessem a margin határokat. Lefelé-15px az lefelé csinál a div alatt egy 15 px üres helyet.

[Garono]

De ha ezt csinálom, akkor miért lesz jobb oldalon?

#tegla {
   background-color: black;
   height: 50px;
   margin: 0 15px auto auto;
   width: 100px;
}

 

[Kovács Gyula (MiniDisk)]

Mert egyrészt a 0 15px 0 auto megoldást kell beírni. Másrészt a 15 px a right-hoz van írva. Auto értéket csak a right és left vehet fel.

Így néz ki a beállítás: (óra mutató járásával megegyezően):

top right bottom left
  0 15px   0    auto

[Garono]

Ezt eddig is tudtam, de most sem értem. Ugyan azt csináltam jobbra is, mint alulra, de jobbra megjelenik.

 

Na mindegy, akkor azt mondd meg, hogyan kell alulra rakni azt a nyomorult DIV-et. Körülbellül úgy, mint itt a menü, csak alulra.