CSS kérdésem van

[payskin]

Ja, mert hogy ez ilyen pszeudó akármi, a Firebug meg nem látja, mert az is bugos. Nagyszerű!

 

Valószínűleg azért nem nagybetű, mert van előtte egy szóköz vagy tab vagy más whitespace. Ha a Firebugban kijelölöm a szöveget úgy, hogy a T előtt van a kurzor, tudok rajta Backspace-t nyomni, és nagy lesz a T.

 

 

De van benne még 24 elég durva hiba is, az inline javascript megoldásokról nem is beszélve...

[kléni]

Na és az vajon miért van benne?

A szavazó admin felületén nem adtam meg semmit a kérdés előtt, és a footer.phpban sincs előtte semmi

 

Amúgy ha tudsz jobb megoldást ennél a megoldástól, szívesen fogadom

[payskin]

Azt a PHP-t nézd, ami ezt a menüt generálja. Vagy az a footer.php? A

 

lényeg, hogy ez nem CSS-probléma, akárhogy is nézzük...

[kléni]

Na és most? spannak nem lehet kezdõbetûjét módosítani?

[kléni]

Na azóta feladtam a régi változatot, így jó lett

[kléni]

Nos szeretnék egy lyat csinálni, hogy egy táblázat sorai más színûek, ezt lehetõleg nem js-el. Adtam a soroknak egy csoportnevet. Ha úgy írom, hogy table tr td, akkor megy, viszont hogyha table tr.valami td, akkor már nem. A csoportné természetesen stimmel, hatszor kimásoltam és rákerestem, mindig megtaláltam ugyan azt.

Valamit mégis elrontottam, vagy így nem lehet formázni?

[Giraffe1]

Így biztosan lehet formázni, hiszen például a Websuli Lorem Ipsum-os "honlapján" a résztvevõk listáját is így csíkozzuk.

Érdemes lenne megnézni, hogy a TD-knek nincs-e háttérszín beállítva, mert az felülbírálja a sorszinten beállított háttérszínt.

[kléni]

Az oldal itt található, és a css-ben nincs formázva külön egyik td sem.

[Giraffe1]

Szerintem próbáld meg úgy, hogy az osztálynév nem egy szám (Pl. "1" helyett "a")!

 

Ezen kívül érdemes lenne kicsit szemantikailag is alaposabban átnézni és helyenként átírni a HTML-kódot. Például használsz <tbody>-t, de egy laza mozdulattal abban helyezed el a táblafejet is. Akkor minek a <tbody>? Vagy akkor már tessék használni a <thead>-et is, és a táblafejet abba áttenni!

 

Arról nem is beszélve, hogy az egymásba ágyazgatott táblázatok kora - szerencsére - lejárt. Tessék szépen elolvasni Balázs írásait a websuliban! Hidd el, érdemes.

[kléni]

Köszi, betűkkel már sikerült.

Már csak abban kéne segíteni, hol találom azt az írást, mert régebbről nem emlékszem, most meg nem találtam átnézve.

(amúgy remélem tudjátok, hogy az utolsó, 19. cikk linkje nem jó)

 

Szerk:

Azóta ügyködtem vele, és feltünk, hogy a menüben nem jó a kép. Elkezdtem lebontani, miért nem stimmel. Ha a cellába nem írok tartalmat, akkor megjeleníti tökéletesen a képeket. Ha írok (mint msot, akkor a jobb odlali lecsúszik, és az ez előtt álló cella között lesz 1px fekete csík. Ha töröltem midnen betű formázást, 3 karaktert tudtam úgy írni, hogy a képek ne csússzanak el.

Most megállt az agyam tippetek esetleg van?

[Giraffe1]

Köszi, betûkkel már sikerült.

Gondoltam, pontosabban reméltem, hogy ez megoldja. Elég kevés (é. nulla) olyan számítógépes program- vagy leíró nyelv van, amelyik elfogadna változónévnek egy számot.

 

Már csak abban kéne segíteni, hol találom azt az írást, mert régebbrõl nem emlékszem, most meg nem találtam átnézve.

Nem akarok gonosz lenni, de szerintem érdemes lenne nekiugranod az elejétõl.

 

(amúgy remélem tudjátok, hogy az utolsó, 19. cikk linkje nem jó)

Nem tudtam, de most kipróbálva nálam mûködik.

 

... Most megállt az agyam tippetek esetleg van?

Igen, elölrõl az egészet -- nem táblákra alapozva.

 

[kléni]

Gondoltam, pontosabban reméltem, hogy ez megoldja. Elég kevés (é. nulla) olyan számítógépes program- vagy leíró nyelv van, amelyik elfogadna változónévnek egy számot.

Nem akarok gonosz lenni, de szerintem érdemes lenne nekiugranod az elejétõl.

Megint elolvastam (és most listára tértem át, bár eléggé összezavarta a float) de ilyen tábláról szólót megint nem találtam, nem tudom, melyik hagyhattam ki esetleg segíthetnél megekesni eme furfangos lapot.

Nem tudtam, de most kipróbálva nálam mûködik.

Megkérdeztem másokat is, nekik is 404-et ír ki, ha tartalomjegyzékbõl kattintok rá.

[Giraffe1]

Megint elolvastam (és most listára tértem át, bár eléggé összezavarta a float) de ilyen tábláról szólót megint nem találtam, nem tudom, melyik hagyhattam ki

Kicsit kezdek összezavarodni. Most melyik tábláról beszélsz? Mert hogy a menütõl kezdve egy csomó minden táblákban van az oldalon. Ha a táblák csíkozására és egyéb érdekességekre, akkor az a 15. részben volt. Ha a menük és egyéb nem táblázatos részek táblás megoldásra, akkor arra sehol -- hiszen Balázs pont azt mutatta be, hogy olyant nem csinálunk.

 

Megkérdeztem másokat is, nekik is 404-et ír ki, ha tartalomjegyzékbõl kattintok rá.

Melyik tartalomjegyzékbõl? Mert a fõoldalról a Tippek/trükkök blokkban a 19. rész linkjére kattintva rendddesen bejön az oldal, és ennek a cikknek a végén ott van az elõzõ 18 rész linkje, amelyek szintén mûködnek.

[kléni]

Kicsit kezdek összezavarodni. Most melyik tábláról beszélsz? Mert hogy a menütõl kezdve egy csomó minden táblákban van az oldalon. Ha a táblák csíkozására és egyéb érdekességekre, akkor az a 15. részben volt. Ha a menük és egyéb nem táblázatos részek táblás megoldásra, akkor arra sehol -- hiszen Balázs pont azt mutatta be, hogy olyant nem csinálunk.

Egymásba ágyazott táblákból nekem az jött le, hogy tábla cellájában nem lehet másik tábla, és e helyett valami másik megoldás van, amirõl írt Balázs.

Melyik tartalomjegyzékbõl? Mert a fõoldalról a Tippek/trükkök blokkban a 19. rész linkjére kattintva rendddesen bejön az oldal, és ennek a cikknek a végén ott van az elõzõ 18 rész linkje, amelyek szintén mûködnek.

Mostmár nekem is jó mindegyik végén, gondolom direkt velem akartatok kifogni

Amúgy mi is az a narancssárga ikon a példaképek tetején?

*átmegy a websuli témájába*

[Giraffe1]

Egymásba ágyazott táblákból nekem az jött le, hogy tábla cellájában nem lehet másik tábla, és e helyett valami másik megoldás van, amirõl írt Balázs.

Igen, Balázs pont azt mutatta be - nagyon részletesen és szemléletesen -, hogy nem így építünk fel egy oldalt, hanem blokk szintû elemekkel (pl. a menüket listákkal).

 

Mostmár nekem is jó mindegyik végén, gondolom direkt velem akartatok kifogni

Igen, Bataci biztos úgy állította be, hogy csak nálad ne mûködjenek a linkek.

 

Amúgy mi is az a narancssárga ikon a példaképek tetején?

Milyen narancssárga ikon? Vagy arra gondolsz, hogy a képek többsége Firefoxon készült?

 

*átmegy a websuli témájába*

Ha gondolod, erre már ott is válaszolhatsz...

 

[kléni]

http://kleni.extra.hu/verseny/

A menü felett és alatt van 2px hézag, pedig mindennek ezt adtam meg, ami körbeveszi:

table.menu, table.menu tr, table.menu td, table.menu ul, table.menu li, div.keret, html, body, head, div.szoveg
{
    margin:0px;
    padding:0px;
    border:0px;
    outline:0px;
}

 

Valamit még kihagyhattam?

 

Amúgy egy másik, nem idetartozó kérdésem is lenne.

Ugye szoktam itt kérdezgetni, ami sehogy nem megy, megkérdezem. Na most, ennek mennyire örültök? Nem tudom, valójában ezt kéne-e itt csinálni, hisz mégiscsak egy újság fóruma...

Edited January 11, 2010 by KGigi

[KGigi]

Hagyján, jobbra is el van csúszva kb. két pixelt. Nullázz le mindent, ami a táblázatra vonatkozik: cellspace, cellpadding, stb.

 

Nyugodtan kérdezz, azért van a fórum. A legfelső rész az újság fóruma, a többi számítástechnika.

[Giraffe1]

Régen - sõt, reflexbõl még sokszor most is - úgy hoztunk létre táblát, hogy

<table cellspacing="0" cellpadding="0" border="0">...</table>

A border-t ma már egyértelmûen CSS-bõl adjuk meg, azonban a cellspacing-cellpadding párosnak - tudtommal - nincs egy az egyben CSS-es megfelelõje. A td, th { margin: 0; padding: 0; } nem pontosan ugyanazt jelenti, de ha mindkettõt lenullázzuk, akkor még mindig marad egy kb. 2 pixeles rés, mint itt is.

Ezt CSS-bõl eltüntetni a

table { border-collapse: collapse; }

stílustulajdonság megadásával tudod.

 

Kérdezz bátran, sokszor mi is ezekbõl a kérdésekbõl tanulunk. De szívünket melengetné egy kicsit , ha az oldal kódját átírnád annak megfelelõen, amit a Websuliból tanultál. Mert most pont egy olyan utat követsz, amirõl Balázs leírta, hogy miért nem javasolt.

[csabika01]

Kis segítséget szeretnék kérni (mint oly sokan :-) )

 

Elõrebocsátom, hogy eléggé kezdõ vagyok, ezért elnézést az esetleges lámaságomért.

 

Adott a következõ függõleges menü, amibõl vízszintes almenü nyílik:

 

div#menu-panel {

margin-top: 50px;

margin-bottom: 180px;

padding: 6px;

width: 130px;

float: left;

}

#menu

{

list-style-type: none;

}

* html #menu li

{

border: 1px solid white;

}

#menu li a

{

padding: 4px;

border-top: 1px solid lightgrey;

display: block;

background-color: #721f1f;

color: #fff;

}

#menu li a:hover

{

background-color: #ba6464;

}

#menu ul ul

{

position: absolute;

float: left;

padding-left: 130px;

display: none;

}

#menu ul li:hover ul

{

display: block;

}

 

A gond vele az, hogy az almenü elsõ menüpontja nem az õ fõ menüpontja mellé kerül, hanem egy menüponttal lentebb. Ez azért zavaró, mert nehezebben lehet egérrel almenüre pozicionálni (óvatlan mozdulatra eltûnik), másrészt meg nem így szeretném :-)

 

Mit rontottam el?

[kléni]

* html #menu li { border: 1px solid white; }

Ezt miért nem simán #menu li-ként csináltad?

Póbálj meg adni a lenyíló részben lévő ul és li-nek egy margin:0px-t.

[csabika01]

Hogy miért

* html #menu li { border: 1px solid white; } ?

Hát, igazából ahogy elkezdtem belekóstolni a CSS világába, plagizáltam...

Azóta már részleteiben olyannyira megváltoztattam, hogy - már látom - egyszerûbb lett volna írni egyet. Ez is véletlenül benne maradt például... javítottam, köszönöm.

 

Ötletedbõl kiindulva eljutottam addig (nyilván próbálgatással), hogy

 

#menu ul ul {

position: absolute;

margin-top: -2.75em;

/*float: left;*/

padding-left: 131px;

display: none; }

 

Nem tudom: nagyon ciki ez a negatív érték? Vagy ez így teljesen rendben van? FF és IE is a helyén jeleníti meg. Szabályos/szabványos/ajánlott ez így?

[KGigi]

Valószínûleg azért ilyen, mert valamelyik elemtõl megörökli. Itt kéne szétnézni. Átnyálazni most nincs idõm, ne haragudj.

[Giraffe1]

* html #menu li { border: 1px solid white; }

Ezt miért nem simán #menu li-ként csináltad?

A "* html" egy régi CSS-hack, ugyanis ezt csak az Internet Explorer 6– fogja értelmezni, a többi böngészõ, így az IE7 és IE8 is figyelmen kívül hagyja. 1-2 alkalommal a Websuli kódjában is megtalálható volt, de ahogy írtam, mostantól az IE6-tal nem foglalkozunk – vagy megy a példa rajta, vagy nem, de nem fogom duplájára növelni a kódot.

 

Messze nem biztos, hogy a hiba csak a CSS-ben van, érdemes lenne megnézni, hogy az egymásba ágyazott listák valóban jók-e, például megfelelõ helyeken vannak-e a lezárások. A kódok áttekinthetõségét pedig jelentõsen egyszerûsíti a megfelelõ tagolás, itt a fórumon pedig a hozzávaló "Kód" elem használata.

[csabika01]

Köszönöm szépen a segítségeteket!

Erõteljesen nézegettem a javasolt feltételezett hibákat, de egyel sem jutottam eredményre - ez lehet, hogy csak az én bénaságomat jelzi. Azt fogom tenni, hogy foglalkozom egyelõre a többi résszel, ehhez a problémához meg majd visszatérek akkor, amikor már kinézetre olyan állapotban lesz az oldal, hogy kipakolhassam a netre.

Külön köszönöm a "* html" magyarázatát, valamint a "kód" elem figyelmembe ajánlását...

[kléni]

Valakinek van tippje, hogy itt az oldalsó menüben 20px helyett miért 60px-al van bentebb kezdve oldalról?