| 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 |
#2 · Zasláno: 3. 2. 2012, 02:20:36
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 |
#4 · Zasláno: 3. 2. 2012, 02:29:42
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 |
#6 · Zasláno: 3. 2. 2012, 02:57:17
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 |
#7 · Zasláno: 3. 2. 2012, 03:06:13
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 |
#8 · Zasláno: 3. 2. 2012, 08:52:18
TTT31:
html, body {
margin: 0px;
padding: 0px;
} |
||
| Petr ZZZ Profil |
#9 · Zasláno: 3. 2. 2012, 10:00:36
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; 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 |
#12 · Zasláno: 3. 2. 2012, 14:50:49
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 |
#13 · Zasláno: 3. 2. 2012, 15:22:56
Mám pocit, že bez živé ukázky se dál nehnem.
|
||
| TTT31 Profil |
#14 · Zasláno: 3. 2. 2012, 15:37:29
ok tady jsou html stranky výše popsaného chování
http://leteckaposta.cz/946089883 |
||
| Petr ZZZ Profil |
#15 · Zasláno: 3. 2. 2012, 15:57:07
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 |
#16 · Zasláno: 3. 2. 2012, 17:08:29
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 |
#17 · Zasláno: 3. 2. 2012, 23:58:25
hosting si zřiď free například na endora.cz. Úplně to pro ukázku bude stačit.
|
||
|
Časová prodleva: 12 let
|
|||
0