Autor Zpráva
grooom
Profil *
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í  -->
 
s class - CSS:
#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
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 *
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
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 *
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
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 *
nefunguje
Bubák
Profil
grooom:
Děláš něco špatně, dodej živou ukázku.
grooom
Profil *
ž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
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
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 *
ok... díky, ... zíra vyzkouším

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: