Autor Zpráva
Paulie
Profil *
Ahoj lidi.
Snažím se udělat kruh pomocí CSS3 vlastnosti border radius a vycentrovat do něj text a někde se mi rodí okraj, který tam nemá co dělat.
  <div id="menu">
      <a href="index.php">Aktuality</a>
      <a href="o_mne.php">O mně</a>
      <a href="sluzby.php">Služby</a>
      <a href="volna_tvorba.php">Volná tvorba</a>
      <a href="kontakt.php">Kontakt</a>
  </div>
#menu a {
  padding: 0px;
  padding-top: 30px;
  margin: 40px;
  display: block;
  width: 120px;
  max-height: 120px;
  height: 120px;
  text-align: center;
  background-color: #006fa9;
  -moz-border-radius: 60px;
  border-radius: 60px;
  float: left;
}
Díky, za nakopnutí, kde by mohla být chyba...


Živá ukázka Položky menu se mi podivně roztahují dolů i když tam je explicitně padding-bottom na nule...

Moderátor Chamurappi: Titulek „border-radius“ nevystihuje podstatu dotazu. Příště zkus prosím vymyslet lepší.
panther
Profil
Paulie:
máš tam 30px horní padding, takže výška toho odkazu je 120 (výška) + 30 (padding) = 150px. Pokud chceš mít text na středu, vyhoď padding a přidej line-height: 120px.
Paulie
Profil *
panther:
Zachránil jsi mi noc, díky. Už zase jsem zapomněl, že padding musím započítat do výšky...
A je nějaký dobrý trik jak to udržet uprostřed i když jeden z těch nápisů vleze na druhý řádek?
LosFilipos
Profil
Paulie:
Výška elementu se počítá až od toho paddingu, takže do výslené výšky se sečte padding + height.
Height

Pokud má být element vysoký 120px, musí mít zadanou výšku 90px (120 height - 30 padding-top).
http://tests.designovej.eu/djpw/border-radius.html

Každopádně použití border-radius resp. -moz-border-radius není úplně nejšťastnější řešení, neboť tyto nefungují v IE - odkaz se zobrazí jako čtverec. Doporučuji použít obrázek jako background-image.
panther
Profil
Paulie:
A je nějaký dobrý trik jak to udržet uprostřed i když jeden z těch nápisů vleze na druhý řádek?
od IE8 je podporována hodnota display: table-cell, která toto umožní ve spojení s vertical-align: middle. Jinak je vertikální centrování složitější, jistě si zvládneš něco dohledat a pročíst.
Paulie
Profil *
LosFilipos:
Testuji to zároveň i v IE9 a tam se to zobrazuje správně... O "obrázkové metodě" samozřejmě vím, jen jsem chtěl web udělat v souladu s CSS3, tak od toho právě upouštím...
panther
Děkuji za reakci, jdu hledat. Přeji pěkný večer.
Chamurappi
Profil
Reaguji na Paulie:
jen jsem chtěl web udělat v souladu s CSS3
Obrázky jsou v souladu s CSS 3.

zase jsem zapomněl, že padding musím započítat do výšky
Všechny prohlížeče podporující border-radius podporují i box-sizing, kterým si můžeš přepnout box model.
dranel91
Profil
Chamurappi:
Obrázky jsou v souladu s CSS 3.
Z jakého důvodu píšeš „CSS 3“ s mezerou? :-)
Chamurappi
Profil
Reaguji na dranela91:
Protože se verze odjakživa psaly častěji s mezerou a nejsou nijak důležité, pořád je to ten samý mizerný stylovací jazyk, akorát trochu rozšířený. Verze netvoří součást jména.
Krom toho se mi vizuálně zápis ABCD2.5 nelíbí, takže musím psát ABCD 2.5, v zájmu konzistence tedy píšu i ABCD 8.

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: