CSS kérdésem van

[Budha]

Erre gondoltál?

 

[Trianta]

Sziasztok!

 

A blogon a szöveg ebben a formában jelenik meg: <p class="excert">{MESSAGE}</p>

 

A hozzátartozó css része pedig ez:

p.excert {

font-size: 12px;

padding-bottom: 10px;

padding-right: 4px;

text-align: justify;

}

 

Az a gondom, hogy ha a szövegben kép is van (img), akkor hatástalan a text-align: justify;

 

Hogy lehetne ezt javítani?

[Hutchington]

Sziasztok!

 

Van egy elég idegesítő problémám, amire elég régóta keresek megoldást. A probléma forrása mi is lehetne más mint IE6 .

A probléma a következő:

 

Tételezzük fel hogy van egy div-ünk, amiben van egy szimpla szöveg ami FF-ben és IE7-ben a következő képpen jelenik meg:

 

------------------------------

szöveg

------------------------------

 

HTML kód

 

<div class="selector">
szöveg
</div>

CSS

 

.selector
{
    display: block;
    float: left;
    /*többi tulajdonságot nem írom ide, mert minekis...:) nem vettem észre hogy bármi befolyása lenne a jelenségre*/
}

IE6 jelenség:

 

------------------------------

szöveg

------------------------------

veg

...tehát div-ben levő szöveg végét a div alatt megismétli.

 

A hibára tökéletes megoldást még nem találtam, csak részmegoldásokat, ráadásul neten való keresések során sem találtam megoldást.

 

Amik segítettek bizonyos esetekben:

- position: relative;

- clear: both;

 

Ezek alapján 3 lehetőség van:

1.) Ez egy olyan alapvető hiba, hogy sehol nem foglalkoznak vele.

2.) Hatalmas hiba van a kódomban.

3.) Eddig még csak én találkoztam ezzel a hibával. (Amit kizártnak tartok.)

 

Köszönöm előre is a válaszotokat!

 

üdv,

[payskin]

Azt nem tudom, miért van, látnom kéne, de hogy a div blokk szintű elem, ergo a display: block teljesen felesleges bele, azt helyből vágom. Illetve... kivéve akkor, ha ezt a selector classt ráaggatod néha másra is, ami valóban nem blokk szintű. Akkor oké. (Bocs.)

 

Ja, és ezt nézd meg: Explorer 6 Duplicate Characters Bug, hátha. Egyszer belefutottam egy hasonlóba, akkor találtam.

 

Anno ezt írtam róla a blogban:

Az elmúlt éjszakát azzal töltöttem, hogy a Firefox alatt 99,99%-ra összeállt webes projekt legfontosabb aloldalát, amit egyébként szinte 0-ról írtam meg, főleg DIV-ekre építve, szóval ezt a gyöngyszem valid csodát 3 és fél óra alatt visszaírtam táblákra. Szégyen és gyalázat, de az IE6 olyan hibát produkált, amit egyszerűen képtelen voltam megszűntetni -- basszus, képet kellett volna róla csinálni, na most már mindegy - a keskeny jobb oldali hasáb legalján levő link utolsó 3-4 karaktere teljesen véletlenszerű helyen feltűnt szellemként a bal oldali vastag hasáb környékén, és linkként viselkedett: ha rávittem az egeret, a jobb hasábban levő link is életre kelt (hover). Egyszerűen fogalmam nincs, hogy ezt mi okozta.

Valami hasonlónak tűnik.

[Hutchington]

Szia Balázs!

 

Közben én is gugoltam kicsit, és kiderült hogy ezt a jelenséget úgy hívják hogy IE6 Ghost Text Bug avagy, ahogy te is írtad: "Explorer 6 Duplicate Characters Bug".

 

Igazából olyan megoldást nem találtam rá, amit mindenhol alkalmazható lenne. Nekem fõképpen az a problémám hogy egy JS-es ajax-os cucc által generált dolognál (is) csinálja a szellem szöveget. IE6 kiereszti a szel(l)emet a palackból.

 

A hibáról sajnos titoktartási kötelezettségek miatt nem adhatok képet, de találtam egy nagyon jót. Íme:

 

üdv,

 

 

[enjoys1ng1ng]

"Explorer 6 Duplicate Characters Bug" - erre én azt a megoldást szoktam használni, hogy azután a div után ahol duplázódnak a dolgok, beteszek egy üres div-et:

 

HTML:

<div class="clearer"></div>

 

CSS:

.clearer {
display:block;
clear:left;
margin:0;
padding:0;
height:3px;
visibility:hidden;
}

 

Valószínűleg nem a legmagasabb szintű megoldás, de ritkán van rá szükség és működik. Ha valamiért nem működne, akkor átváltoztatom a "clear:left;"-et "clear:both;"-ra és mondjuk hozzáteszek még "padding:2px 0;"-t. Így már biztos. De valószínűleg van ennél jobb megoldás is, nekem eddig ez a legegyszerűbb.

 

Másik: "a div block szintű elem"... hát igen, csak sajnos az a tapasztalatom, hogy ezt nem mindig tudja magáról. Néha csak úgy működnek rendesen a dolgok, ha beleírom a CSS-be az adott div-hez, hogy "display:block;"...

 

Nekem is van egy kérdésem ezzel az oldallal kapcsolatban.

Az website összes oldala, de különösen azok amelyek hosszabbak elég érdekesen néznek ki ha Firefox-ban a print preview - t nézem. IE7-ben rendben van, de Firefoxban nem tudom rendbe tenni a nyomtatási képet. Ha látja valaki az okát, nagyon hálás lennék.

[Hutchington]

Másik: "a div block szintû elem"... hát igen, csak sajnos az a tapasztalatom, hogy ezt nem mindig tudja magáról. Néha csak úgy mûködnek rendesen a dolgok, ha beleírom a CSS-be az adott div-hez, hogy "display:block"...

 

Ezzel egyetértek. Pontosan ezért használom mindenhol ahol kell. CSS-t mindíg olyan elven írom, hogy hiába egyértelmû egy dolog, nem biztos hogy azt a böngészõ úgy is értelmezni ahogy szeretnénk. Ez pár sorral többet jelent, de kit érdekel bár byte, ha legalább jól mûködik.

 

más:

Ránéztem a hibára is amit írtál, nem tudom mi lehet a baj.

 

#timeline {
         background:#fff url(../img/bg/timelinebg.gif) 460px 0px repeat-y;
         margin:10px auto;
         width:958px;
     }

 

Talán próbáld meg azt hogy a print css-ben a timeline szelektornak nem fix szélességet adsz, hanem azt mondod neki hogy 100%...

 

Talán ez segít.

 

üdv,

[enjoys1ng1ng]

Sajnos nem segített a width:100%....

[h.arpad]

Összehúzza a sorokat az évszámok alatt, arra gondolsz?

Mert akkor van egy rossz hírem: Opera 9-ben és IE7-ben is azt csinálja, ugyanúgy, ahogy Firefox 3 Beta 5-ben... A Safari 3.1 a hosszabb sort a 2005-ös év alatt jobbra igazítja.

 

Készíts a nyomtatáshoz külön HTML-t (táblázattal) vagy csinálj róla PDF-et, és azt ajánld fel letöltésre az oldalon (mondjuk egy kis nyomtató ikonnal jelezve, hogy nyomtatható verzió is létezik...)

[zauber]

Hogyan lehetne megoldani, hogy egy táblázat /egyszínû háttérszínnel való kitöltése esetében/ a kitöltõszín akárhány százalékosan áttetszõ legyen?

Az lenne a célom, hogy a táblázat mögött levõ kép is látszódjon.

[enjoys1ng1ng]

@zauber! Próbáld meg a kapcsolódó CSS-ben megadni pl. a következõt:

table {

background-color:#9abcfd;

filter:alpha(opacity=75);

-moz-opacity:.75;

opacity:.75;

}

Ez egy világoskék hátteret eredményez a tábládnak ami 75%-ban áttetszõ lesz. Értelemszerûen, ha pl. 50%-os áttetszõséget szeretnél akkor változtasd az értékeket: 50-re és .75-re.

Remélem válaszoltam a kérdésedre.

[zauber]

Köszönet a megoldásért!

Müködik!

[ns1]

Sziasztok!

 

A CSS és a PHP elvileg mûködik együtt?

[payskin]

Definiáld a "működik"-et.

[Csaba_1]

Sziasztok!

 

Talán már volt ez a téma, de az utolsó pár oldalon nem láttam ezt.

 

Akarok egy képgaléria szerû oldalt csinálni amiben táblázatos formában vannak a képek.

 

Pl.:

 

a a a a

a a a a

a a a a

 

Az "a" betûk a képek helyét jelölik.

 

Arra lennék kíváncsi hogy hogyan lehet így elrendezni õket. Egy sort rakjak divbe majd valahogyan egy sorba kellene rendezni õket? inline?

 

Kérek szépen valami ötletet, tippet!

[Giraffe1]

Én felsorolással oldanám meg. Ráadásul úgy azt is könnyebben meg tudod oldani, hogy az ablak szélességével arányosan változzon az oszlopok száma.

A képeket <li></li>-k közé rakod, a li-t pedig - miután természetesen kikapcsolod a pöttyözést - beállítod blokkos megjelenítésre és balra "floatolod". Miután a blokk, így egyenlõ magasságot és szélességet is meg tudsz adni.

Ha van kedved eljátszogatni, akkor némi trükközéssel meg lehet oldani a függõleges középre igazítást FF és IE alatt is. Ha lustább vagy, akkor a thumbnaileket azonos méretûre állítod be, és akkor ez a probléma is megoldva.

 

Egyébként mostanában úgy tûnik, hogy amikor jön egy ötlet, amit meg lehet írni a Mesterfogások közé, akkor jön egy majdnem pontosan arra a témára vonatkozó kérdés. Így jártam kétszer Excel témában, és most Te "lövöd le" a képgalériás ötletemet. Bár ott az alapötlet az, hogyan tegyük PicLens-kompatibilissé galériánkat, de az alapokat is átszabtam egy kicsit (pl. diszkrét JavaScripttel a rollover ).

[Csaba_1]

Köszi szépen, a többit megoldom! Piclens kompatibilitás érdekelne, de akkor írd meg a mesterfogások közé nem akarom lelõni azt is

[Szerdahelyi Gergely]

Üdv mindenkinek.

 

A Weboldalajánlóban jó egy éve több kritikát kaptam - jogosan - hogy táblázatokkal pozícionáltam. Így elkészítettem az első CSS alapú lapomat.

Szeretném, ha megnéznétek, és véleményt mondanátok. Most főleg a kód része lenne érdekes, de persze tartalmi tippeket se utasítok el.

 

A lap címe: www.kofejto.hu

 

+1 kérdés:

