Autor Zpráva
jezek
Profil *
Ahoj,
snažím se vertikálně vycentrovat textové odkazy v jednotlivých položkách menu. Prošel jsem si zde diskuzi, zkusil nějaké typy , ale nedaří se mi dosáhnout požadovaného výsledku. Zkusil jsem zadat display: table; display: table-cell; vertical-align: middle; ale nedaří se mi. Můžete se mi na to podívat? Odkaz
SwimX
Profil
jezek:
a jenom jim prostě přidat horní padding? :)
zvěřiňák
Profil
Tohle tam přidej:
#left ul {
  margin: 0 0 0 0;
  list-style: none;
  padding: 0;
  line-height: 23px;
}
jezek
Profil *
Když přidám horní padding, rozhodíse mi to ve ve firefoxu a opeře. Mezi jednotlivými položkami menu vznikne mezera viz. Odkazprvní odkaz v menu..
Plaváček
Profil
jezek

Co takhle?

http://klient.plavacek.net/vertikalni-zarovnani.html
jezek
Profil *
Udělal jsem to podle Tebe, vertikální centrování funguje. Jen sem si to pěkně rozhodil.. Odkaz
jezek
Profil *
vyzkoušel jsem způsob od Zvěřiňáka a funguje..
takže všem děkuji za pomoc.
Plaváček
Profil
jezek

Předpokládal jsem, že máš elementární znalosti zákonů CSS. Neřešil jsem ve své ukázce implementaci do tvého layoutu.

Počítám ale, že by postačilo vynulovat margin a padding pro element UL. Nebo použít poměrně ověřený CSS reset ( http://meyerweb.com/eric/tools/css/reset/ )
jezek
Profil *
Plaváček

Nakonec mi to nedalo a upravil jsem to podle Tvého návrhu. Exploreru mi to funguje, ale v Mozille a v Opeře se špatně vykresluje obrázkové pozadí aktualní položky v menu. Nevíš, co mám špatně?
Plaváček
Profil
jezek

Uprav si tuto definici:

#left li a#m1 {
height: 23px;
line-height: 23px;
background: url(ban/menu.jpg) no-repeat;
margin: 0;
display:block;
font-size: 14px;
color: #6B6B6B;
padding: 0 0 0 20px;
text-decoration: none;
white-space:nowrap;
overflow:hidden;
}


Nebo ještě lépe (nemůžeš používat více prvků se stejným ID) takto:

#left li a {
height: 23px;
line-height: 23px;
background: url(ban/menu.jpg) no-repeat;
margin: 0;
display:block;
font-size: 14px;
color: #6B6B6B;
padding: 0 0 0 20px;
text-decoration: none;
white-space:nowrap;
overflow:hidden;
}


a HTML takto:

<div id="menu">
        <ul>
          <li><a href="" title="Home page"></a></li>
          <li><a href="" title="About us"></a></li>
          <li><a href="" title="Our services"></a></li>
          <li><a href="" title="Our services">Jedna položka</a></li>
          <li><a href="" title="Our services">Jedna položka</a></li>
          <li><a href="" title="Our services">Jedna položka</a></li>
        </ul>
      </div>
zvěřiňák
Profil
jezek
Pro správné vykreslování obrázkového pozadí ve všech prohlížečích při "hover" je lepší použít posouvání pozadí o příslušný počet pixelů.
#left li a#m1:hover, #menu a:active, #menu a:focus {
background-position:right top;
color:#000000;
overflow:hidden;
white-space:nowrap;
}

V tvém případě použij radši toto:
background-position:-219px top;
Plaváček
Profil
zvěřiňák

Pro správné vykreslování obrázkového pozadí ve všech prohlížečích při "hover" je lepší použít posouvání pozadí o příslušný počet pixelů.

Proč?

background-position:-219px top;


S tímto zápisem může mít potíže v některých starších prohližečích, když už radíš, tak lépe takto:

background-position:-219px 0;
zvěřiňák
Profil
Plaváček
Máš, jako vždycky, pravdu.

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: