Autor Zpráva
TTT31
Profil
Cau, muzu se zeptat jaktoze mam tady na tom divu defaultni margin ??

http://www.2i.cz/df28a78d5e

dela to i IE i chrome, uz je moc hodin mozna je to uplna kravina, tak sory kdyztak :)

<head runat="server">
    <title></title>

    <style type="text/css">
        #main
        {
           
            width: 900px;
           background-color: green;
            
            min-height: 500px;
            margin: 0;
            
        }
        
        
    </style>
</head>
<body>
    <%--<form id="form1" runat="server">--%>
     
    <div id="main">
    </div>
     
    </form>
</body>
Chamurappi
Profil
Reaguji na TTTa31:
Nemáš. Máš výchozí padding/margin na <html>/<body>.
TTT31
Profil
Chamurappi:


a to je jako nejak defaultne nastavene?? Ja totiz u body nemam vubec nic... a mam pocit ze jak sem kdysi psal stranky tak to bylo nalepene uplne na okraj
Nebo da se to nekde vypnout??


aha tak sem nasel tohle http://www.maxdesign.com.au/articles/body/
to to zrusi, ale chtel bych vedet kde se tomu Body dosazuje ten default margin, tam to musi jit i vypnout abych to nemusel porad prepisovat...
Str4wberry
Profil
Ano, každý prohlížeč má určité výchozí styly. Pokud chceš mít jistotu shodného zobrazení napříč prohlížeči, je třeba si je explicitně nastavit.
TTT31
Profil
Str4wberry:


ok diks chlapi nebylo mi jasné, kde se to bere jestli je to az v prohlizecich, tak to neporesim. Ja myslel ze tomu dosazuje ten margin treba Visual studio...


ještě tu mám jeden dotaz k marginu, tak ať zbytečně neotvírám nové téma. Jaktože když nastavím margin: 5px pro header, tak se margin udělá po stranách i dole a nahoře ne a když pak teda upřesním na margin-top, tak ten margin posouvá celý main a ne jenom hlavičku od horního okraje mainu ???


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
         body { margin: 0; padding: 0; }
        
        #main
        {
           
            width: 900px;
            
           margin: 0px auto;
            text-align: center;
            min-height: 600px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 3px 3px 2px #ccc;
            -webkit-box-shadow: 3px 3px 2px #ccc;
            box-shadow: 3px 3px 2px #ccc;
            background-color: Aqua;
        }
        #header
        {
              
            height: 150px;
               margin: 5px;
               margin-top: 70px;
            background-color: green;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 3px 3px 2px #ccc;
            -webkit-box-shadow: 3px 3px 2px #ccc;
            box-shadow: 3px 3px 2px #ccc;
            background-color: rgba(79,12,233,  0.5);
             
        }
        
        
        
        #menu
        {
            
           
            min-height: 390px;
            background-color: Yellow;
             margin: 5px;
            float:left;
             width: 150px;
             -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 3px 3px 2px #ccc;
            -webkit-box-shadow: 3px 3px 2px #ccc;
            box-shadow: 3px 3px 2px #ccc;
            background-color: rgba(7,122,233,  0.5);
        }
        #obsah
        {
            
            min-height: 300px;
            background-color: Yellow;
             margin: 5px;
            float:left;
            width: 730px;
            min-height: 390px;
             -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 3px 3px 2px #ccc;
            -webkit-box-shadow: 3px 3px 2px #ccc;
            box-shadow: 3px 3px 2px #ccc;
            background-color: rgba(7,122,233,  0.5);
            
          
        }
        
        #paticka
        {
            
            background-color: Yellow;
            height: 20px;
             margin: 5px;
             -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 3px 3px 2px #ccc;
            -webkit-box-shadow: 3px 3px 2px #ccc;
            box-shadow: 3px 3px 2px #ccc;
            background-color: rgba(7,122,233,  0.5);
            clear:both;
            }
    </style>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="main">
        <div id="header">
            
        </div>
       
        <div id="menu"  >
            MENU
            
        </div>
        <div id="obsah">
            
        </div>

        <div id="paticka">
            
        </div>


    </div>

    <div>
            
            </div>
    
    </form>
