Menu tlačítka – CSS – Fórum – Programujte.com

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

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;

}

<!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% }

To Petroff : koukám ty jsi hodně dobrej borec, koukal jsem na to, funguje to všechno bezvadně, ty jsi to vyřešil ve velkym stylu, moc díky, na ten bug se ještě podívám, dneska už to nestihnu, ale díky za toto upozornění