ugrás a tartalomhoz

overflow, relative, z-index nyalánkság

Zaphod Beeblebrox · 2008. Május. 25. (V), 19.32
Sziasztok

Túl hosszú idő múlva megint elővettem a css-t, és ebbe a problémába ütköztem:

Az oldalon adottak linkek, de néhány link túl hosszú ahoz, hogy beleférjen abba az oszlopba, ami én szeretném, ezért úgy döntöttem, hogy tördelés helyett egyszerűen csak levágom ott a végüket. amikor a felhasználó a hivatkozás fölé vinné az egeret, a szöveg teljes egészében megjelenne, egy sárgás háttérszínnel.
Itt akadtam el: z-index és absolute párosítás már majdnem ok, de akkor a link alatti szöveg egy sorral feljebb ugrik. relative pedig nem ugrik elő. overflox-x/y-nal ff alatt azt sikerült elérnem, hogy megjelent egy görgetősáv.
Egyik kérdésem a konkrét megoldásra vonatkozik, érdekelnének a böngészőfüggetlen megoldások, és hogy ti milyen hasonló problémával találkoztatok.
Másik kérdésem az, hogy egyáltalán illik csak úgy levágni egy szöveg felét?

A kódom nagyon leegyszerűsítve így néz ki:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            div#Wrapper1 {
                width: 180px;
                overflow: hidden;
                background-color: yellow;
            }
            
            div#Wrapper2 {
                width: 180px;
                overflow: hidden;
                background-color: #ddd;
            }
            
            a.overlay {
                white-space: pre;
                background-color: transparent;
            }
            
            a.overlay:hover {
                white-space: pre;
                background-color: #ffd;
            }
        </style>
    </head>
    <body>
        <div id="Wrapper1">
            <div id="Wrapper2">
               <ul>
                  <li>
                     <a class="overlay">Ez egy link. A link vége kilóg a dobozból. Hover esetén azonban megjelenne a kilógó tartalom.</a>
                  </li>
                  <li>
                      <a class="overlay">Lorem ipsum dolor sit amet consectetuer adipising elit. pr..</a>
                  </li>
               </ul>
            </div>
        </div>
    </body>
</html>
Válaszaitokat, ötleteiteket várom!
zp
‹ Almenü IE-ben nem látszik HTMLdokumentumból kínai karakterek lesznek ›
 ■
1

MIt szabad használni?

Ustak · 2008. Május. 25. (V), 19.58
Csak css?
én ...-oznám a linkek végét, és javascriptel raknék föléjük egy ablakot a hover (onmouseover) -ra. (persze a title tulajdonságot is használhatnád, ha nem túl láma :-)). Ez ie alatt is működik.
FF alatt van olyan lehetőség, hogy
<a class=overlay">Blabalbalbalbalb<span>Nemláthatóbalbalbalblab</span></a>
a.overlay:hover span {
visibility:visible;
position:absolute
pozicionálás;
stb;
}

igazából én is akadtam ilyen hibába, és ha jól emlékszem a két külső div a ludas és az overflow, de már nem emlékszem biztosan, azt tudom, hogy ráhagytam, és megcsináltam javascriptel :-)
FF alatt egyébként működött puszta css-el is.
2

Csak css-t :)

Zaphod Beeblebrox · 2008. Május. 25. (V), 20.11
Bizony, csak css-t szeretnék használni.
Javascripttel tényleg egyszerűbb lenne, de az oldalt (csak hobbi) olyan gyönyörűen sikerült megoldanom különösebb js hackek nélkül, hogy nem szeretnék belerondítani. Csak azon aggódom megint, hogy ha a látogatónak nincs javascriptje bekapcsolva (jó, persze, miért ne lenne..), akkor csak egy randa, vagdosott oldalt fog kapni. És ez az, ami az eddigi kódolási stílusommal nem összeegyeztethető :)
Az ötleteket nagyon köszönöm, a title sem rossz ötlet szerintem, a többit még megnézem.
3

Én is én is!

Ustak · 2008. Május. 25. (V), 20.31
Én is épp egy hasonlót csinálgatok hobbiból, és én ki is kötöttem magamnak, hogy nem fogok idegeskedni az ie miatt. Csak w3c standards és kész :-) Ami nem compliant az nem compliant sajnáljuk :-) jó hogy mások is gondolkoznak így. Ha kész, és szabad megnézni, légyszi linkeld be, kíváncsi vagyok rá!
Pár dolgot leírok, de biztos tudod:
a relative css position-hoz fog viszonyulni az absolute. Ha a div a relative, akkor ahhoz, ha nics,akkor a bodihoz. Egyszer csináltam olyat, hogy tooltipként jelenítettem meg egy span-t, ahogy az előbb is leírtam. Azt is ki lehet próbálni, az tuti műkszik (standard browserek alatt tehát nem ie :))hogy a menüsorod alatt vagy felett vagy mellett kiírod mindig a hiányzó részt pozicionálva.
ja, a spannak display:block, az fontos. és az a-nak is, ha így pozícionálni szeretnéd. (mindkettő inline elem)
6

OK, köszönöm

Zaphod Beeblebrox · 2008. Május. 26. (H), 11.14
Köszönöm, hogy így összefoglaltad, a kísérletezést pedig még folytatom :)
4

Ja és még annyi...

Ustak · 2008. Május. 25. (V), 20.32
egyébként meg a világegyetem elnökének ez igazán nem jelenthet problémát :-) :-)
5

téma

Fraki · 2008. Május. 25. (V), 21.41
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <style>  
            #wrapper1 {  
                width: 180px;  
                background-color: yellow;
            }
              
            a {  
                white-space: pre;  
				overflow: hidden;
				width: 100%;
				display: block;
            }
              
            a:hover {
				width: auto;
				display: inline;
				background: green;
            }
        </style>  
    </head>  
    <body>  
        <div id="wrapper1">  
			<a href="#">Ez egy link. A link vége kilóg a dobozból.</a>  
        </div>  
    </body>  
</html>
Safari bugos, a block elemeken nem működik hover (teszt: 14. sort töröld), a többin megy.
7

Re: téma

Zaphod Beeblebrox · 2008. Május. 26. (H), 11.42
Szia
Köszönöm a kódot, már tanulmányozom :-)
Sajnos az én kódkörnyezetembe sehogyan sem fér bele. Nálam a szemantika (valójában design;-) miatt van több wrapper. Bonyolultabban így néz ki:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            #zpBody {
                width: 200px;
                background-color: #d7d7d7;
                overflow: hidden; /*azert, hogy egyutt nyuljon a tartalommal*/
                /*
                 * ha dobozonkent megadom, hogy:
                 * overflow-x:display;
                 * overflow-y:hidden;
                 * akkor ff ad egy vizszintes gorgetosavot :-(
                 */
                /*background-color:white;*/
            }
            
            .zpRow {
                width: 200px;
                background-color: white;
		/*overflow-x:visible;
		overflow-y:hidden;/*no meg itt is.*/
            }
            
            .zpColumn {
                width: 100px;
                float: left;
                background-color: #ffa
            }
            
            a {
                white-space: pre;
                overflow: hidden;
                width: 100%;
                display: block;
            }
            
            a:hover {
                width: auto;
                display: inline;
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="zpBody">
            <div class="zpRow">
                Tartalom előtte.
            </div>
            <div class="zpRow">
                <div class="zpColumn">
                    <ul>
                        <li>
                            <a href="#">Ez egy link. A link vége kilóg a dobozból.</a>
                        </li>
                        <li>
                            <a href="#">Második szöveg következik. Kilóg.</a>
                        </li>
                        <li>
                            <a href="#">qwertzuiopasdfghjklyxcvbnm</a>
                        </li>
                    </ul>
                </div>
                <div class="zpColumn">
                    <ul>
                        <li>
                            <a href="#">Pángalaktikus Gégepukkasztó</a>
                        </li>
                        <li>
                            <a href="#">Bábel hal</a>
                        </li>
                        <li>
                            <a href="#">The Answer to Life, the Universe...</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="zpRow">
                Tartalom utána
            </div>
        </div>
    </body>
</html>
Az amúgy miért van, hogy overflow-x:visible;-re vízszintes görgetősávot kapok?
8

hát akkor itt van

Fraki · 2008. Május. 26. (H), 12.51
Elmondom inkább a lényegét.

Nyilvánvalóan csak olyan stratégiát lehet követni, ahol hover eseményre a kilógó elem stílusát változtatjuk. (A konténerével nincs mit csinálnunk, hiszen olyan eseményt nem tudunk elkapni, hogy egy 'elem gyermeke hovert kapott', és itt nem is lenne értelme, hiszen a többi link is hirtelen kilátszódna.)

Marad tehát a link elem stilizálása. Nagyon helyesen beállítottad, hogy a white-space: pre-vel gátolható meg a törés. Mivel, mint írtuk, a konténerhez nem nyúlhatunk, ezért a konténert fel kell készíteni, hogy hoverra megjelenjen a link, azaz a konténer overflow-ját visible-re kell állítani. Ahhoz, hogy ilyen körülmények között alapesetben a link mégis vágva legyen, magán a linken kell beállítani a vágást: display: block, overflow: hidden és egy szélességérték (mondjuk 100%). Hover alatt csak a vágás szabályait kell visszaállítani, azaz: width: auto és display: inline. (A width: auto után nincs overflow, úgyhogy azt fölösleges.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <style>  
            #zpBody {  
                width: 200px;  
                background-color: #d7d7d7;  
                xoverflow: hidden; /*azert, hogy egyutt nyuljon a tartalommal*/  
                /*  
                 * ha dobozonkent megadom, hogy:  
                 * overflow-x:display;  
                 * overflow-y:hidden;  
                 * akkor ff ad egy vizszintes gorgetosavot :-(  
                 */  
                /*background-color:white;*/  
            }  
              
            .zpRow {  
                width: 200px;  
                background-color: white;
            }  
              
            .zpColumn {  
                width: 100px;  
                float: left;  
            }
              
            a {  
                white-space: pre;  
                overflow: hidden;  
                width: 100%;  
                display: block;  
            }  
              
            a:hover {  
                width: auto;  
                display: inline;  
                background: green;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="zpBody">  
            <div class="zpRow">  
                Tartalom előtte.  
            </div>  
            <div class="zpRow">  
                <div class="zpColumn">  
                    <ul>  
                        <li>  
                            <a href="#">Ez egy link. A link vége kilóg a dobozból.</a>  
                        </li>  
                        <li>  
                            <a href="#">Második szöveg következik. Kilóg.</a>  
                        </li>  
                        <li>  
                            <a href="#">qwertzuiopasdfghjklyxcvbnm</a>  
                        </li>  
                    </ul>  
                </div>  
                <div class="zpColumn">  
                    <ul>  
                        <li>  
                            <a href="#">Pángalaktikus Gégepukkasztó</a>  
                        </li>  
                        <li>  
                            <a href="#">Bábel hal</a>  
                        </li>  
                        <li>  
                            <a href="#">The Answer to Life, the Universe...</a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
            <div class="zpRow">  
                Tartalom utána  
            </div>  
        </div>  
    </body>  
</html>
Görgősávot azért kaptál, mert a konténer overflow értéke auto-ra állt, de mivel ez nem szabvány (még), talán nem is kéne használnod.

Szerk: Még annyit, hogy az overflow-értékek öröklődnek, így a #zpBody-ra rakott overflow: hidden kétszeresen is bukta. Egyrészt nem lehet felülbírálni, másrészt leöröklődött.
9

Másik módszer is

Zaphod Beeblebrox · 2008. Május. 26. (H), 13.21
Nagyon köszönöm a kódot és a magyarázatot, nagyon hasznos.
Közben elindultam egy másik irányban is. Úgy csináltam, hogy a li-k állandó magasságot kaptak, így tartották a sortávolságot akkor is, amikor a link abszulút pozíciót kapott.
10

Ha sikerül, akkor paste-eld már be, hadd tanuljak én is.

Fraki · 2008. Május. 26. (H), 15.54
Ha sikerül, akkor paste-eld már be, hadd tanuljak én is.
11

Ok

Zaphod Beeblebrox · 2008. Május. 26. (H), 16.07
Ok, de sajnos ott még nem tartok :-( Viszont sikerült írnom egy olyan oldalt, ami csontra befagyasztja a kék "e" betűt :-)
12

Egyik only firefox megoldás

Zaphod Beeblebrox · 2008. Május. 26. (H), 20.22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">    
 <html>    
     <head>    
         <style>    
             #zpBody {    
                    width: 200px;    
                    background-color: #d7d7d7;    
                    xoverflow: hidden; /*azert, hogy egyutt nyuljon a tartalommal*/    
                    /*    
                    * ha dobozonkent megadom, hogy:    
                    * overflow-x:display;    
                    * overflow-y:hidden;    
                    * akkor ff ad egy vizszintes gorgetosavot :-(    
                    */    
                   /*background-color:white;*/    
               }    
                   
               .zpRow {    
                   width: 200px;    
                   background-color: white;  
               }    
                   
               .zpColumn {    
                   width: 100px;    
                   float: left;    
               }  
                   
               a {    
                   white-space: pre;    
                   overflow: hidden;    
                   width: 100%;    
                   display: block;   
				   position:relative;
               }    
                   
               a:hover {    
                   width: auto;    
                   display: inline;  
                   background: #ffa;  
		   
				   position:relative;
				   z-index:2;  
				   padding:5px;
				  margin-left:-5px;margin-top:-10px;
               }    
           </style>    
       </head>    
       <body>    
           <div id="zpBody">    
               <div class="zpRow">    
                   Tartalom előtte.    
               </div>    
               <div class="zpRow">    
                   <div class="zpColumn">    
                       <ul>    
                           <li>    
                               <a href="#">Ez egy link. A link vége kilóg a dobozból.</a>    
                           </li>    
                           <li>    
                               <a href="#">Második szöveg következik. Kilóg.</a>    
                           </li>    
                           <li>    
                               <a href="#">qwertzuiopasdfghjklyxcvbnm</a>    
                           </li>    
                       </ul>    
                   </div>    
                   <div class="zpColumn">    
                       <ul>    
                           <li>    
                               <a href="#">Pángalaktikus Gégepukkasztó</a>    
                           </li>    
                           <li>    
                               <a href="#">Bábel hal</a>    
                           </li>    
                           <li>    
                               <a href="#">The Answer to Life, the Universe...</a>    
                           </li>    
                       </ul>    
                   </div>    
               </div>    
               <div class="zpRow">    
                   Tartalom utána    
               </div>    
           </div>    
       </body>    
   </html>
EDIT:
És van egy másik megoldásom is, ott a css clip tulajdonságot használom.. Szerintetek ezt hogyan lehetne böngészőfüggetleníteni? Lehet?
13

Eszembe jutott!

Ustak · 2008. Május. 26. (H), 21.29
Bocsi lehet hogy már nem számít, de írtad, hogy a szöveg feljebb ugrott abszolút pozicionálásnál, és ez így helyes! Ugyanis az absolute pozicionált elemek kiragadódnak a document flow-ból, és helyüket a következő flow-ban (static) "normálisan" pozicionált elem foglalja el.
14

Na megoldottam

Ustak · 2008. Május. 26. (H), 22.39
Igazából ennek ie alatt is működnie kellene, lényeg, hogy a linkeket tartalmazó div position:relative; oveflow:none; a linkek position:absolute és a hover-juk ban állítod be hogy milyen hosszú legyen, stb. A top először 0px, majd pedig akkora legyen, mint a link height-je, + border + egyebek. pl 30 a height akkor top 0px; 30px; 60px; stb. A classnevek csak a gáz, minden linket el kell nevezni, mert az ie nem támogatja a nth (ahol n egy integer) child szelektort. http://www.robinstory.extra.hu/ -n csináltam egy példát, fülesre megoldván a linkeket, persze ez még kezdetleges, de példa, no.
15

Kifejtenéd bővebben?

Zaphod Beeblebrox · 2008. Május. 27. (K), 14.45
Szia,
ne haragudj, de röviden összefoglalva nem érzem a kódod tisztaságát, van egy kis gány szaga. Nem hiszem, hogy jó ötlet soronként új osztályokat bevezetni, mint ahogy annak sem látom értelmét, hogy változó szélességű szövegnek fix szélességet adjak. A html kód szemantikájának felborításáért sem vagyok oda, és ezek azok a dolgok, amiket eddig el akartam kerülni. Ne feledd, hogy a css a html-ért van, és nem fordítva!
De ha mégis tévednék, vagy félreértem, amit írsz, javítsatok ki!
Pontosan hol láthatom a működő példádat?
Válaszod várom,
zp
16

Míg ie lesz, gány szag lesz :-)

