Zdravim vás, podívejte se prosím na stránku http://beta.hindour.net, nevím si rady s menu, jak ho udělat, aby tlačítka měli správný rozměr a také v IE 6 se špatně zobrazuje pozadí menu, menu se řídí pomocí css. Zde jsou náhledy v mozilla firefox a IE 7
Mozilla Firefox
Fórum › CSS
Menu tlačítka
![](img/forum_vlakno_help_vyreseno.png)
Lepši je to dělat pomocí jednoho obrázku a pak vykreslovat do pozadí seznamu s <a> tu část, která presentuje a:hover efekt..
takhle třeba: http://tester05.own.cz/index.php?stranka=atleti
co se týče toho mišmaše co se ukazuje v IE - pry by to mohlo byt vyškou řádku - ikdyž mně osobně to nepřijde. Chce to vyzkoušet tam nastavit nejakou výšku natvrdo..
Taky bych implicitně narval marging a padding.
Chybné chování seznamů s odkazy v IE (<ul><li><a>) je popsáno v IE/Win - Extra vertical space in Lists: http://www.brunildo.org/test/IEWlispace.php
A do stylů se mrkni na komentáře - hlavně na vložení plovoucích LI do neplovoucího bloku (bez komplikovaného používání clear:both)
Spravil jsem ti to - 100% v Opeře FF IE6/7 - zde spustit:http://exstream.atlasweb.cz/tlacitkove_menu/Hindour.net.html
STYLE.CSS:
/************** výchozí ****************/
* { /*HROMADNÝ RESET*/
margin: 0;
padding: 0;
border: 0;
}
h1
{
font-size: 20px;
color: #FF9900;
}
h2
{
font-size: 12px;
/* text-decoration: bolt; ----> NESMYSL */
color: #287CD6;
}
.h22
{
margin-bottom: 10px;
font-size: 14px;
color: #ffffff;
}
a
{
color: #97AF4C;
border-bottom: 1px #97AF4C dashed;
text-decoration: none;
}
a:hover
{
color: #ACCF40;
border-bottom: 1px #97AF4C solid;
text-decoration: none;
}
a:active
{
color: #C5FF0F;
text-decoration: none;
}
a:visited
{
color:#909F63;
border-bottom: 1px #97AF4C dashed;
text-decoration: none;
}
/************** layout ****************/
body
{
color: #8C8F7D;
font: normal 12px Tahoma;
background: #1A1B16 url(img/pozadi.jpg) ;
}
#box /* u klíčových bloků na stránce jsou lepší ID než CLASS (otázka zvyku) */
{
margin-left: auto;
margin-right: auto;
height: 100%;
width: 740px;
}
#box img
{
display:block; /* (nebo nechat inline, ale nastavit font-size:0) */
}
#menu
{
overflow: auto; /* !!! Důležité - obrázkem lišty obklopí tlačítka */
/* !!! a není nutný čistič clear:both !!! */
width:100%; /* !!! Navíc quli IE ještě nutno zadat šířku */
background: #000000 url(img/menu_pozadi.jpg);
font: 14px/25px Tahoma; /* line-height -> svisle centrovani */
}
#menu ul
{
list-style: none;
margin-left: 60px;
margin-right: 60px;
}
#menu li
{
float: left;
margin-right: 3px; /* zde nastavit mezery mezi tlačítky */
}
#menu a, #menu a:link
{
display: block;
margin-top: 2px;
margin-bottom: 3px;
width: 82px;
height: 27px;
border: 0; /* přepsat výchozí */
text-align: center; /* vodorovne centrovani */
background-image: url(img/menu_tlacitko.jpg);
color: #ffffff;
text-decoration: none;
}
#menu a:hover { background-image: url(img/menu_hover.jpg) }
#menu a:active { background-image: url(img/menu_pouzite.jpg) }
/*-------------------> dál jsem nedošel... */
#obsah
{
float: left;
width: 740px;
background: url(img/pozadi_obsah.jpg);
}
.levypanel
{
font-size: 11px;
float: left;
width: 500px;
}
.levypanel-obsah
{
background: #1E1F1B;
border: #535547 1px solid;
margin-left: 35px;
margin-top: 10px;
margin-right: 35px;
margin-bottom: 50px;
}
.levypanel-nadpis
{
margin-left: 40px;
margin-top: 10px;
}
.levypanel-text
{
margin: 10px 10px 10px 10px;
}
.sloupec
{
color: #BBBFA7;
margin: 10px 17px 0 500px;
}
.sloupec-obsah
{
margin:0 15px 0 15px;
}
.sloupec-box
{
margin-top: 30px;
margin-bottom: 10px;
border-top: #ffffff 2px solid;
}
.sloupec-box-text
{
text-align: center;
}
#patka
{
width: 740px;
height: 16px;
clear: both;
background: url(img/patka.jpg);
}
#patka div
{
text-align: right;
margin-right: 20px;
font-size: 10px;
color: #3F3F2C;
}
XXX.HTML:
<!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>
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<meta name="description" content="Úvodní stránka | Hindour.net" />
<meta name="keywords" content="Hindou.net - Fotografie a videa z akcí Rakovník" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Úvodní stránka | Hindour.net - fotografie a videa Rakovník
</title>
</head>
<body>
<div id="box">
<img src="img/head.jpg" alt="Hindour.net - fotografie a videa Rakovník" />
<div id="menu">
<ul>
<li>
<a href="#">Novinky</a></li>
<li>
<a href="#">Fotogalerie</a></li>
<li>
<a href="#">Videa</a></li>
<li>
<a href="#">Články</a></li>
<li>
<a href="#">Vzkazy</a></li>
<li>
<a href="#">O mně</a></li>
<li>
<a href="#">Odkazy</a></li>
</ul>
</div>
<div id="obsah">
<div class="levypanel">
<div class="levypanel-nadpis">
<h1>Novinky</h1>
</div>
<div class="levypanel-obsah">
<div class="levypanel-text"><h2>24.12.2007 - Hindour</h2>Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it
to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum. </div>
</div>
<div class="levypanel-obsah">
<div class="levypanel-text"><h2>24.12.2007 - Hindour</h2>Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a <a href="#">galley</a> of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum. </div>
</div>
</div>
<div class="sloupec">
<div class="sloupec-obsah">
<div class="sloupec-box">
<h2 class="h22">Statistiky</h2>
<div class="sloupec-box-text">
počet fotografií: 10 582<br>
počet komentářů: 4 256<br>
</div>
</div>
<div class="sloupec-box">
<h2 class="h22">Pomůcky</h2>
<div class="sloupec-box-text">
Přidat stránku k oblíbeným.<br>
apepepepepepepe<br>
blablabla
</div>
</div>
<div class="sloupec-box">
<h2 class="h22">Odkazy</h2>
<div class="sloupec-box-text">
<a linkindex="0" class="odkazy" href="http://riedli.ssrvs.net/" target="_blank" title="Riedli-grafika,webdesign"><img src="http://riedli.ssrvs.net/podporte-me/baner88x31.gif" alt="Riedli- Grafika,Webdesign"></a>
</div>
</div>
</div>
</div>
</div>
<div id="patka">
<div>Design by Riedli. Všechna práva vyhrazena.</div>
</div>
</div>
</body>
</html>
Máš tam ještě jeden velmi zajímavý BUG (pouze v IE6):
Zobraz stránku a přejeď myší nad bannerem [Riedli]. :smile15: BUM. Pak zmáčkni 2x klávesu F11.
(a můžeš znova . . . :-)
Tady pár info o tomto BUGu: http://www.satzansatz.de/cssd/onhavinglayout.html#reflow
Naštěstí se dá snadno spravit - stačí do stylů vložit:
* html .sloupec { height:1% }
A nakonec ukázka (pouze pro IE6) objasňující kdo je viník:
![](img/forum_nove_psp_new.png)
Přidej příspěvek
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
![](/img/smile/1.gif)
![](/img/smile/2.gif)
![](/img/smile/3.gif)
![](/img/smile/4.gif)
![](/img/smile/5.gif)
![](/img/smile/6.gif)
![](/img/smile/7.gif)
![](/img/smile/8.gif)
![](/img/smile/9.gif)
![](/img/smile/10.gif)
![](/img/smile/11.gif)
![](/img/smile/12.gif)
![](/img/smile/13.gif)
![](/img/smile/14.gif)
![](/img/smile/15.gif)
![](/img/smile/16.gif)
![](/img/smile/17.gif)
![](/img/smile/18.gif)
![](/img/smile/19.gif)
![](/img/smile/20.gif)
![](/img/smile/21.gif)
![](/img/smile/22.gif)
![](/img/smile/23.gif)
![](/img/smile/24.gif)
![](/img/smile/25.gif)
![](/img/smile/26.gif)
![](/img/smile/27.gif)
![](/img/smile/28.gif)
![](/img/smile/29.gif)
![](/img/smile/30.gif)
![](/img/smile/31.gif)
![](/img/smile/32.gif)
Uživatelé prohlížející si toto vlákno
Podobná vlákna
Menu - Název vlevo / Menu vpravo — založil Miner123
Tlacitka — založil dragon124
Ohraničení tlačítka — založil Michalek
Moderátoři diskuze