</body>
</html>
Miloš
Profil
TTT31:
je to az v prohlizecich, tak to neporesim
Pořešíš – vždyť ti ro Str4wberry napsal: Ano, každý prohlížeč má určité výchozí styly. Pokud chceš mít jistotu shodného zobrazení napříč prohlížeči, je třeba si je explicitně nastavit.

Jakmile nastavíš pravidla pro všechny prvky stránky, tedy i margin/padding pro html a body, pak se ti nemůže stát, že namísto tvého pravidla prohlížeč použije to svoje. To svoje použije jen tehdy, když ty žádné nenastavíš (nebo pokud nezafunguje dědičnost).
TTT31
Profil
Miloš: jojo tomu už rozumím, ale teď nechápu vůbec, co mi to dělá s tím headrem. Asi čas jít se trochu vyspat :)
Sir Tom
Profil
TTT31:
html, body {
 margin: 0px;
 padding: 0px;
}
A všechny prohlížeče to budou ctít.
Petr ZZZ
Profil
Reaguji na TTTa31:
Zkontroluj si, kde máš všude zapsaný margin (co tak vidím, máš pětipixelový margin snad všude, v #main, #header, #menu, #obsah atd...) a zda se ti skutečně konkrétním zápisem dělá okraj u prvku, o kterém si myslíš, že se ho ten zápis týká (nejlépe si postupně u každého prvku zvlášť měň margin na nějakou nápadnou hodnotu a koukej, kde se to projevuje).

Mimochodem, margin-top "posouvá" prvek, kterému je přidělen, vůči spodnímu (ne vůči hornímu) okraji prvku předcházejícího; jinak by to nedávalo smysl, margin není nic jiného než vnější okraj. Je sice pravda, že posunutí vůči spodnímu okraji bývá často posunutí i vůči hornímu okraji, nicméně je dobré vědět, o co primárně jde, a u marginu nejde o "posunutí", ale o vnější okraj. Posunutí je zde jen průvodním jevem.

Tvůj problém to asi nevyřeší, ale tento zápis
margin: 5px;
margin-top: 70px;
lze zkrátit na margin: 70px 5px 5px;
TTT31
Profil
hmm to je halda, když umažu hlavičku z html, tak vše je jak má , celý main má 0margin zhora a ostatní prvky mají 5px horní odkraj, tedy odstup od horního okraje mainu 5px... Když tam tu hlavičku zase přidám, tak se posune celý main o 5px dolů a hlavička se nalepí horním okrajem na horní okraj main... OMG

No takže prví výsledky z pozorování jsou, že to tak haldí když, nemá hlavička float: left nebo float:right .... ale proč to, co má float společného s marginem???
Jako problém vyřeším, že nastavím hlavičce pevnou šírku a float, který se nebude nijak projevovat, ale nemám rád když se věci dějou jen tak, byl bych moc rád, kdyby mi to někdo objasnil .
Petr ZZZ
Profil
Používáš-li float, nezapomínáš na čistič?
TTT31
Profil
Ten nepoužívám, řekl bych že ho ani nepotřebuji, v téhle stránce žádnou kolizi nemám zatím. Pes bude zakopaný v něčem jiném :-(
Petr ZZZ
Profil
Mám pocit, že bez živé ukázky se dál nehnem.
TTT31
Profil
ok tady jsou html stranky výše popsaného chování
http://leteckaposta.cz/946089883
Petr ZZZ
Profil
Přečti si prosím ještě jednou a tentokrát pečlivě to výše odkázané povídání o živých ukázkách. Děkuji.
TTT31
Profil
Petr ZZZ:

Jo zapomněl jsem uvést že to zkouším v google Chromu, stačí rozbalit a rozkliknout ty htmlka , jestli to nestačí, tak serem na to, hosting si kvůli toho zřizovat nebudu. Jsem myslel, že to takhle bude stačit.
bsteeer
Profil
hosting si zřiď free například na endora.cz. Úplně to pro ukázku bude stačit.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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