CSS kérdésem van

[Garono]

De biztos.

xml {
    background-color: green;
}

Ha ez nem működne, ami egyébként valószínű, akkor én úgy oldanám meg, hogy a terms-t egy külön elembe tenném* (legyen mondjuk background), majd ennek a background-nak ilyen tulajdonságokat adnék:

background {
    background-color: green;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

A jobb oldalon sajnos marad egy fehér csík, ez azért van, mert az IE nem ismeri CSS-ben a right tulajdonságot. Ezzel nem tudok mit csinálni.

 

*Tehát az XML így néz ki:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="terms.css" ?>
<background>
<terms>
  <paragraph>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
  </paragraph>
  <paragraph1>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
  </paragraph1>
</terms>
</background>

 

Szerk.:

Nem tudom ki milyen referencia anyagot használ (már ha használ), de én a Stylegala CSS Reference-t ajánlom.

[h.arpad]

terms {
    background-color: green;
    display: block;
    height: 100%;
    width: 100%;
}

[Master_of_Puppets]

Viszont itt is van egy fehér keret, a zöld terület körül... De ez lehet, hogy csak IE-ben van így

[h.arpad]

Igen, csak IE-ben. Mint ahogy a display tulajdonságot is csak IE-ben kellett használni...

[Master_of_Puppets]

De ez így nem tuti. Nem lehet valahogy leszedni ezt a keretet?

[enjoys1ng1ng]

Sziasztok!

 

Megint IE-ben van gondom. Már majdnem teljes a biciklis weblap. Most éppen egy fórumot próbálok összehozni (a "links" button alatt található).

 

Nem sikerült úgy ahogy szerettem volna, de így is jó lesz. Illetve jó lenne, de a menü nem mûködik rendesen IE-ben. Amikor második szint van, akkor letolja az oldalt ahogy lenyílik.

 

Tudja valaki hol lehet a probléma?

 

A "forummenu.css"-ben? Vagy a "csshover.htc"-ben? Én nem találom az okát. Persze firefoxban jól mûködik, de a megrendelõ pl. IE-t használ.... és még sokan mások.

[h.arpad]

Azt találtam, hogy a menû ebben a cellában van:

html > body > table .mainwindow > tbody > tr > td > table > tbody > tr > td > table > tbody > tr > td .title > table > tbody > tr > td

Javíts ki, ha nem.

 

A cella magassága az, ami változik IE7 alatt nálam, vagyis azt kéne rögzíteni pl úgy, hogy a menürendszert egy másik rétegre (fölé) helyezed: Tégy bele egy div-et, abban lesz a "háttér", rajta egy másik div, abban pedig a menürendszer, pozícionálva (z-index-szel álítod be, hogy fölötte legyen, a háttere átlátszó.)

 

Egy másik is eszembe jutott, de nem biztos, hogy láthatalan marad: IE böngészõ esetén egy JavaScript annyival csökkenti a cella magasságát, amennyivel az nõne, amikor a menût kinyitod (onmouseover.)

 

Valamivel egyszerûbb lenne, ha átírnád div-re és nem táblázatokból illesztenéd össze az oldalt. Hagyd meg a táblázatot arra, amire való.

 

Hát, remélem valamit tudtam segíteni. Kicsit kevés az idõm arra, hogy ki is próbáljam, amit leírtam, ahhoz mindent helyi szerverre kéne átmentenem, az IE miatt.

 

[enjoys1ng1ng]

Köszi, majd megpróbálom amiket írtál. A phpbb forum kódja természetesen nem az én munkám, én sem szeretem a táblázatokat használni fölöslegesen. Persze beleáshatnám magam és átírhatnám "div"-ekre, lehet, hogy ez lesz majd. Ez a menü sok kérdést tett már fel nekem, de rengeteget tanulok rajta, az biztos.

[payskin]

Megnéztem az oldalt, de a forrás a Firefoxban egy sorban látszik. Ez így áttekintésre esélytelen.

 

Ja, megnéztem Firebuggal, a #menu-nek kéne a z-index.

[enjoys1ng1ng]

Ezt az oldalt nézted meg? Fura, mert soha nem írok egy sorba semmilyen kódolást és nálam firefoxban úgy jelenik meg a forrás ahogy azt én írtam.

Mi lehet a gond?

[payskin]

Mindjárt feltöltöm, mit látok belőle. Szerintem a sorvége jelekkel lehet baj (CR+LF). Vagy a szerkesztőd rak bele rossz jeleket, vagy a szerveren változik meg valahogy.

 

[enjoys1ng1ng]

Egyik készülõ oldalamon a bal oldali div-ben megpróbáltam beállítani a "line-height"-t a következõ módon:

 

#left {

float:left;

width:140px;height:360px;

margin:5px 0px 5px 15px; padding:0px;

background-color:#ffffff;

border:0;

line-height:10px;

}

 