Az oldalsáv (#oldalsav) kék hátterét úgy oldottam meg, hogy az egész lapnak (#lap) a háttere kék, és a többi divben ez felül van írva. Az a baj, hogy amíg a felső kép betölt, ez látszik. Ha viszont csak a menü és az alsó sáv közötti tartalmi résznek (#kozep) adom a kék hátteret, akkor semmi nem történik, és a reklámdoboz alatt "luk" lesz.

Ezt a megoldást olvastam több helyen, de nem tetszik, hogy a felső kép betöltődéséig kilátszik a világoskék. Ezzel mit lehet tenni?

[payskin]

Belenéztem, nagyon szép munkának tűnik. Kicsit tobzódsz még a DIV-ekben, de ez olyan gyermekbetegség, amin mindenki átesik.

 

Ugyan nem teljesen értem a problémát, de ha van fent Firebugod, kapcsold be, majd a bal oldali ablaktáblában mutass rá a #kozep-re, a jobb oldalit állítsd Layout nézetre, és rögtön látni fogod, miért nem tudsz neki háttérszínt adni.

 

A #kozep két olyan divet tartalmaz, amelyek floatolva vannak, azaz a #tartalom és az #oldalsav ki van véve az őket befoglaló divből, tehát a #kozepnek valójában nincs tartalma, 0 pixel magas.

 

Két dolgot tehetsz: beteheted a #kozep stílusleírásába az overflow: auto;-t, így pont akkora lesz függőlegesen, mint a két benne levő DIV, tehát felveszi az ő méretüket. (Ez a szebb megoldás, de néha lehetnek anomáliái, megjelenő gördítősávok stb.) A másik lehetőség, hogy beraksz még egy, de üres

-et az #oldalsáv után, és ennek a stílusát clear:both;-ra állítod. Ezzel törlöd a float hatást a két fenti div után, és a #kozep máris addig fog érni, lesz magassága.

[Szerdahelyi Gergely]

Köszönöm a tippet, megpróbáltam, de egyik se úgy működött, ahogy jó lenne:

 

- Az elsőnél a méret jó lett, de a teljes tartalom eltűnt, csak a body háttere látszott a tartalmi sáv helyén.

- A másodiknál egy üres sávot betettem ahová mondtad, de a reklámdoboz alá került, és megint kilátszott a háttér. Amikor meg szélességet adtam neki, kilógott a képernyőből, de a világért nem került volna le.

 

Kicsit még bizonytalan vagyok ezzel a CSS dologgal, táblázatokról áttérve minden új.

 

Lenne még 1 kérdésem:

Adott ez az oldal. Még táblázatos, és középre van igazítva. Arra gondoltam, az lenne a legegyszerűbb, ha a reklámdobozt abszolút pozícionálással adnám meg. Viszont ez ugye a bal felső sarokból számol, ami mindenkinek más. Van mód arra, hogy ezt átállítsam mondjuk a felső sáv (logo) 1;1 pixelére? Így minden monitoron onnan számolna és nem lenne csúszás.

[enjoys1ng1ng]

Egy kollégám az egyik weblapunkon ezt a megoldást alkalmazta navigátornak. A probléma csak az, hogy IE6-ben nézve ugyan jól működik a dropdown vizuális része, de ha az egeret a leomló linkek fölé helyezzük akkor látható, hogy valamiért nem látja az url-t. Remélem érthető vagyok. Ez csak IE6-ben van így, IE7 és Firefox jól működik. Használta már valaki ezt a menüt és találkozott már ezzel a problémával? Két napja keresem a megoldást, de kezdem feladni.

(Miért én keresem a megoldást? Szabadságon van...... :-()

[szpetya]

Lehet könnyebb lenne ha látnánk magát az oldalt.

 

Másrészt meg van egy ilyen:

Cascading Style Sheet

 

16th March 2006

 

Because a lot of visitors are having trouble with the conditional comments and the cascading style sheets for this menu I have now removed the CSS to separate files and now show how to load these into the page.

 

If you look at the header of this page you will see that the normal method of loading a file is used for the non-ie browser css.

 

<link rel="stylesheet" media="all" type="text/css" href="css/dropdown.css" />

 

The dropdown.css file

 

The IE only style sheet is loaded using the conditional comment.

 

<!--[if lte IE 6]>

<link rel="stylesheet" media="all" type="text/css" href="css/dropdown_ie.css" />

<![endif]-->

 

The dropdown_ie.css file

 

Üdv

P

 

[Master_of_Puppets]

Azt meg lehet csinálni CSS-el, hogy ha ráviszem a kurzort mondjuk egy <div> tagra akkor egy másik <div> tag háttere változzon meg?

[Garono]

Gyerek-szülõ módszerrel igen.

[Master_of_Puppets]

Na ezt fejtsd ki bõvebben légyszi!