CSS problém s percentami

10. 6. 2012 12:59:36

Ahojte,

Chcel by som sa spýtať na problém ohľadom šírky s %. Mám 2 divká ktoré sa floatujú, sú obalené v dive a majú nastavenú šírku v percentách. Keď začnem zmenšovať okno prehliadača smerom doľava divká sa v určitom momente zalomia. Prečo je to tak ? Ako sa dá tento problém vyriešiť aby sa nezalamovali ? Ďalej by som sa chcel spýtať prečo sa medzera na pravej strane zvačšuje a zmenšuje keď zvačšujem alebo zmenšujem okno prehliadača ? Dá sa to nejakým spôsobom fixnúť ? Ďakujem.

http://jsbin.com/oficog/edit#javascript,html

(keď stlačíte hore v lište render uvidíte výsledok).

10. 6. 2012 12:59:36

https://webtrh.cz/diskuse/css-problem-s-percentami#reply773641

Ocas

10. 6. 2012 13:03:43

dej do wrapper min-width v px

10. 6. 2012 13:03:43

https://webtrh.cz/diskuse/css-problem-s-percentami#reply773640

grantorino

(1 hodnocení)

10. 6. 2012 13:10:23

Ďakujem ale to nieje riešenie, potrebujem aby sa to zmenšovalo aj pod bodom, kedy sa zalomí divko.

10. 6. 2012 13:10:23

https://webtrh.cz/diskuse/css-problem-s-percentami#reply773639

Petyk

(3 hodnocení)

10. 6. 2012 13:38:08

Zalomí se to ve chvíli, kdy součet paddingů a marginů je víc jak 6% šířky toho červeného boxu. padding můžeš vyřešit nějakým vnořeným elementem a ten margin-right udělej třeba vložením dalšího divu mezi ty dva, který bude mít právě 6% šířky.

10. 6. 2012 13:38:08

https://webtrh.cz/diskuse/css-problem-s-percentami#reply773638

Martin

(36 hodnocení)

10. 6. 2012 13:43:33

Způsobuje to padding a margin u jednotlivých divů. Jde o to, že ve chvíli, kdy se zúží okno, jsou najednou ty 3 %, o které jsou divy užší, málo na to, aby se do nich "vešly" nastavené hodnoty pro padding a margin.

http://www.w3schools.com/css/css_boxmodel.asp

10. 6. 2012 13:43:33

https://webtrh.cz/diskuse/css-problem-s-percentami#reply773637

Ondrej Vertat

(48 hodnocení)

10. 6. 2012 13:51:28

Napsal grantorino;806304
Keď začnem zmenšovať okno prehliadača smerom doľava divká sa v určitom momente zalomia. Prečo je to tak?

Protože už se vedle sebe nevejdou. Šířku máš sice v %, ale je tam odsazení v px, které zůstává neměnné a v jednom okamžiku margin-right:10px u levého divu a padding:5px u .wrapperu (tj. 20px na šířku celkem) představují více jak 6% zbytku šířky (jelikož ty dva divy mají dohromady 94%).

Napsal grantorino;806304
Ďalej by som sa chcel spýtať prečo sa medzera na pravej strane zvačšuje a zmenšuje keď zvačšujem alebo zmenšujem okno prehliadača ?

To je prázdné místo, které se zvětšuje nebo zmenšuje v závislosti na zbytku celkové šířky.

- jeden div si udělej jako float:left a druhý jako float:right. Tím se zbavíš mezery vpravo a můžeš dát pryč i margin-right:10px u divu .jeden, už to nebude potřeba

- clearfix používáš špatně, třídu clearfix musíš přidat rodičovskému prvku, tedy divu .wrapper, ten span smaž

- clearfix je tam nejspíš zbytečně, stačí dát divu .wrapper overflow:hidden, tak se dá také ukončit obtékání

---------- Příspěvek doplněn 10.06.2012 v 12:53 ----------

Napsal Petyk;806317
padding můžeš vyřešit nějakým vnořeným elementem a ten margin-right udělej třeba vložením dalšího divu mezi ty dva, který bude mít právě 6% šířky.

Neraď takové zhovadilosti jako někam vkládat další divy jen kvůli odsazení, je to nesmysl.

10. 6. 2012 13:51:28

https://webtrh.cz/diskuse/css-problem-s-percentami#reply773636

800XE

(8 hodnocení)

10. 6. 2012 19:54:59

- Když používáš šířky v procentech, měly by být v procentech i paddingy a marginy, aby celkový součet byl 100%.

- Div je blokový prvek, je zbytečné mu nastavovat 100% šířku.

- Width:auto je tam taky zbytečně a místo přepisování barvy pozadí jí nastav zvlášť pro vnitřní divy a pro obal.

- O obtékání psal už Ondra, obalu opravdu stačí nastavit overflow: hidden a v případě, že overflow potřebuješ, tak display: inline-block; width: 100%;

- Některé stejné vlastnosti nastavuješ zvlášť pro .jeden a pro .dva, můžeš to sjednotit pod .jeden, .dva

<!doctype html>
<html>
    <head>
        <meta charset=utf-8 />
        <title></title>
        <style>
            body {
                padding: 100px;
                font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 13px;
            }

#wrapper {
                overflow: hidden;
                padding: 5px;
                background: red;
            }

.jeden, .dva {
                float: left;  
                padding: 0.5%;
                width: 48.5%;
                min-height: 20px;
                background: #fff;
            }

.jeden {
                margin-right: 1%;
            }

div {
                border-radius: 5px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -o-border-radius: 5px;
                -ms-border-radius: 5px;
                box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
                -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
                -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
                -o-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
                -ms-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div class="jeden"></div>
            <div class="dva"></div>
        </div>
    </body>
</html>

10. 6. 2012 19:54:59

https://webtrh.cz/diskuse/css-problem-s-percentami#reply773635

Pro odpověď se přihlašte.

Přihlásit