Diskuze: Problém s prázdným pixelem v <div>

Oto Dvorský

Člen

Oto Dvorský:15.11.2012 22:21

zdravím vespolek,
potřeboval bych poradit, v čem mám chybu.
Udělal jsem si jednoduchou stránku pomocí divů, kterou si budu postupně doplňovat, nicméně jsem již ze startu narazil na problém s divem id="obsah", ve kterém se budou načítat jednotlivé stránky z odkazů v menu. Na úvodní stránce však bude jen obrázek. Jde o to, že když tam ten obrázek je, tak se mi pod obrázkem vyskytuje prázdný pixel a až poté je border divu. Dlouho jsem hledal, čím to může být, zjistil jsem, že odstraním-li úvodné řádek, tzn <!DOCTYPE html>, tak se obrázek v divu zobrazí správně, bez spodního pixelu navíc. Zde jsou ve stručnosti kódy:

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Nadpis stranky</title>
</head>
<body>

<div id="ramecek">
 <div id="horni">
  <div style="float:left"><img src="img/logo.jpg" width="291" height="68" alt="#" /></div>
  <div style="float:right"><img src="img/logo2.jpg" width="291" height="68" alt="#" /></div>
  <div id="nadpis"><h1>Nadpis</h1></div>
 </div>

 <div id="menu">Tady bude menu</div>
 <div id="obsah"><img src="img/titulka.jpg" alt="#" title="#" height="585" width="586">
</div>

</div>
</body>
</html>

css

body {
       background-color:#FFF0F0;
      }

#ramecek {
border:2px solid black;
margin-left:auto;
margin-right:auto;
width:784px;
overflow:auto;
background-color:#FFFFFF;
}

#horni {
  float:left;
  background-image:url(img/horni_bg.jpg);
  background-repeat:repeat;
        width:784px;

  }

#nadpis {
  clear:both;
  background-color:black;
  text-align:center;
        height:40px;
}

h1 {
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size:13px;
        font-weight:bold;
        font-style: oblique;
        color:#FFFFFF;
    padding-top:20px;
}


#menu {
  display:block;
  float:left;
  width:180px;
  margin: 3px 0px 3px 3px;
  padding:3px 3px 3px 3px;
  border:1px solid blue;
}


#obsah {
  float:right;
  border:1px solid green;
  font-family:tahoma;
  font-size:12px;
  width:586:px;
  margin: 3px 3px 3px 0px;
}

Děkuji za případnou radu jak se toho prázdného pixelu zbavit.
Jedná se o ten zeleně orámovaný div.

Odpovědět

15.11.2012 22:21

David Jančík

Vlastník

David Jančík:16.11.2012 6:04

Obrázky jsou defaultně vkládány jako inline elementy tj. jsou na úrovni písmen. Ta fičura, bude nějaký místo pro písmenka.

Můžeš to vyřešit více způsoby. Nejjednodušší je dát obrázku display: block

<img src="img/titulka.jpg" alt="#" title="#" style="height: 585px; width:586px; display: block;">

Dá se také použít Transitional DOCTYPE.

Nahoru Odpovědět

16.11.2012 6:04

Zapomeň, že je to nemožné a udělej to ;)

Kit

Tvůrce

Kit:16.11.2012 7:01

Zkus přidat tagu img vlastnost CSS:

img {
   vertical-align: middle;
}

V HTML5 je v daném místě očekáván popisek obrázku, proto je tam vyhrazeno místo. Když popisek není, je jen zúženo asi na 3px.

Nahoru Odpovědět

16.11.2012 7:01

Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.