Ustak · 2008. Május. 27. (K), 20.12
Igazad van!
Nem hiszem, hogy jó ötlet soronként új osztályokat bevezetni

Én sem hiszem. Ha nem akarod ie meg firefox alatt használni, akkor van ilyen selector a:nth-child(1) pl az első link. Konqueror alatt működik is tudtommal. Viszont az elején azt írtad, hogy absolute positioning-al akarod megcsinálni, akkor a beálítandó top érték miatt szerintem nincs más választásunk.
hogy változó szélességű szövegnek fix szélességet adjak.

ez is igaz. Akkor csináljuk talán a max-width tulajdonsággal (ie6 még nem tudja :-)
Ne feledd, hogy a css a html-ért van, és nem fordítva!

Hát, mondjuk egy adatbázis készítő és építő alkalmazásnál, vagy egy levelezőprogramnál tényleg így van, mert ott nem a szépségéért használod. Viszont szerintem ha valami különleges dolgot el akarsz érni (és mindenáron el akarod) akkor szükség van extra markupra, bármilyen csúnyán hangzik is.
Na mindegy nem akarok okoskodni, (de már azt csinálom :-)) lényeg az, hogy megpróbáltam egy absolute positioned menüt eszkábálni, amit a fenti linken meg is nézhetsz (bár még nem működik, és tényleg gány :-)) De ha firebug alatt megnézed a css-ét a <div>-nek meg az <ul>-nek melyek a menüsort foglalják magukba (szemantika éljen :-) meg megnézed az <a>-k css kódját, akkor láthatod hogy van megoldva, ez is egy lehetőség :)
17

Majdnem tökéletes

Zaphod Beeblebrox · 2008. Május. 27. (K), 21.09
Szia,
időközben elkészült egy használható változat. Szerencsére a fentebb említett hackeket nem kellett használnom (de azért nem kell komolyan venni minden okoskodást, amit írok ;-) Sajnos a kód azonban tele van fölösleges elemekkel, úgyhogy holnap még letisztítom, majd beküldöm.
Jó éjszakát kívánok!
EDIT: elnézéseteket kérem, még nem tökéletes, és technikai nehézségek is akadtak.
EDIT: ...