Autor Zpráva
Tomáš123
Profil
Zdravím,
mám problém so stránkou. po nastavení paddingu sa rozťahuje div aj keď má nastavenú šírku. Ďakujem za rady.
jefitto44
Profil
Nastav mu max-width... Problém tkvie asi v tom, že nepoužívaš paragrafy, iba máš naostro text v div id="footer" tým pádom mu nemôžeš nastaviť padding, ani margin, lebo prehliadač to berie tak, že si nastavil padding/margin samotnemu footeru... použi do toho <p>copyright</p>
a v CSS nastav
#footer p {margin:NNpx;}

Teda neviem, či je to ten problém, lebo si neudal viac
Tomáš123
Profil
jefitto44:
Problém si pochopil správne ale:
-pri nastavení max-width sa nič nestalo
-pri použití paragrafu sa stalo následovné- tá medzera nad footerom tam nemá byť.

V skratke mi ide o to aby div ktorý má padding: 0; bol tak isto široký ako div čo má padding: 10px;. Možno sa ti zdá, že vymýšľam somariny, ale praktické využitie je takéto:
Potrebujem aby bolo menu na celú šírku hlavičky t.j. aby nebolo na krajoch vidno pozadie headeru a aby div main bol tak isto široký ako header, aj keď bude mať nastavený padding aby sa text nelepil ku krajom.
jefitto44
Profil
Jasne, že ti tam p dalo medzeru, lebo si nepoužil css reset... čiže niekde na začiatok CSS-ka daj p {margin:0; padding:0;}
Prehliadače si inak pridávajú vlastné marginya paddingy podľa vlastného uváženia.

Vlastne celé CSS funguje tak, že čo nenastavíš, to si prehliadač vykreslí podľa vlastného uváženia
Bubák
Profil
Tomáš123:
V skratke mi ide o to aby div ktorý má padding: 0; bol tak isto široký ako div čo má padding: 10px;
http://www.webylon.info/K.10#H
Od napsání článku došlo ke změnám, IE6 vymizel a IE7 skoro také a IE 8 box-sizing umí. Pokud použiješ box-sizing, tak důrazně doporučuji přidat prefix pro Firefox a pro jistotu i pro prohlížeče založené na jádru WebKit.
Koukni také na -moz-box-sizing.

jefitto44:
podľa vlastného uváženia
Až tak?
Tomáš123
Profil
Bubák:
Teda ak som to správne pochopil, pre dosiahnutie cieľa musím buď použiť border-box alebo nastavovať šírku podľa toho ako to chcem mať široké -(mínus) padding.(ak nie vyveď ma prosím z omylu)

Keď si prezrieš moje CSS:
html, body {
height: 100%;
max-width: 100%;
-moz-box-sizing: border-box;
}
.header, .main, .footer {
width: 740px;
max-width: 740px;
margin: 0 auto;
}
p {
margin: 0;
padding: 0;
}
Umiestnil som to -moz-box-sizing správne?
jefitto44:
ďakujem, opravil som to [#3] klikni na následovné ale asi sa vydám cestou Bubáka
Tomáš123
Profil
Bubák:
html, body {
height: 100%;
max-width: 100%;
}
.header, .main, .footer {
min-width: 300px;
max-width: 740px;
margin: 0 auto;
box-shadow: 5px 5px 2px #888;
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

Dobre, takže som to urobil takto a otestoval to v chrome, mozile a všetko ide ale explorer nechce spolupracovať- Čo sa používa pre explorer? (myslím: -xxx-box-sizing: border-box;)
Ale aj tak som čítal, že v IE je takéto vykresľovanie automatické, tak prečo ako jediný kladie odpor.
jefitto44
Profil
Bubák:
Až tak?
Jj, raz som robil footer so šírkou 100%... v chrome pohoda. Ale mozila si tam z nejakých dôvodov dala 5px medzery po obidvoch stranáach... CSS reset od erika majera pomohol, lebo nuluje marginy a padingy všetkého

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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