Diskuze: Div
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Zobrazeno 28 zpráv z 28.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Nemám tady křišťálovou kouli, abych zjistil, co všecno máš nacpané v CSS. Třeba tam máš nastavený padding nebo border. Co já vím?
Zkus si oba divy podbarvit. Pokud se barvy setkají, problém je uvnitř - třeba tam máš table, p nebo cojávím.
Možná máš jen špatně nastavené DOCTYPE. MSIE na to občas reaguje divně.
Nevynechává. Zkus si tohle:
<div style="background-color:yellow">
první<br>odstavec
</div>
<div style="background-color:green">
druhý<br>odstavec
</div>Nemáš náhodou MSIE? V něm kdysi tato chyba byla a když neuvedeš DOCTYPE, může se u některých verzí objevit znovu.
No něco tam máš špatně, mám pořád v čistírně tu křišťálovou kouli, tak ti teď nemohu říci, kde máš chybu.
Bývá zvykem poslat zdrojový kód v případě, že ti něco nefunguje. Máš tam správně tagy html, head a body? Jak margin určuješ?
Říkal jsi že se ti rozbila,ty máš novou ? 
Chrome nebo firebug krásně zobrazují padding, margin a celkově rozměry elementu. Stačí na ně najet v kódu (v chrome Ctrl + Shift + J) a uvidíš to sám. Nebo to udělej tak, jak říkal Kit, že nastavíš elementu pozadí.
Jak jsem již říkal problém vyřešen. A navíc Kit se ptal jen na DOCTYPE!
Jak jsem již říkal problém vyřešen - Neříkal jsi nic, naposledy, že nefunguje margin.
Ano že nefunguje když je tam DOCTYPE tak jsem ho tam prostě nedal.
No jo, ale když tam DOCTYPE nedáš, tak to každý prohlížeč zobrazí tak, jak ho zrovna napadne.
V HTML5 margin normálně funguje. Kdoví, jak to tam vlastně dáváš. Záporné hodnoty tam určitě nepatří, ve standardních prohlížečích se to zobrazí špatně.
Omlouvám se, na zdroják jsem zapomněl. Tady je:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
</head>
<body>
<center>
<img src="img/logo.png" width="500" height="250">
</center>
<div id="menu">
<ul>
<a id="button" href="1.html">1</a>
<a id="button" href="2.html">2</a>
<a id="button" href="3.html">3</a>
<a id="button" href="4.html">4</a>
<a id="button" href="5.html">5</a>
<a id="button" href="6.html">6</a>
<a id="button" href="7.html">7</a>
</div>
<div id="videobg">
<center>
<video src="video.wmv" width="400" height="240" controls="controls">
Váš prohlížeč nepodporuje vkládání video souborů, soubor si
<a href="img/video.wma">stáhněte</a>.
</video>
</center>
</div>
<div id="obsah">
<h4>Obsah</h4>
</div>
</body>
</html>a css
body{
background: url('img/bg.jpg') top center black no-repeat;
}
#menu{
background-color: #f0fff0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-left: auto;
margin-right: auto;
width: 1100px;
margin-bottom: 0;
margin-top: 20;
opacity: 0.9;
}
#videobg{
margin-top: 0;
width: 1100px;
background-color: #d3d3d3;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}
#obsah{
width: 1100px;
background-color: #d3d3d3;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
opacity: 0.9;
}
h4{
text-align: center;
}
#button{
margin-right: 50px;
height: 50px;
}Když přidám !DOCTYPE a nastavím margin 0 je tam pořád mezera
To způsobuje vnitřní prvek <h4>. Stačí do CSS doplnit:
h4{
text-align: center;
margin: 0;
}a je po problému.
Některé prohlížeče přidávají základní margin a padding. Používám na to takový jednoduchý CSS hack.
* { margin: 0; padding: 0; }Pak žádný element nemá margin ani padding. Ten si nastavuji sám dál ve stylech.
Zobrazeno 28 zpráv z 28.