Autor Zpráva
Encore
Profil *
Zdravím,
pokoušim se vytvořit vlatsní CSS design stránek a narazil jsem na 2 problémy.

Nejdřív popíšu ten důležitější:

Nebo nepopíšu, ale postnu obrázky:
stránka v IE: http://texty.yc.cz/pic/ie.JPG
stránka v FF: http://texty.yc.cz/pic/ff.JPG

FF tam udělá takovou blbou mezeru, IE ji neudělá.

index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" type="text/css" href="main.css">
<title></title>
</head>
<body>
<div align="center">
<div style="width: 760px">
<div id="logo">
&nbsp;
</div>
<div id="menu" align="center">
<ul>
<li><a href="" target="vnitrek" title="">Novinky</a></li>
<li><a href="" target="vnitrek" title="">Kodex</a></li>
<li><a href=""" target="vnitrek" title="">Historie</a></li>
<li><a href="" target="vnitrek" title="">Členové</a></li>
<li><a href="" target="vnitrek" title="">Výpravy</a></li>
<li><a href="" target="vnitrek" title="">Galerie</a></li>
<li><a href="" target="vnitrek" title="">Download</a></li>
<li><a href="" target="vnitrek" title="">DP Akademie</a></li>
<li><a href="" target="vnitrek" title="">Yoko</a></li>
<li><a href="" target="vnitrek" title="">Obchod</a></li>
<li><a href="" target="vnitrek" title="">Fórum</a></li>
</ul>
</div>
<div id="stranka" align="center">
<p>Zkouška</p>
</div>
<div id="over">
&nbsp;
</div>
</div>
</div>
</body>
</html>


main.css:
body {

background-color: #555555;
color: #FFFFFF;
}

#logo {
background: #000000 url(logo2.png) no-repeat top center;
width: 760px;
height: 88px;
}

#menu {
background: #000000 url(menu2.gif) no-repeat top center;
border: 0px solid #000000;
width: 760px;
height: 20px;
}

#menu ul {
margin: 0;
padding: 0;
}

#menu li {
display: inline;
font-family:Verdana;
font-size:10px
}

#menu a {
padding: 0 8px;
line-height: 10px;
font-weight: bold;
color: #FFFFFF;
}

#stranka{
background: #FFFFFF url(stranka2.gif) center top repeat-y;
height: 100px
}

#over {
padding: 0;
margin: 0;
background: #555555 url(over.gif) no-repeat top center
}



Poradíte mi, kde je chyba - jak se zbavit té blbé mezery jiank, než do divu stranka nic nepsat? Díky
Encore
Profil *
Problém nastane, ikdyž místo <p>Zkouška</p> dám <h1>Zkouška</h1>. Vypadá to na nějaký problém s doplňováním obrázků u odstavců. Když nastavim margin-top: 0px; tak to chybu neudělá, ale zase nechci mít nadpis nalepenej na liště s odkazama....
Manq
Profil
Encore
Tak té h1 nastav margin-top:0; a hlavnímu obsahu zase nějaký ten padding-top.
Encore
Profil *
Dočasně (možná i trvale) jsem to vyřešil tak, že mezi divy "menu" a "stranka" jsem vložil další div, ve kterém je nastaveno:
#smelarina {

padding: 0;
margin: 0;
background: #000000 url(stranka2.gif) no-repeat top center;
}


Obrázek stranka2.gif je vlastně černý prostředek, po stranách má stříbrné okraje. Je vysoký 40 pixelů (narozdíl od stranka.gif, který má výšku 1px a doplňuje se v závislosti na délce textu na stránce), takže zajišťuje vždy stejné odsazení textu (nadpisů) od menu s odkazy - alespoň doufám. U h1 jsem nastavil margin-top: 0px;. Uvidím, jak se to osvedčí v praxi, zatím to vypadá u IE i FF vpořádku.
Manq
Profil
Encore
Naprosto zbytečné.
Encore
Profil *
Encore
Naprosto zbytečné.


Pravda, předělal jsem to podle tebe a funguje to taky, dokonce rychlejc. Díky

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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