CSS kérdésem van

[payskin]

Bámulatos, hol tart a tudomány!

[Giraffe1]

De még milyen bámulatos. Érdemes ezt az oldalt, pontosabban az errõl nyíló oldalakat megnézni Chrome-mal vagy Safarival. Van néhány olyan bemutató, ami JavaScriptet (is) használ, de jól látható, hogy mire lesz képes a CSS3. Kiegészítve például a HTML5 <canvas>-szal - és természetesen olyan böngészõkkel, amik támogatják mindezeket - nagyon látványos oldalakat lehet majd készíteni.

Az Adobe pedig elkezdheti felkötni a gatyáját, és sok hasznos újdonsággal rakja teli a Flash-t - túl azon, hogy biztonságosabbá teszi.

[kléni]

Nekem rókával még nem mûködik mindegyik, fõleg a képesek nem, de nagyon tetszenek

 

 

itt van a következõ oldal, amit csinálok Most épp azt szeretném elérni, hogy az egész legyen minimum 1000px magas. Ez megy is, de ha nagyobb a szoveg id-jû div, akkor az alatta lévõ keret id-jû div nem megy vele együtt lentebb. Valamit rosszul csináltam ugye?

[Pjotr]

Ez azért van, mert lebeg a "szoveg". Én ezt a problémát JS-tel kerültem ki, ez annyit csinál, hogy lekérdezi a 2 kérdéses <div> clientHeight értékét, majd a kettõ közül a nagyobbikat beleírja mindkettõ minHeight tulajdonságába.

[kléni]

Számozott listának lehet valahogy háttérképet beállítani?

[payskin]

Miért ne lehetne?

[kléni]

Mert nem tudom, hogy lehetne megadni, hogy ha a 13. pontnál jár, akkor az 1.gif, és a 6.gif képet tegye oda (bár nem tervezek annyira nagy listát sehol, elég lenne csak 10 is)

[Giraffe1]

Egy listaelemhez több képet? Lehet, csak biztosan ezt akarod?

 

Ha pedig csak "simán", 1 elem-1 kép megoldást szeretnéd, akkor

a) osztálynevekkel;

b) vagy a CSS3 új E:nth-child(n) selectorral lehet megoldani a kérdést.

[kléni]

Hát ha a lista 134 pontos, akkor az 134 képet jelentene, míg ha kirakosgatom a számokhoz a képet, csak 10 kép kell.

[Giraffe1]

Ööööö, lehet, hogy kicsit zsúfolt volt a hétvége... de nem értem a problémád.

[kléni]

Ugye egy számozott listának akarnék háttérképet berakni oda elé a listát jelzõ számja mögé, az elsõnek az 1es, 2.nak a 2es, és így tovább nevû képeket. eddig remélem világos. De mi van, ha a lista eléggé sok pontos? Akkor ugye sok kép kell neki. Egyszerbb lenne zerintem úgy megoldani, ha a számjegyeket kiraknám képekkel, így ugye csak 10 kép kell.

Bár mint ahogy mondtam korábban, annyira nagy listám nincs, szóval csak azt kell megtudni, hanyadik pont az a pont, és annak a megfelelõ képet beszórni.

[Giraffe1]

De a számozott lista (<ol>) lényege, hogy a böngészõ automatikusan számozza. Akkor miért is kell képekkel számozni? Ha azért, mert ha a számokat szeretnéd "extra" fonttal írni, az egy minimális trükközéssel megoldható.

 

De ha valamiért ragaszkodsz a képekhez, akkor valóban a legegyszerûbb egy kis JS, ami szépen számolja, hogy hol is tart a listában, és a megfelelõ képet rakja ki.

[kléni]

Igen, pont ezért, hogy másféle legyen a szám.

[Giraffe1]

Akkor próbáld meg azt, hogy a <li></li>-n belül a szöveget pl. <b></b> közé teszed (vagy ha használsz félkövér betűket, akkor lehet <i> vagy <em> vagy <span> is helyette). Ezután külön adsz egy betűtípust a li-nek, és külön a "li b"-nek. Így a szám más betűtípussal fog megjelenni, mint a lista szövege. Például:

li { font-family: Times New Roman,Times,Serif; }
li b { font-family: Verdana,Arial,Sans-Serif; }

Így a szám Times New Roman, a szöveg pedig Verdana lesz.

 

Képeket csak akkor használnék, ha olyan betűtípussal kellene írnom, amit (egyelőre) nem lehet mással.

[Pjotr]

Hogyan lehet a <select>-et formázni? Mindenféle trükkölõs megoldást láttam már, de kellene valami olyasmi, ami egyszerû, és pl. nem zavar be az onchange eseménynek (ilyet is találtam).

[Giraffe1]

Egyszerû módon a jelenlegi böngészõkben nem igazán lehet.

[kléni]

Hogy működik az új böngészőkben a tetszőleges betűtípus választás? Tehát megadok egy mármilyen betűtípust, akkor azt látni fogja mindenki, akinek már támogatja a böngészője, vagy valahova a tárhelyre fel kell tölteni, vagy hogy?

[Pjotr]

@font-face

 

Valahol fent kell lennie a betûkészetnek, a levegõbõl nem fogja tudni elõszedni a böngészõ.

[Giraffe1]

Csak csendben jegyezném meg, hogy errõl is szólt a websuli kettõvel ez elõtti része...

[Garono]

CSS3-mal hogyan oldjam meg, ha egy vízszintesen 100% széles DIV-nek akarok árnyékot csinálni, de azt csak kizárólag lefelé? Mert ugye az új box-shadow tulajdonság nem úgy mûködik, hogy megadom, melyik irányokba szeretném az árnyékot, hanem a fényforrás helyzetét kell megadni az elemhez képest. Ez viszont azt eredményezi (mivel az én esetemben 5 pixeles az árnyék elmosódása), hogy az egész oldal 10 pixellel szélesebb lesz a 100%-nál, és alul meg is jelenik a scrollbar.

 

