CSS kérdésem van

[payskin]

A

KHÖMM! Mintha tegnap megbeszéltük volna...

 

@tamasir:

 

1. Ne állj át táblázatról div-re! Szét fog esni az egész oldalad, beleőszülsz, akkor sem csinálod meg. A table, tr és td tageket formázd meg CSS-ből.

 

2. A classok nevében ne használj szóközt (.első tb), legyen tábla1, tábla2...

 

 

 

[Kovács Gyula (MiniDisk)]

Nem beszéltünk meg semmit, ugyanis még nem modtad, hogy akkor mikor is kell használni a class-t, illetve az id-t. Én továbbra is állítom, hogy nekem van igazam. Te jössz.

 

Más: a szóköz helyett a _ miért nem jó?

[payskin]

Jó az aláhúzás a szóköz helyett.

 

Azt valóban nem beszéltük meg, hogy mikor kell használni classt, és mikor id-t. Azt beszéltük meg, hogy attól, hogy id-ból csak egy lehet, az még nem jelenti azt, hogy a class-ból kötelezõen többnek kell lenni. Id-t akkor használunk, ha a html oldal egy bizonyos elemét egyénileg akarjuk azonosítani valamiért. Classt pedig minden más esetben, az általános, azonos tulajdonságokkal rendelkezõ elemeknél. (Ami megint csak nem jelenti azt, hogy több ilyen elemnek kell lennie.)

[Kovács Gyula (MiniDisk)]

Nem kell többnek lennie, mert mûködik, de akkor szokás használni. Tehát ha egy van, akkor id. Persze, attól még mûködik a class is. Én soha nem állítottam, hogy nem fog mûködni. De nem úgy kell. De végül is egyrõl beszélünk akkor.

[payskin]

Szerintem ez pusztán gondolkodás kérdése. Amikor rakom össze az oldalt, nagyjából tudom, hogy mik azok az oldalelemek (például szövegdobozok, bekezdésformázások stb.), amelyekből valószínűleg többet is fogok használni, és ezeket automatikusan osztályként definiálom. Lehet, hogy nem lesz belőlük több, lehet, hogy egy sem lesz belőlük, ezzel abszolút nem foglalkozom.

 

Ugyanakkor vannak az oldalnak kiemelt, egyedileg azonosításra kerülő részei, például a befoglaló (wrapper) div, az oldal felosztásához használt oszlopok divjei. Ezeket nem azért definiálom id-vel, mert egy van belőlük, hanem mert így különböztetem meg a többitől. Van olyan divem, aminek sem id-ja, sem osztálya nincs. A másik lehetőség, hogy az adott egyedi oldalelemet el kell érnem JavaScriptből, ilyenkor szintén id-t használok, hogy a document.getElementById paranccsal meg tudjam címezni.

 

Szóval, nem úgy írok CSS-t, hogy ebből egy lesz, akkor ez id, ebből több lesz, akkor class. Hanem úgy, hogy ez egy általános elem --> class. Ez egy kiemelten fontos elem --> id.

 

Fogalmazhatunk úgy is, hogy az oldalszerkezeti elemeket definiálom id-vel, és a formázásokat class-szal.

[Kovács Gyula (MiniDisk)]

Legyen. Meg tudnám cáfolni, de nem teszem, mert az már egy magasabb szintje a webszerkesztésnek, és Tamásir-t meg nem hinném, hogy érdekli.

[tamasir]

Gyula! Nem magamtól találtam ki border-pading kifejezést. Egy angol stíluslapról próbáltam összeszedni. Ha el tudnám a CSS-t magamtól készíteni, nem fórumban, irogatnék, és nem kérnék segítséget. Én laikus azt hittem és hiszem, hogy azért van a fórum, hogy aki többet tud, az segít azoknak, akik tanulni szeretnének.

 

Arra szeretnélek meg kérni Bennetek, hogy erre a két tábla sorra írjátok meg, konkrétan, hogy jó e az, amit itt leírtam.

Ez van most:

 

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"  width="800" height="10">

CSS-ben ezt kell?

 

#table1 {
border: 1px solid #181818;
padding: 0;
margin: 0;
border-collapse: collapse;
width: 800px;
height: 10px;
}

Ez van most:

 

<table border="1" cellpadding="2" cellspacing="2" style="border-collapse: collapse"  width="100%" bordercolor="#181818">

CSS-ben ezt kell?

 

#table2 {
border: 1px solid #181818;
padding: 2;
margin: 2;
border-collapse: collapse;
width: 100%; 
}

A body rész:

 

<table class="table1"> </table>
<table class="table2"> </table>

Így már megfelelő lesz?

[payskin]

Nem gondolom, hogy a témának bármi köze volna tamasirhoz. Viszont kíváncsi volnék a cáfolatra.

 

Valamint bedobnék még egy dolgot a "közösbe", kíváncsi volnék, hogy fér bele a "világképedbe" az olyan oldalelem, aminek egyszerre van id-ja és osztálya?!

 

tamasir: nem lesz jó!

 

A cellpadding és a cellspacing értékek, bár a table tagben vannak definiálva, a td elemekre vonatkoznak, azaz a táblázat cellái közötti távolság (cellspacing) és egy cellán belül a kerettõl való távolság (cellpadding). A table-re beállított osztályban definiált margin és padding nem azonos ezzel a két fogalommal, ezeket egy td-re definiált osztályban kéne beállítanod.

 

.td1
{
   margin: 2px;
   padding: 2px;
}

Valószínûleg ugyanez a helyzet a borderrel is. A tábla osztályában beállított border a tábla körül definiálja a keretet, ettõl a celláknak még nem lesz kerete. (Legalábbis így volna logikus, bevallom, nem nagyon stílusoztam még táblákat.)

 

Továbbá figyelj oda, hogy a CSS-ben id-t definiálsz, de a HTML-ben class-t adsz meg! Definiálj a CSS-ben is classt! (Nem #, hanem .)

 

Tehát ez alapján:

 

<table border="1" cellpadding="2" cellspacing="2" style="border-collapse: collapse"  width="100%" bordercolor="#181818">

én ezzel próbálkoznék:

 

.table2
{
    width: 100%;
    border: 1px solid #181818;
}

.td2
{
    margin: 2px;
    padding: 2px;
    border: 1px solid #181818;
    border-collaps: collapse;
}

[Kovács Gyula (MiniDisk)]

Sehogy. Vagy ez, vagy az.

A cáfolat mindössze annyi, hogy főbb div, vagy table elemeket is meghatározhatok class-al, ha több van belőlük. Illetve pl. az általad említett adatimportálást is meg lehet valósítani class-al, ha több helyre akarom kiiratni, és ettől még lehet fontos szerkezeti elem. Minden csak oldalszerkezet kérdése.

Tamasir: Igazad van, azért van a fórum, hogy kérdezz. Válaszoltam is, hogy alapvető css ismereti hiba. Nem azt mondtam, hogy minek kérdezel ... De akkor én kiszállok a dologból.

[tamasir]

Gyula! Kérlek ne sértődj meg. Eddig is Ti segítettetek, de nagyon sokat. Így értem el, hogy ma az oldalam CSS-e valid. Nem szeretném elrontani. Hanem a HTML részt is szeretném, ha valid lenne. Egy amerikai szatellit statisztika képei szerint nap mint nap Japántól, Kínán, Európa több országán, Canadán keresztül Dél-Amerikáig nézik az oldalamat. Veletek meg szeretném tartani a távoli kapcsolatot. Lehet, hogy elkeseredésemben rosszul fogalmaztam. De térjünk vissza az alapvető kérdéshez.

 

Balázs meg próbálom. Kösz.

[payskin]

Sehogy. Vagy ez, vagy az.

Na, látod, itt az alapvető tévedés. A két dolognak semmi köze egymáshoz, azaz simán formázhatsz egy oldalelemet osztállyal, és azonosíthatod id-vel. Persze formázhatod és azonosíthatod kizárólag id-vel. De nem formázhatod és azonosíthatod kizárólag class-szal, mivel a class nem erre való.

 

Érdemes megnézni például a GameSpot CSS-eit, ott gyönyörűen látszik ez a technika: több különböző CSS-t is használnak, ugyanis teljesen szétválasztják az oldal felépítését, szerkezetét (layer.css szinte csak id-definíciókból áll), a formázástól. Utóbbi van a standard.css-ben, ahol részbem a korábban definiált id-khez tartozó formázások vannak (tehát használják formázásra is az id-t, nyilván csak ezért nem fog külön classokat definiálni), valamint a közös elemeket definiáló classok és az id-k összepárosításai.

 

Mi értelme volna azonos funkcióra (formázás) két különálló formázóelemet alkotni pusztán az elemek előfordulásának száma alapján? Azért a W3C sem hülye!

 

tamasir: milyen többi? Olvasd el, amit írtam, párszor átszerkesztettem azóta. Bocs!

[Kovács Gyula (MiniDisk)]

Mi értelme volna azonos funkcióra (formázás) két különálló formázóelemet alkotni pusztán az elemek előfordulásának száma alapján? Azért a W3C sem hülye!

Tényleg nem hülye, de elég sok ilyen "mi értelme lenne" dolog van a mostani css-ben, ami eddig pl. nem volt, ugyanis a w3c erőteljesen készül a css3-ra, és abban már benne lesz. (Pl. a border kerekítése, ami css-ben már most is megy, de hivatalosan csak a css3-ban lesz benne.) De mondom, legyen úgy, ahogy mondod, én részemről lezártam az id-class témát.

[tamasir]

Bocs! De én is félig olvastam el amit írtál. Az eszmefuttatásra figyeltem jobban. Köszi.

[Darcy Tucker]

Sziasztok,

 

Kérem, valaki vessen egy pillantást a készülõ új honlapomra. Sehogy sem tudok rájönni, hogy hogyan tudnék a fõ szövegrész mellé jobb oldalra beszúrni egy másik szövegdobozt (a fehér hátterû rész jobboldalon lévõ, még üres hasábjáról van szó), úgy hogy nem essen szét az egész oldal.

 

URL: http://uhrinyidaniel.uw.hu/about.html és http://uhrinyidaniel.uw.hu/ref.html

 

Valamint, tudván, hogy az IE nem igazán felel meg a W3C elõírásainak, miért van az, hogy az oldalamon a footer és a navbar felett és alatt egy pár pixeles csík van, ami nincs a Firefoxban, sem az Operában? És persze, nem is terveztem, hogy az ott legyen.

 

A válaszokat elõre is köszönöm.

 

Utólag: Ja, és a http://uhrinyidaniel.uw.hu/ref.html oldalon a kép keretét miért nyújtja ki egészen a szövegdoboz jobb széléig és a címsor aláhúzását úgyszintén?

[tamasir]

Balázs! A html-nél amit javasoltál, végrehajtva. JÓ!!!. A bordercolort töröltem, ahogy javasoltad és a Gyula szerinti kóddal, kissé át variálva, megírtam CSS-ben. Valid az oldalam index.php-je!

 

Gyula! Neked is köszönöm!! Kérlek a tegnapiért ne neheztelj rám! Várom továbbra is a Te segítségedet is.

[tamasir]

Okulás képen! Hátha valakinek egyszer jól jön.

A Validator ezt e kódsort megkifogásolta:

<table border="1" cellpadding="2" cellspacing="2" style="border-collapse: collapse"  width="100%" bordercolor="#181818">

<bordercolor="#181818"> nem fogadta el. Css-hez kellett fordulnom. A kapott tanácsoknál, az Opera nem jelenítette meg rendesen a keretet. Végül ezt próbáltam ki, és bevált. IE, Fox, és az Opera is egyformán jeleníti meg.

 

<style type="text/css">
.table0 {
border: 1px solid #181818;
}
</style>
</head>
<body>
<table class="table0" cellpadding="2" cellspacing="2" style="border-collapse: collapse"  width="100%">

<table class="table0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"  width="478"  align="center">

 

Ezzel a megoldással a tábla középre helyezését is meg tudtam oldani és Valid a megoldás.

[Kovács Gyula (MiniDisk)]

Gratulálok, örülök hogy sikerült.

[h.arpad]

<bordercolor="#181818"> nem fogadta el. Css-hez kellett fordulnom.

Ez az, amit kezdettõl fogva javasoltunk.

 

[nagygabor]

Tudtok ajánlani egy jó css oktatóanyagot, amibõl meg lehet tanulni?

[Garono]

Persze!

[Sanzi]

A Blogomban van egy CSS formázás, de a css fájlból nem tudok rájönni, hogy melyik rész rejti a számomra szükséges formázás paramétereit.

Blogom címe: http://sanziblog.extra.hu A kép, hogy melyik részekre gondolok: >>>KATT<<< És a formázást tartalmazó css fájlt: >>>KATT<<<

Köszönöm a segítséget!

[Garono]

A meta class-be tartozik:

<p class="meta">Posted in <a href="http://sanziblog.extra.hu/?cat=1" title="Összes bejegyzés a(z) Semmi különös kategóriában" rel="category tag">Semmi különös</a> at 8:55 > sanzi</p>

.meta {
    margin: 0;
    padding: 0.5em 0 0 3em;
}

.meta, .feedback {
    clear: both;
    font-size: 0.9em;
    color: #999;
    background: url(images/deco.gif) no-repeat bottom left;    
}

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

 

[nagygabor]

Köszi, azt én is megtaláltam. Esetleg más?

[Garono]

Ez a legjobb! Én ebbõl tanultam meg.

 

Szerk.: 1, 2, 3.

 

[Sanzi]

@Garono

Köszi! Sikerült.

És az, amit elsõnek "karikáztam" be? Bocs, hogyha hülyeséget mondok, de a CSS-t szinte semennyire sem ismerem.