Autor Zpráva
chleeba
Profil
Dobrý den chtěl bych na webu aplikovat ukázku Odkaz

Mám však problém když chci vložit do hlavičky pevné divy ( .box_left + .box_reight) tak se automaticky nezvětší i vnější div .hlavicka o velikost vnitřních divů .box_left + .box_reight.

Chtěl bych aby hlavička reagovala na velikost vnitřních divů .box_left + .box_reight. Momentálně viz. ukázka divy .box_left + .box_reight přetékají.

PS: Také bych chtěl div .box_reight vycentovat v hlavičce vertikálně

Děkuji za radu, snad sem to napsal srozumitelně.

Ukázka: Odkaz
Keeehi
Profil
Clear nebo Jak funguje "float" a "clear" a aplikované řešení
chleeba
Profil
Keeehi:
Děkuji mockrát za radu :)
Nebyla by prosím ještě ukázka na vertikální vycentrovani pravého divu. box_reight?
Keeehi
Profil
Vertikální centrování v CSS - jak je ale v článku uvedeno, jde o už mírně zastaralý příspěvek. Vertical Centering in CSS je aktuální verze, je však v angličtině.
chleeba
Profil
Děkuji za rady které sem použil na webu konkrétně clear a pomohlo to.

Mám hotovou hrubou stavbu webu odsavani-filtrace.cz ale mám problém a to že se mi linka na webu nezobrazí přes celou stránku při zmenšení webu

/* ------------------------------ START_linka_100% ---------------------------------*/

.linka {
width: 100%; 
height: 1px; 
background: #e1e1e1;
margin: 30px 0px 30px 0px;   
}

/* ------------------------------ KONEC_linka_100% ---------------------------------*/

jakre
Profil
chleeba:
Rozmysli si, jak široký má být obsah. Jednou je 970 pixelů, podruhé 1050 pixelů a jindy tam máš navíc další padding nebo margin. Pro šířku používej nejlépe jednu třídu, například .obsah a nastav ji v CSS pevnou šířku:

.obsah {width: 960px; margin: 0 auto;}


Současným třídám, jako je .hlavicka_obsah a další, nech nastavený marging a padding.
chleeba
Profil
jakre:
Děkuji z odpověď ale když stránky obalím .obsah {width: 960px; margin: 0 auto;} tak nedocílím toho že to bude po pruzích přes celou šířku a o to mi jde. Nebo je i jiné řešení.
jakre
Profil
chleeba:
Dobře. Vidím, že je to pro tebe asi moc složité. Ono to aplikování řešení, které jsem narvhoval, je trochu zdlouhavé, protože tvůj web není zcela vhodně nakódován. Zapomeň na něj a všem současným prvkům .název_obsah nastav šířku 960 pixelů (místo těch 970 a 1050 pixelů) a prvku .hlavicka_obsah odstraň ten padding.
chleeba
Profil
jakre:
Jj je trochu v tom plavu :D zkusím předělat. Děkuji
chleeba
Profil
Měl bych prosím ještě dotaz jak dostat do šíře 960px tři stejně široké sloupce, ale aby vyplnili celý prostor 960px a byla mezi nimi mezera (první obrázek musí začínat na levéstraně bez okrajů a koncový obrázek musí končit na pravé straně bez okrajů) tak jako u obrázku výše (kolečka).

PS: Dá se to i vyřešit jinak než že si vytvořím koncový <div> .reseni_box_konec viz. ukázka Živá ukázka

Moc děkuji za odpověď
Tomáš123
Profil
chleeba:
Iste:
.reseni_obsah div + div {margin-left: 30px}

V praxi to znamená, že sa deklarácia prejaví na každom prvku <div> v prvku s triedou reseni_obsah, ktorý má pred sebou iný <div>. Pokojne môžeš namiesto div použiť názov triedy ak potrebuješ konkrétnejší selektor.
chleeba
Profil
Tomáš123:
Šlo byto prosím dát do ukázky Živá ukázka. Zatím sem to vyřešil takto nejde mi udělat tvůj postup odsavani-filtrace.cz
Tomáš123
Profil
chleeba:
Živá ukázka
chleeba
Profil
Tomáš123:
Děkuji použil jsem a funguje skvěle, ale nechápu zápis: .reseni_obsah .reseni_box + .reseni_box { ....

Proč se tam dvakrát musí objevit .reseni_box a proč je tam to znaménko +

Děkuji za vysvětlení :)

PS: Ale nefungu je to u referenci (chtěl bych stejně udělat) tam to funguje jen u prvněch tří obrázků a pak zbytek je rozházený viz. Živá ukázka
Tomáš123
Profil
chleeba:
Proč se tam dvakrát musí objevit .reseni_box a proč je tam to znaménko +
Snažil som sa vyriešiť situáciu jediným selektorom bez nutnosti použiť ďalšiu triedu v HTML. Pre bližšie informácie o selektore viď: Seznam všech CSS 3 selektorů.

Riešení tvojho problému je viac:
Živá ukázka - CSS3 selektor s pseudotriedou:nth-child , ktorý vynuluje margin každej tretej položke
• preskladať štruktúru HTML, aby šlo použiť jednoduchší selektor, čo môžeme ďalej riešiť opäť viacerými spôsobmi:
Živá ukázka - CSS3 selektor priameho súrodenca
Živá ukázka - CSS3 selektor s pseudotriedou :first-child s lepšou podporou
– nejaký zásah do HTML pridaním dodatočnej triedy (nie vytvorením úplne novej ako v tvojej ukážke vyššie [#10])
• nejaký zásah do pôvodného HTML pridaním triedy, čím sa nebude dať tak pohodlne prestaviť zobrazenie pri prípadnej potrebe zmeniť počet stĺpcov
• mnoho ďalších kombinácií

Riešení je dosť, ide o to, vybrať niečo s čo najlepším pomerom kompatibility a pohodlia zmeny. Najpohodlnejšie je prvé, ale podpora by mohla byť aj lepšia. Ja by som použil jednu z podmožností druhej položky.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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