| Autor | Zpráva | ||
|---|---|---|---|
| grooom Profil * |
#1 · Zasláno: 28. 7. 2015, 22:31:54
ahoj, zápatí jsem chtěl rozdělit na 4 části, ale mám problém když tam dám id tak se to nevykresí ale když dáms klas tak jo, jak je to možné?
tady je zdroj: s class: <div id="zapati"> <!-- začátek zápatí --> <div class="blocka">První odstavec je prvním blokem. </div> <div class="blockb">Druhý odstavec je druhým blokem. </div> <div class="blockc">Třetí odstavec je třetím blokem. </div> <div class="blockd">Čtvtý odstavec je čtvrtým blokem. </div> </div> <!-- konec zápatí --> #zapati {
float: left;
width: 100%;
margin: 0; padding 0;
}
.blocka {
width: 25%;
float: left;
background: red;
}
.blockb {
width: 25%;
float: left;
background: blue;
}
.blockc {
width: 25%;
float: left;
background: brown;
}
.blockd {
width: 25%;
float: left;
background: aqua;
} _____________ a tady s ID to nefunguje: <div id="zapati"> <!-- začátek zápatí --> <div id="zapatia">První odstavec je prvním blokem. </div> <div id="zapatib">Druhý odstavec je druhým blokem. </div> <div id="zapatic">Třetí odstavec je třetím blokem. </div> <div id="zapatid">Čtvtý odstavec je čtvrtým blokem. </div> </div> <!-- konec zápatí --> id .css: #zapati {
float: left;
width: 100%;
margin: 0; padding 0;
}
#zaptia {
float: left;
width: 25%;
margin: 0; padding 0;
background: red;
}
#zaptib {
float: left;
width: 25%;
background: blue;
margin: 0; padding 0;
}
#zaptic {
float: left;
width: 25%;
background: brown;
margin: 0; padding 0;
}
#zaptid {
float: left;
width: 25%;
background: aqua;
margin: 0; padding 0;
} (... nakonec to asi vyřeším tabulkou, to mi přijde jako nejlepší nápad.) |
||
| lionel messi Profil |
#2 · Zasláno: 28. 7. 2015, 22:39:32
grooom:
„když tam dám id tak se to nevykresí ale když dáms klas tak jo, jak je to možné?“ Na vine je preklep. Porovnaj HTML: <div id="zapatia">První odstavec je prvním blokem. </div> <div id="zapatib">Druhý odstavec je druhým blokem. </div> <div id="zapatic">Třetí odstavec je třetím blokem. </div> <div id="zapatid">Čtvtý odstavec je čtvrtým blokem. </div> a CSS: #zaptia {
float: left;
width: 25%;
margin: 0; padding 0;
background: red;
}Po prepísaní v CSS na #zapatia a podobne (rovnaká chyba sa vyskytuje u všetkých častí pätičky) by to malo fungovať, osobne by som však zostal pri použití tried.
|
||
| grooom Profil * |
#3 · Zasláno: 28. 7. 2015, 22:50:30
hm... tako jo no.... ale kdyz v jednom sloupečku bude více textu a v dalšách méně tak se ta barva pozadí vykreslí jen za textem, dám příklad http://s18.postimg.org/ce08zd0o9/Bez_n_zvu.jpg nejde to nějak udělat aby ta barva byla přes celé sloupečky?
|
||
| Tomáš123 Profil |
#4 · Zasláno: 28. 7. 2015, 22:57:20
grooom:
„... nakonec to asi vyřeším tabulkou, to mi přijde jako nejlepší nápad.“ Radšej nie. Len nech to pekne ostane pri obtekaní, tabuľka v tomto prípade vôbec nie je potrebná. „nejde to nějak udělat aby ta barva byla přes celé sloupečky?“ Ide. Použi clear.
|
||
| grooom Profil * |
#5 · Zasláno: 28. 7. 2015, 23:05:44 · Upravil/a: grooom
clear: both; ? Ale to se mi ty slooupečky sebrazí všechny pod sebou*sloupečky zobrazí (to jenom aby se tu neukázal troll) |
||
| Tomáš123 Profil |
#6 · Zasláno: 28. 7. 2015, 23:18:23
grooom:
Musíš to dať inam: <div id="zapati"> <!-- začátek zápatí --> <div class="blocka">První odstavec je prvním blokem. </div> <div class="blockb">Druhý odstavec je druhým blokem. </div> <div class="blockc">Třetí odstavec je třetím blokem. </div> <div class="blockd">Čtvtý odstavec je čtvrtým blokem. </div> <div style="clear: both"></div> </div> <!-- konec zápatí --> |
||
| grooom Profil * |
#7 · Zasláno: 28. 7. 2015, 23:21:50
nefunguje
|
||
| Bubák Profil |
#8 · Zasláno: 28. 7. 2015, 23:27:13
grooom:
Děláš něco špatně, dodej živou ukázku. |
||
| grooom Profil * |
#9 · Zasláno: 28. 7. 2015, 23:30:01
živá ukázka je to co napsal tomáš123 a vypadá to pořád takhle http://s18.postimg.org/ce08zd0o9/Bez_n_zvu.jpg
|
||
| Bubák Profil |
#10 · Zasláno: 28. 7. 2015, 23:38:41
Aha, nepochopil jsem hned, o co ti jde, koukni na http://jecas.cz/stejne-vysoke-sloupce, tam najdeš různé možnosti, jak to řešit. Koukni i do diskuse pod článkem.
|
||
| Keeehi Profil |
#11 · Zasláno: 28. 7. 2015, 23:41:58
K původnímu dotazu - lionel messi našel problém, překlep. Já bych rád dodal, že se ti to tam příšerně opakuje. Dá se to zapsat následujícím způsobem a to jak s použitím tříd tak i IDček
<div id="zapati"> <!-- začátek zápatí --> <div class="red">První odstavec je prvním blokem. </div> <div class="blue">Druhý odstavec je druhým blokem. </div> <div class="brown">Třetí odstavec je třetím blokem. </div> <div class="aqua">Čtvtý odstavec je čtvrtým blokem. </div> </div> <!-- konec zápatí --> #zapati {
float: left;
width: 100%;
margin: 0; padding: 0;
}
#zapati > div {
width: 25%;
float: left;
}
.red {
background: red;
}
.blue {
background: blue;
}
.brown {
background: brown;
}
.aqua {
background: aqua;
} K stejně dlouhým sloupcům - Pokud znáš výsku #zapatí, nastav těm odstavcům výšku 100%, nebo se to dá řešit tou tabulkou, nebo jinými tagy stylovanými jako tabulka (nepodporují starší explorery), nebo flexem (ještě menší podpora prohlížečů), nebo pozadím přiřazeným obalovému prvku, tedy #zapati. Jelikož to máš v procentech, tak by to pozadí chtělo vytvořit nějak dynamicky. V úvahu připadá linear-gradient který má horší podporu než display:table ale lepší než flex a nebo svg jehož podpora je lepší než linear-gradient ale stále horší než tabulkové zobrazení. Závěrem - co bych použil já: 1) znám výšku #zapatí? ano height: 100%; ne bod 2) 2) znám šířku #zápatí? ano - šířka x 1px obrázek na pozadí; ne bod 3) 3) stačí mi podpora pro IE8 a výš? ano display: table-*; ne 4) 4a) použiji tabulku 4b) napozicovat si tam "pozaďové" divy |
||
| grooom Profil * |
#12 · Zasláno: 28. 7. 2015, 23:48:30
ok... díky, ... zíra vyzkouším
|
||
|
Časová prodleva: 9 let
|
|||
0