Layout na celou šířku stránky – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Layout na celou šířku stránky – CSS – Fórum – Programujte.comLayout na celou šířku stránky – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Gooo0
Newbie
5. 12. 2015   #1
-
0
-

Ahoj

Rád bych vyřešil problém se šířkou layoutu.Pro vysvětlení použiji příklad:

Chci mít layout, kde bude hlavička, obrázek, tělo a patička, takže velmi zjednodušeně, čtyři divy pod sebou. Každý div bude mít jinou barvu pozadí a chci, aby byl na celou šířku stránky, tedy widht u boxu nastavím na 100%. Jak udělat, aby byl obrázek roztažen na celou šířku ještě úplně nevím, ale na to jsem zde několik dotazů zaregistroval, tak se na to ještě kouknu. Samotný obsah stránky ale chci mít široký jen 1000px a vycentrovaný doprostřed.

Chápu to správně, že vždy vytvořím div pro jednotlivou část stránky (tedy třeba hlavičku), u té tedy nastavím 100% šířku a dovnitř pak vždy vnořím další div, který už bude mít definovanou šířku 1000px a nějak jej vycentruji?

Připadá mi to tak logické, ale mám z toho dojem, že dělám něco strašně složitě, ale nenapadá mě, jak to udělat jednodušeji...

Nahlásit jako SPAM
IP: 178.72.244.–
Reklama
Reklama
ondrej39+1
Věrný člen
5. 12. 2015   #2
-
0
-

#1 Gooo
Potřebuješ minimálně dva divy v sobě. Rodičovský bude mít šířku 100%, zde si nastavíš například barvu pozadí, poté do tohoto rodičovského divu vložíš druhý div, kterýmu nastavíš šířku na 1000px a margin: 0 auto. Nastavení marginu ti zajistí, aby byl div zarovnán na střed. Tomuto vnitřnímu divu můžeš opět nastavit specifickou barvu pozadí, například bílou, aby na něm šel dobře číst text.

div.outer {
    width: 100%;
    background-color: black;
}

div.inner {
    width: 100px;
    margin: 0 auto;
    background-color: white;
}

<div class="outer">
    <div class="inner">
        <!-- Content of your webpage -->
    </div>
</div>

Jinak ne, neděláš to složitě. Je to logické a jednoznačné řešení.

Nahlásit jako SPAM
IP: 79.141.243.–
Inject all the dependencies!
Gooo0
Newbie
6. 12. 2015   #3
-
0
-

#2 ondrej39
Děkuji

Nahlásit jako SPAM
IP: 178.72.244.–
Gooo0
Newbie
6. 12. 2015   #4
-
0
-

#2 ondrej39

A ještě se zeptám: Zkouším to nějak napsat a něco mi nefunguje. Zdroj vypadá takto:

.BOX_6_1_Matka    { width: 100%; background-color: #303030; color: #F0F0F0; clear: both;}
.BOX_6_1_Dcera 	{ width: 1000px; margin: 0 auto;}
.BOX_6_2 	{ float: left; text-align: left;}



<div class="BOX_6_1_Matka">
    	<div class="BOX_6_1_Dcera">
		<div class="BOX_6_2">Test</div>
	</div>
</div>

Takže Matka bude na celou šířku a je podbarvena #303030. Dcera pak jen definuje, že šířka obsahu bude 1000px. No a pak potřebuji vložit další box (pro ukázku jsem dal jen .BOX_6_2, ale budou tam 4 a každý bude mít šířku 25%). Jenže když tam vložím třetí box, tak se zruší podbarvení #303030. Když vložím jen text bez divu, tak je podbarvení OK. Mám tam nějak špatně návaznosti? 

Nahlásit jako SPAM
IP: 178.72.244.–
ondrej39+1
Věrný člen
6. 12. 2015   #5
-
+2
-
Zajímavé

#4 Gooo
Floatované elementy se neeviduji v DOMu tak, jak ty bys chtěl. Pokud chceš, aby se ti floatovaný element do DOMu zařadil (převážně jeho výška), musíš doplnit elementu, který v sobě floatovaný element obsahuje, clearfix. Například takhle:

.BOX_6_1_Dcera::after, .BOX_6_1_Dcera::before {
        display: block;
        content: "";
        clear: both;
    }

Tak, jak to máš nyní, evidují divy s třídami Matka a Dcera nulovou výšku, proto se ti pozadí nezobrazuje.

Nahlásit jako SPAM
IP: 79.141.243.–
Inject all the dependencies!
peter
~ Anonymní uživatel
2539 příspěvků
7. 12. 2015   #6
-
+2
-
Zajímavé

Ja ti to reknu takhle: Float je celej na pikacu! Pokud ses zacatecnik a chces to mit dobre, pouzij tabulku nebo display:table. Na float se nemuzes spolehnout, to jsou proste plujici prvky, ktere vyzaduji presne zadani. Treba pro starsi prohlizece je musis obklopit display:inline-block (coz je neco jako tag P), musis tam mit cleary, ...
::after, .::before ti ve starsich prohlizecich nemusi fungovat nebo nemusi spravne fungovat (chova se to odlisne v IE a FF)
Zkratka float je desne nespolehlivej. Staci malickost a celej layout jde do haje. (treba nekde margin uvnitr floatovaneho boxu, kterej pretece vne box). Osobne se tomu snazim vyhybat, co to jen jde.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:6c7d:72...–
Gooo0
Newbie
7. 12. 2015   #7
-
0
-

Děkuji Ondřejovi a Peterovi. After a before zápis úplně nechápu, ale funguje to. Tabulku používat nechci, takže se kouknu na display: table.

Každopádně, děkuji

Nahlásit jako SPAM
IP: 178.72.244.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 14 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý