CSS kérdésem van

[Garono]

* {
margin:0;
padding:0;
}

A *-gal azt érjük el, hogy minden elemre vonatkoznak a beállított értékek?

[payskin]

Igen. A code /code BB tagekkel ([]) pedig hogy a fórum úgy jelenítse meg a kódunkat, ahogy azt beírtuk!

[enjoys1ng1ng]

Igen. Elnézést végül is a fenti esetben erre nem lenne feltétlenül szükség, de nálam már berögzült, hogy minden css kódomat ezzel a sorral kezdem. Segít a sokféle böngészőt nagyjából közös nevezőre hozni....

 

Balázs, köszönöm, megint tanultam valami újat... :-)

[Garono]

Köszi, ezt nem is tudtam, pedig nem ma kezdtem el CSS-sel foglalkozni.

[payskin]

Ha már táblázatokról és CSS-rõl beszélgetünk, pont van egy ilyen problémám, és nem találta rá megoldást, hátha ti igen.

 

Van egy 100% méretû táblám 8-10 oszloppal. Vannak olyan oszlopok, amelyekbe teljesen változó "méretû" adat kerül (nénik-bácsik neve, cégének a neve stb.), és vannak olyanok, amelyek kb. jól meghatározható hosszúságúak (rendelés ID-je, a rendelés végösszege stb.)

 

Ha nem adok meg egyik oszlopnak sem méretet, a böngészõ önkényesen osztja szét a rendelkezésre álló képernyõszélességet -- ez nem jó. Ha viszont megadok oszlopszélességet -- nyilván a jól meghatározható méretû oszlopoknak --, ha becsúszik valami probléma (mégis szélesebb lesz a mezõ vagy mondjuk a Firefoxban belefér az adat 60 pixelbe, az IE-ben meg nem), akkor megint csak szanaszét fog töredezni a táblám.

 

Nagyon egyszerûen meg lehetne oldani a problémát, ha be tudnám beállítani ezekben az oszlopokban, hogy pont olyan szélesek legyenek, mint a leghosszabb belekerülõ adat. Tehát nem egy konkrét pixelszámot adok meg, nem is egy százalékot, hanem rábízom a böngészõre: nézze meg, milyen széles a belekerülõ adat, és legyen olyan széles (+ padding, border természetesen) az oszlop is.

 

Tudtok ilyet? Én sajnos nem. (Ha nem világos, mutatok képet.)

 

 

[enjoys1ng1ng]

Valamit nem jól értek, vagy körülbelül erről van szó ?

Vagy egy másik variáció ?

 

Ha nem, akkor tudnál képet mutatni?

[payskin]

Nagyon jó, köszi a példákat!

 

Az elsőn látható, hogy a böngésző "szétszórta" az oszlopok között a tábla 100% szélességét. A másodikban pedig minden oszlop olyan széles, amekkora a bele kerülő leghosszabb adat (vagy a fejléce, de ez most mindegy).

 

A kettőt akarom kombinálni: 100% széles tábla, de mondjuk az első és a harmadik oszlop csak olyan széles legyen, mint a leghosszabb belekerülő adat.

 

Ilyet lehet?

[enjoys1ng1ng]

Valahogy így?

 

Ha most megnézed, akkor a 3., 6. és a 9. oszlop fix szélességû, a többi flexible... Így már az amire gondolsz vagy még mindig nem?

 

 

 

[enjoys1ng1ng]

Balázs, table3.html nem az igazi, látom én is....

 

Itt egy table4 , sajnos ez nem tiszta css és 800x600 méret alatt ez is összecsúszik, de jobb mint az eddigiek. Keresem tovább az igazi megoldást.

 

[payskin]

Pont az volna a lényeg, hogy ne kelljen az oszlopot fix szélességûre állítani. Valami olyan beállítás kéne -- errõl álmodom --, ami nem egy konkrét méretet ad meg neki, hanem azt mondja, hogy legyél akkora, mint amekkora a leghosszabb beléd írt adat.

[Giraffe1]

Így direktben szerintem nincs megoldás, de érdemes lenne kísérletezned egyes oszlopoknál a white-space: nowrap;, illetve tábláknál a két table-layout beállítással.

 

[KGigi]

Köszönöm szépen.

[f22]

Sziasztok!

 

Giraffe azt írtad a HTML kérdésem van rovatban, hogy "nagyon szívesen leírod", hogyan lehet megoldani, hogy a felhasználók maguk állíthatják be a hosszabb szövegrészek méretét. Mivel ez CSS, légyszi ide írd már meg! Persze bárki hozzászólását szívesen fogadom!

 

Köszi!

[Giraffe1]

Miután ritkán szoktam a "levegõbe" ígérgetni, ezért a múlt héten már meg is tettem. Mivel a megoldáshoz CSS és JavaScript is szükségeltetik, ezért természetesen az Általános / vegyes rovaton belül hoztam létre az új témát. Sõt, azóta egyes kekec alakok (bár valahol jogosan ) már ki is javíttatták velem a JavaScript inicializáló részét.

[f22]

bocs

