Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Nauč se s námi víc. Využij 50% zdarma na e-learningové kurzy.
C# week
Avatar
Oto Dvorský
Člen
Avatar
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
Avatar
David Jančík
Tým ITnetwork
Avatar
Odpovídá na Oto Dvorský
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 ;)
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Kit
Redaktor
Avatar
Odpovídá na Oto Dvorský
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.