Lehetne még a border-color-ral is bohóckodni, de azt én életképtelen megoldásnak tartom. (Soronként megadni egy színátmenet színeit? Ne már. Vagy rosszul tudom?)

 

Edit:

Találtam két félmegoldást a kommentek közt: http://doctype.com/boxshadow-element-width

 

Edit2:

De egyik sem mûködik.

 

Edit3:

User error volt, az egyik megoldás mûködik, de nem igazán tetszik.

[Garono]

Másik dolog: hogyan lehetne megcsinálni, hogy egyszerre legyen egy linear-gradient, és egy repeating-linear-gradient hátterem? Ötvözni kellene a kettõt...

 

Edit:

Keresgélés közben találtam egy ilyet: http://www.webdesignerwall.com/tutorials/b...s3-search-form/

 

Szép, mi?

[Giraffe1]

CSS3-mal hogyan oldjam meg, ha egy vízszintesen 100% széles DIV-nek akarok árnyékot csinálni, de azt csak kizárólag lefelé? Mert ugye az új box-shadow tulajdonság nem úgy mûködik, hogy megadom, melyik irányokba szeretném az árnyékot, hanem a fényforrás helyzetét kell megadni az elemhez képest.

A box-shadow-nak négy paramétere van: x, y, b, c. Ebbõl x és y a vízszintes és a függõleges eltolás - vagyis nem a fényforrás helyzete -, b az elmosás (magyar blur), végül a c az árnyék színe.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        * {margin: 0; padding: 0; }
        div { 
            height: 50px; 
            width: 100%; 
            background: blue; 
            overflow: hide;
            box-shadow: 0px 5px 5px #000;
            -moz-box-shadow: 0px 5px 5px #000;
            -webkit-box-shadow: 0px 5px 5px #000;
        }
    </style>
</head>

<body>

<div></div>

</body>
</html>

Ez viszont azt eredményezi (mivel az én esetemben 5 pixeles az árnyék elmosódása), hogy az egész oldal 10 pixellel szélesebb lesz a 100%-nál, és alul meg is jelenik a scrollbar.

Egész pontosan Firefox és Opera alatt jelenik meg a gördítõsáv, ugyanis a két Webkit alapú böngészõben (Safari és Chrome) pont úgy jelenik meg, ahogyan azt te szeretnéd.

Lehetne még a border-color-ral is bohóckodni, de azt én életképtelen megoldásnak tartom. (Soronként megadni egy színátmenet színeit? Ne már. Vagy rosszul tudom?)

Ha már keret, akkor inkább már border-image.

 

De akkor már egyszerûbb - vagy inkább "okos enged" típusú - megoldásnak tûnne számomra egy 5px-es margó.

 

[Giraffe1]

Másik dolog: hogyan lehetne megcsinálni, hogy egyszerre legyen egy linear-gradient, és egy repeating-linear-gradient hátterem? Ötvözni kellene a kettõt...

Elviekben a CSS3-ban több képet is használhatsz háttérként, és a színátmenetek ("magyarul" verlaufok) háttérképként használatosak... Ugyanakkor a többszörös hátteret úgy találták ki, hogy különbözõ pozíción helyezed el a képeket, a színátmenetek pedig a teljes elemet "letakarják", amit legfeljebb azzal verhetsz át, hogy egyes színeknél rgba alakot használsz, vagyis átlátszóvá teszed. Innentõl kezdve Öveges tanár úr módszerét tudom csak ajánlani: kísérletezzünk és gondolkodjunk.

 

[Garono]

De akkor már egyszerûbb - vagy inkább "okos enged" típusú - megoldásnak tûnne számomra egy 5px-es margó.

És ebben hol a megoldás? Árnyékot akarok, és kész. Vagy árnyéknak tûnõ keretet. Mindezt képek használata nélkül, tisztán CSS-sel.

 

A színátmenetet meg valahogy így szeretném megcsinálni, lehet, hogy nem voltam elég érthetõ:

Ezt szintén kizárólag CSS-sel szeretném.

 

Viszont több "verlaufot" nem tudok egyszerre megadni neki, mert - nem meglepõen - mindig az utolsó megadott tulajdonsággal tölti ki az egész hátteret.

 

Edit:

Megvan a megoldás, többszörösen egymásba ágyazott DIV-ekkel meg lehetett oldani RGBA-val.

[Giraffe1]

És ebben hol a megoldás? Árnyékot akarok, és kész. Vagy árnyéknak tûnõ keretet. Mindezt képek használata nélkül, tisztán CSS-sel.

A margó ahhoz kell, hogy ne jelenjen meg a gördítõsáv - a margóval ugyanis "helyet csinálsz a kilógásnak".

 

Viszont több "verlaufot" nem tudok egyszerre megadni neki, mert - nem meglepõen - mindig az utolsó megadott tulajdonsággal tölti ki az egész hátteret.

Sajnos most nincs idõm ezzel kísérletezgetni (mert ha ma nem küldök a Szerk. Úrnak augusztusi websulit, akkor kitekeri a nyakamat), de érdemes lenne megnézni, hogy a böngészõk mit szólnak a háttérkép rétegekhez és a színátmenetekhez.

A gond az, hogy a színátmenet hiába background-image, mégis másként kezelik a böngészõk. Esetleg egy olyan trükköt még meg lehetne próbálni, hogy egymásba ágyazol és egymásra illesztesz két blokkszintû elemet, és az egyiket kitöltöd az egyik színátmenettel, a másikat a másikkal...