| Autor | Zpráva | ||
|---|---|---|---|
| Ifča Profil |
#1 · Zasláno: 16. 3. 2005, 14:02:01
První dotaz se týká Class a ID. Jak už bylo řečeno clas se může použít v dokumentu několikrát, ID pouze jednou. Znamená to tedy, že takhle je to špatně??
<div id="vlevo-null"> <div id="vlevo"> <h1>Menu 1</h1> <p>prvni menu</p> </div> <div id="vlevo"> <h1>Menu 2</h1> <p>druhe menu</p> </div> </div> Nebo id="vlevo"´musím rozdělit na id="vlevo1" a id="vlevo2" ??? A druhý dotaz se týká odkazů. Mám dvě ID a chci pro ně stejné odkazy: je správně?: #menu A:visited, #patkatext A:visited { text-decoration: none; color: #FFFFFF; } Proč nefunguje ? #menu, #patkatext A:visited { text-decoration: none; color: #FFFFFF; } nebo třeba zápis: .menu A:visited { text-decoration: none; color: #FFFFFF; } a A.menu :visited { text-decoration: none; color: #FFFFFF; } jaký je v tom rozdíl? Jak přiřadit odkaz více třídám nebo ID? Prosím, je někde o tomhle článek? |
||
| habendorf Profil |
#2 · Zasláno: 16. 3. 2005, 14:10:08
První dotaz: je to špatně. Musíš použít div class="vlevo", a nebo v tomto konkrétním případě stačí: #vlevo-null div {vlastnosti} a pak už jen
<div id="vlevo-null"> <div> <h1>Menu 1</h1> <p>prvni menu</p> </div> <div> <h1>Menu 2</h1> <p>druhe menu</p> </div> </div> |
||
| habendorf Profil |
#3 · Zasláno: 16. 3. 2005, 14:16:43 · Upravil/a: habendorf
A k tomu dalšímu: Jak přiřadit odkaz více třídám nebo ID?
To je divná otázka, přiřazuješ třídu nebo ID odkazu, ne obráceně. a {vlastnosti} - definuje vlastnosti pro všechny odkazy v celém dokumentu .left a {vlastnosti} - vlastnosti odkazu, který se nachází v elementu s třídou left (třeba: <div class="left"><a ....>tento link má jiné vlastnosti než ostatní linky</a></div> |
||
| Hugo Profil |
#4 · Zasláno: 16. 3. 2005, 14:16:53
misto ID pouzij class a muzes to mit v dokumentu tak casto jak potrebujes
|
||
| Petra Profil |
#5 · Zasláno: 16. 3. 2005, 14:19:17
Pokud jsou "vlevo" nějaké stejné boxíky, použij class="vlevo". Tak jak to máš, je to špatně, protože tam máš dvakrát id="vlevo", smí to být jak píšeš pouze jednou. (Mimochodem ani h1 - hlavní nadpis stránky bys neměla používat víc než jednou a taky ne jako nadpisky v menu)
Ad odkazy - to první je správně, jestli jsi to tak chtěla :-) to druhé tam nebude fungovat samotné #menu, je tam potřeba určit i ten "a". Rozdíl v posledních dvou zápisech je v tom, že první definuje vlastnosti odkazu, který je zapsán v HTML třeba takto: <p class="menu"><a href="#">odkaz</a> Druhý může být zapsán takto: <a class="menu">odkaz</a> Tzn. tímto zápisem definuješ styl přímo u jednoho konkrétního odkazu, tím předchozím zápisem definujes jak mají být ostylované odkazy v celém jednom elementu. (jinak ta mezera mezi menu a dvojtečka visited by tam být neměla) Jestli myslíš, aby měl jeden odkaz více tříd, tak normálně napíšeš <a class="jednatrida druhatrida"> |
||
| Ifča Profil |
#6 · Zasláno: 16. 3. 2005, 14:21:57
Aha... takže opravdu ID musí být jen jednou. I když se mě to správně zobrazuje, nemůžu vědět kdy mi to udělá někdy nějaké problémy.
Já mám totiž pro vlevo-null i vlevo jiné vlastnosti: #vlevo-null { width: 190px; float: left; padding: 0; background-image: url(images/hlavicka_03.jpg); background-position: top left; background-repeat: no-repeat; } #vlevo { padding: 5px; background-color: #475E66; margin: 40px 0px 0px 10px; border: 3px solid #F5FFFA; } Takže tady musím použít <div class="vlevo"> Díky :o) |
||
| habendorf Profil |
#7 · Zasláno: 16. 3. 2005, 14:24:25
Takže tady musím použít <div class="vlevo">
pak ale nesmíš mít #vlevo, ale .vlevo |
||
| habendorf Profil |
#8 · Zasláno: 16. 3. 2005, 14:25:33
Ještě jen trochu učesat...
background-image: url(images/hlavicka_03.jpg); background-position: top left; background-repeat: no-repeat; je asi lepší takto: background: url(images/hlavicka_03.jpg) top left no-repeat; |
||
| Ifča Profil |
#9 · Zasláno: 16. 3. 2005, 14:39:17
to habendorf: jojo, učesat, já vím... zatím jen vše zkouším :o) nerada bych pak měla 100kb soubor CSS :o)
to Petra: já vůbec netušila, že ani <h1>... by se neměli opakovat, přitom jsem to zcela běžně používala... K těm odkazům: já jsem chtěla pro více elmentů zadat stejné odkazy, čili pro dvě ID takto #menu A:visited, #patkatext A:visited { text-decoration: none; color: #FFFFFF; } což je správně :o) to abych se nemusela pořád v tom CSS souboru opakovat. Totéž asi platí i pro třídy, že? Ale jak např. ještě zapsat, když totéž budu mít pro A:active? Takto?? #menu A:visited, #patkatext A:visited, #menu A:active, #patkatext A:active { text-decoration: none; color: #FFFFFF; } |
||
| habendorf Profil |
#10 · Zasláno: 16. 3. 2005, 14:49:05 · Upravil/a: habendorf
No já bych na to celé šel přesně obráceně.
.jinyodkaz {vlastnosti} .jinyodkaz:visited {vlastnosti} .jinyodkaz:active {vlastnosti} a pak v html: <div id="menu"><a class="jinyodkaz" ....> <div id="patkatext"><a class="jinyodkaz" ....> |
||
| Ifča Profil |
#11 · Zasláno: 16. 3. 2005, 14:52:52
Aha... i tak se to dá. No... teprv začínám a už v tom mám guláš :o)))
|
||
| Petra Profil |
#12 · Zasláno: 16. 3. 2005, 14:55:15
Ifča
Ano, přesně tak jak píšeš, pro třídy to platí stejně. habendorf To je imho neefektivní, menu i patka budou mít víc odkazů a psát to ke každýmu zvlášť mi přijde na víc práce než napsat o selektor víc do stylopisu. |
||
| habendorf Profil |
#13 · Zasláno: 16. 3. 2005, 15:02:06
Petra: no jasně, v tom případě #menu a {vlastnosti}. Viz můj úplně první příspěvek (#vlevo-null div {vlastnosti})
|
||
| habendorf Profil |
#14 · Zasláno: 16. 3. 2005, 15:13:32
Ifča: Jinak ještě jedna věc: ID je z hlediska css naprosto zbytečné, vždy vystačíš s class (co na tom že ji použiješ pro jeden jediný prvek). Já třeba ID používám výjimečně, a to jen pro svou lepší vlastní orientaci v zápisu, aby mě trklo do očí - tahle věc je tady jen jednou.
|
||
| Ifča Profil |
#15 · Zasláno: 16. 3. 2005, 15:15:32
Díky všem za objasnění :o)
Ještě mám dotaz ohledně odkazů. Dejme tomu, že mám definované klasické odkazy, které se budou vyskytovat běžně kdekoli v textu: A { font-size: 10pt; font-weight: bold; } A:visited { text-decoration: none; color: #E5EBEB; } /* svetle zelena */ A:link { text-decoration: none; color: #E5EBEB; } /* svetle zelena */ A:active { text-decoration: none; color: #FF6F04; } /* oranzova */ A:hover { text-decoration: none; color: #2F4F4F; } /* tmavsi zelena */ Pak chci mít ty odlišné odkazy jen pro menu. Musím opět jen pro menu definovat zase všech pět, nebo stačí jen #menu A:active { text-decoration: none; color: #FF6F04; } #menu A:hover { text-decoration: none; color: #2F4F4F; } a ty zbývající tam být nemusí (tj. #menu A, #menu A:visited, #menu A:link) ?? |
||
| habendorf Profil |
#16 · Zasláno: 16. 3. 2005, 15:22:11
Když to napíšeš takhle, tak v menu bude jiný active a hover, ostatní budou stejné jako v celém dokumentu.
Jen poznámka: možná je lepší si to vyzkoušet sama, člověk se tím naučí nejvíc :o) |
||
| Ifča Profil |
#17 · Zasláno: 16. 3. 2005, 15:26:46
Ifča: Jinak ještě jedna věc: ID je z hlediska css naprosto zbytečné, vždy vystačíš s class...
No já sama ještě nevím jak to použít. Zatím jsem si prostudovala jak udělat ty gumové sloupce (2 nebo3), jak do toho zapasovat tu grafiku viz: http://www.goldendy.cz/web/index.htm (i když není dotažena do konce) a všichni tam používají ID. Tak jsem si řekla, že ID použiji jen na ty objekty (asi tak tomu říkáte) a dále budu používat class. Ovšem to 2x id="vlevo" to je fakt blbost, dám tam class. |
||
|
Časová prodleva: 19 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0