Ez így sajnos az Internet Explorer-re semmiféle hatással nincs s emiatt a dobozt lenyújtja a tartalom és az egész oldal szétcsúszik. IE7-ben nincs ez a probléma, de a régebbiekben igen. (Firefox-ban minden ok). Van rá megoldás?

 

példa

[payskin]

Szerintem valami félreértésről van szó, betartja a 10 pontos line-height-ot: az ifjúsági ismeretterjesztőnél nagyon szépen látszik. Más kérdés, hogy valamiért piszok sok helyet hagy a

-k között.

 

Az a baj, hogy a CSS-tanulásnak még abban a fázisában vagy, amikor az ember halmozza a diveket. Mindenki átesik rajta, nem gond, de feleslegesen bonyolítja a HTML és a CSS kódot is, így sokkal nehezebb a hibakeresés.

 

Például mit csinál az alábbi részletben a két

az

körül, amit az
ne tudna magától is megcsinálni?

 

<div style="border: 0pt none; width: 140px; height: 90px; margin-bottom: 10px;">
    <div class="leftbordermenu">
        <ul>
            itt vannak a <li>-k
        </ul>
    </div>
</div>

[enjoys1ng1ng]

@Balázs!

 

Nagyon köszönöm, sikerült kijavítani. Tényleg fölösleges "div"-ek voltak benne. Meg kellene már tanulnom végre, hogy melyik "tag"-hez melyik "property" rendelhetõ hozzá. (Pedig már éppen kezdtem elbízni magam...).

[enjoys1ng1ng]

flexible layout tanulmány

 

A fenti oldalon a "main" div-en belül a "box"-ban elhelyezett "info" 3 böngészõn háromféleképpen mûködik.

 

640x480

800x600

1024x768

 

felbontásoknál....

 

Firefox nem hajlandó megtörni a sorokat, helyette a jobb oldali képet a szöveg alá benyomja.

 

IE7 - még ez a legjobb, a sorok megtörnek, egy sorban marad a szöveg és a kép.

 

IE6 - a legszörnyûbb...

 

Hiába adok meg "min-width"-t nem hallgat rám, pedig a többi elemnél mûködik.

Hol hibáztam?

[h.arpad]

Biztosan ugyanazt nézzük?

>>kép<< (104,3 kB)

(Gecko/20070718 Fedora/2.0.0.5-1.fc7 Firefox/2.0.0.5)

IE6:

>>kép2<< (84,9 kB) Itt valóban gáz van.

[enjoys1ng1ng]

Igen, csak azt felejtettem el leírni, hogy Firefox-ban a 640x480 és a 800x600 felbontásoknál mutatkozik a gond.

Tehát ami a lényeg lenne, hogy "flexible" a tartalom, pont az nem mûködik. Illetve az oldal többi eleménél mûködik, csak a "box"-ban nem. Az IE6-hoz erõt kell gyûjtenem és újra kezdeni....

[payskin]

Rákerestem Google-ban a "min-height"-ra, és a találatok túlnyomó többsége arról szól, hogy hogyan és milyen hackekkel lehet kiküszöbölni a működési problémáit. Ciki.

 

Szerencsére még sosem volt rá szükségem. Biztos, hogy ezzel akarsz szívni?

[enjoys1ng1ng]

Nem biztos...

 

De ha nem min-width és min-height - ot használok akkor hogyan tudom elérni azt, hogy az oldal flexible legyen egészen a 640x480 felbontásig, onnan viszont ne lehessen már összenyomni, hanem görgetni kelljen? Vagyis, hogy az elemek ne csússzanak egymás fölé és alá.

 

 

Ráadásul ezzel a min-width és min-height használattal azt hiszem nem is valid az oldal, de ezt még nem ellenõriztem.

 

Az eddigi oldalak amiket készítettem mind fix szélességû elemeket tartalmaztak, de most szeretném megtanulni a flexible oldalfelépítést is. Frame kizárva. S persze fontos lenne, hogy minden felbontásban esztétikus legyen az oldal...

 

Itt van még két próbálkozásom, de valahogy egyik sem az igazi:

 

elsõ

második

[h.arpad]

Validnak kell maradnia, mert a CSS 2.1 specifikáció tartalmazza ezt a tulajdonságot és helyesen is alkalmazod.

[sana]

Sziasztok, nemrég kezdtem el html és css kódokat tanulni és próbálgatni, még nagyon az elején tartok... Azt szeretném megkérdezni, hogy ha van egy menü, amiben szeretném, hogy egy-két elem más színű legyen, de akkor is különbözzön a színük a többitől, amikor hivatkozok valamire, akkor azt hogy tudom megoldani? Most Nvu-val próbálkozok és az a gondom, hogy ha létrehozok egy stílusszabályt, akkor abban pl. címsorokban meg tudok adni több színt is (h1,h2...), de a link-nél (a) ez már nem működik. Lehet-e olyat csinálni, hogy egy elemhez külön css-t hozok létre, vagy mi lehet a megoldás? Köszi és bocsi, ha pontatlanul fogalmaztam.

[payskin]

Ööö... nem teljesen fogom a problémát... Nincs esetleg egy kép erről a menüről, hogy hogy kéne kinézzen? Máris könnyebben tudnánk segíteni.

[sana]

Csináltam egy jpeg-et az elképzelésemrõl, mert a készülõ honlap még nagyon zsenge állapotban van, de úgy látom, a gépemrõl nem tudok képet feltölteni, csak akkor tudom megmutatni, ha felteszem a netre... ugye? Majd megpróbálom megoldani valahogy...

[sana]

Szóval, itt egy séma az elképzelésemről. A menüben egyes elemek szürkék, mások feketék lennének, ezt css-sel csináltam. A css-ben megadtam a betűk tulajdonságait, a hátteret és szeretném azt is megadni, hogy ezek a menüpontok, amelyek mindegyike hivatkozik valamire, ne legyenek aláhúzva (ez meg is van), és a színük mindig ugyanilyen maradjon. Ha jól tudom az <a>-val kell megadni, hogy a hivatkozásra mutató elemnek milyen tulajdonságai legyenek. Amikor css-ben megadtam, hogy a szín pl. fekete, akkor az eredelig szürke betűim is feketére változnak, amikor hivatkozást kapcsolok hozzájuk. Próbáltam class-szal megoldani a dolgot, de arra sehogy sem jövök rá, hogy hogy tudok két különböző <a> tulajdonságot megadni úgy, hogy az egyik csak a fekete, a másik csak a szürke menüpontjaimra vonatkozzon, azaz a fekete fekete, a szürke pedig szürke maradjon, ha hivatkozok velük valamire...

 

hátha http://kepfeltoltes.hu/view/071014/proba_w...ltoltes.hu_.jpg

[payskin]

Nagyon egyszerű: az "a" definíciójában beállítasz mindent, ami közös a fekete és a szürkében (betűtípus, méret, ne legyen aláhúzva stb.). Aztán csinálsz egy fekete és egy szürke osztályt:

 

a { közös dolgok }
.fekete { color: #000; }
.szurke { color: #888; }

Az egyiknek ezt az osztályt adod meg a HTML forrásban, a másiknak azt.

 

<a href="..." class="fekete">
<a href="..." class="szurke">