[KGigi]

@Balázs

 

A colgroupnál lehetõség van a szélességnél 0* érték megadására, ez elvileg a leghosszabb érték. Nekem nem igazán akar mûködni, de egy próbát talán megér.

[KGigi]

1) Azóta sikerült, szóval próbálkozz

 

2) Lenne egy olyan kérdésem, hogy miért lehet az, hogy eltûnik az oldal háttere, ha külsõ CSS állományt használok?

 

body {background-image: url('hatter.png')}

 

Ez a kódom. Ha a fejlécben adom meg, hiba nélkül megcsinálja.

[enjoys1ng1ng]

1/ IE6 nem szereti a png file-okat

2/ Talán bõvebb infomációra lenne szükség a CSS file-ban. pl.:

 

body {
    background:#fff url(path) top left no-repeat;
    }

 

Vagy ugyanez részletesebben:

body {
    background-image:url(path);
    background-position:top left;
    background-repeat:no-repeat;
    }

 

Ha a fejlécben adom meg, hiba nélkül megcsinálja.

 

Arra tudok még gondolni, hogy a css file-od elérési útvonalát rosszul adod meg.

 

De ha tennél fel linket ahol látszik a probléma, könnyebb lenne segíteni.

 

[KGigi]

Nem szívesen töltöm fel, mert beadandóm.

 

Az elérési út teljesen jó, mert minden más elem tökéletesen látszik. Egyébként az oldalt (xhtml) és a css fájlt is megnéztem validatoron, és teljesen szabványosak.

 

<style type="text/css">
body {background-image: url('hatter.png')}
a:link {color: #EF3A21}
a:active {color: #51532D}
a:visited {color: #800000}

p,li,td,h1 {font-family: Arial; font-size: 16px}
p {text-align: justify}
td {font-size: 12px}
h1 {font-size: 20px; color: #EF3A21}
hr {color: #EF3A21}

#blokk {width: 950px; border: solid; border-width: 2px; border-color: #51532D; background: white}
#fejlec {background-image: url('fejlec.jpg'); width: 950px; height: 217px}
#fejszoveg {color: #000080; font-size: 24px}
#felsorol {width: 20%}
#kina {width: 15%}
</style>

 

Ez a css fájl, és ezzel hívom be:

<link rel="stylesheet" type="text/css" href="kina_bev.css" />

 

A blokk egy div, ami az oldal egy részét takarja ki, körülötte látszott a háttér, egészen addig, amíg a csst nem tettem át külső állományba. Ja és a másik betöltendő kép teljesen jó.

 

Kipróbáltam, amit írtál, de ugyanez. Ha beteszek egy style taget minden fejlécbe, az megoldja, csak nem túl elegáns megoldás...

[payskin]

A külsõ CSS fájlba hogy kerülnek HTML tagek? Ez persze még nem feltétlenül indokolja a dolgot. Firebug mit mond?

[enjoys1ng1ng]

- hmmmm.... nincs véletlenül több css file-od? Lehet, hogy valahol felülírod ezt a kódot amit ide bemásoltál.

- Próbáld meg lecserélni a `-t "-re... - hátha segít, bár nem hiszem.

- Bár ha jobban megnézem, a "blokk" 950 px széles, lehet, hogy ott van az a background-image, csak elbújik a "blokk" fehér háttere mögött. Pozicionáld a body background-image-t is és a "blokk"-ot is.

- Fura egyébként, hogy a "background: white" mûködik és valid....

[payskin]

Fura egyébként, hogy a "background: white" működik és valid...

Pedig azzal nincs gond, próbáld ki a validatorral. Ezt beledobtam, olyan zöld lámpa, öröm nézni.

 

div { background: white; color: black; }

[KGigi]

Az én fura logikám szerint beletettem a kezdõ és a záró taget. Kivettem, és most mûködik. Bocs, félelmetesen hülye voltam. Tényleg mit keresne ott...

[payskin]

Á, dehogy. Ez olyan tipikus hiba, amit "az út elején" mindenki elkövet...

[KGigi]

Üdv ismét! Szóljatok, ha már a falra másztok tőlem.

 

Három divet szeretnék elhelyezni egymás mellett, ezt alkottam (container div, benne a másik három):

* {margin:0; padding:0;}

p {font-family: Arial}
div {border: solid; border-width: 2px}

#container {width: 1200px; height: 800px; margin-top: 20px; margin-left: 20px}
#bal {position: relative; width: 200px; top: 20px; float: left}
#kozep {position: relative; width: 500px; top: 20px; float: left}
#jobb {position: relative; width: 200px; top: 20px; float:left}

 

A problémám az, hogy ha a balnak beállítok 5 pixel margót, akkor rácsúszik a mellette lévőre. Ha a középsőnek is beállítok ötöt, akkor megint egymás mellett lesznek, de akkor meg az csúszik rá a jobb oldalira. Ha meg a balt öttel betolom, akkor a középsőt tízzel kell, hogy meglegyen az öt pixel a bal és a középső között. Honnan számolja ezeket az értékeket? Nem a mellette lévőtől?