NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Zarovnání odkazu - odrážky na střed menu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
petr.khul
Člen
Avatar
petr.khul:12.5.2012 18:13

Zdravím všechny :).
Mám menší problém, tvořím web jednoduchým tabulkovým layoutem, ale když mám buňku menu a v ní naházené odrážky s odkazy, tak pomocí CSS je mám všechny zarovnané na střed té buňky, ve všech prohlížečích to funguje ale v IE ne... Můžete mi někdo prosím poradit co s tím?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Zbýšovský drak | Závod horských kol pro širokou veřejnost</title>
   <link rel="stylesheet" href="index-design.css" type="text/css" />
  </head>
  <body>
  <center><table border="1">
<tr><td id="hlavicka" colspan="2">
</td></tr>
<tr>
  <td id="menu">
  <center>
  <h3>Menu</h3>
  </center>
  <ul>
  <li><a href="o-zavode.html">O závodě</a></li>
  <li><a href="poradatele.html">Pořadatelé</a></li>
  <li><a href="sponzori.html">Sponzoři</a></li>
  <li><a href="kategorie.html">Kategorie</a></li>
  <li><a href="vysledky.html">Výsledky</a></li>
  <li><a href="fotogalerie.html">Fotogalerie</a></li>
  <li><a href="navstevni-kniha.html">Napište nám</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
  </td>
      <td id="obsah">
    <h3>&nbsp Vítejte!!!</h3>
      <p>
       &nbsp Dobrý den,
vítáme Vás na stránkách cyklistického závodu Zbýšovský drak. Tyto stránky vznikly, aby vás blíže s tímto závodem seznámily.
Pokud byste měli nějaké dotazy, tak nám napište a my Vám rádi odpovíme. Doufáme, že se Vám naše stránky budou líbit.
      </p>
     <center> <img src="stupne.jpg"> </center>
      </td>
</tr>
<tr><td id="paticka" colspan="2">
<center><p> &copy Cyklo Kubálek. &nbsp Web vytvořil Petr Khul</p></center>
</td></tr>
</table> </center>
  </body>
</html>

A ještě CSS

 body{
background-color: #AAF9FF;
}
body, html {
  height: 100%;
  padding: 0px;
  margin: 0px;
}
body table{
border-width:2px;
border-style:outset;
border-color:#E9FFF6;
text-align:center;
width:900px;
height:100%;
border-radius:10px;
}

body table td{
border-width:2px;
border-style:outset;
border-color:#E9FFF6;
border-radius:10px;
}
#hlavicka{

background-image:url("Zbysovsky_drak_head.PNG") ;
border-radius:10px;
background-color:#0548c1;
height: 110px;
}
#menu h3{
color:#E9FAFF;
text-align:center;
}
#menu td{
table cellpadding="0"; cellspacing="0";
margin:auto;
width:auto;
height: 500px;
vertical-align:top;
text-align:center;
border-color:black;
background-image:url("background-button.png");
}
#menu {
border-radius:10px;
vertical-align:top;
margin:auto;
padding:0;
background-image:url("background-menu.png");
}
#menu ul{
list-style-type:none;
text-align:center;
padding:0;
margin:auto;
border-color:black;
border-collapse:collapse;
}
#menu li{
vertical-align:top;
text-decoration:none;
list-style-type:none;
text-align:left;
width: 150px;
text-align:center;
}
#menu a{
list-style-type:none;
font-family:Arial;
color:#E9FAFF;
font-weight:bold;
color:white;
text-align:left;
text-decoration:none;
}
a.hover{
 color:#FFD4D4;
}
a.visited{
 color:#E9FAFF;
}
#obsah{
border-radius:10px;
padding:10px;
background-color:#7FE5FF;
vertical-align:top;
text-align:left;
}
#paticka{
background-image:url("background-foot.png");
height:20px;
width:900px;
border-radius:10px;
}
#paticka p{
font-size:12px;
text-align:center;
font-family:Arial;
color:#E9FAFF;
font-weight:bold;
}
Odpovědět
12.5.2012 18:13
Petr Khul
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na petr.khul
David Hartinger:12.5.2012 18:58

Nemáš to někde online? Moc se nevyžívám ve vkládání těch kódů do souborů...

Nahoru Odpovědět
12.5.2012 18:58
New kid back on the block with a R.I.P
Avatar
petr.khul
Člen
Avatar
Odpovídá na David Hartinger
petr.khul:12.5.2012 19:00

Zkusím to dodělat zatím s tímhle a potom sem hodím odkaz, třeba najdu ještě něco, co mi nepůjde :).
Zatím díky moc! ;)

Nahoru Odpovědět
12.5.2012 19:00
Petr Khul
Avatar
David Jančík
Vlastník
Avatar
Odpovídá na petr.khul
David Jančík:12.5.2012 19:02

Musíš nastavit odražení na 0.

#menu ul{
list-style-type:none;
margin-left: 0;
padding-left: 0;
}

Mimochodem ten kód je dost divokej.

Tag <center> se nepoužívá -> stačí atribut align.
Dále v css nastavuješ přespříliš vlastností. Polovina jich je tam zbytečných.

Nahoru Odpovědět
12.5.2012 19:02
Zapomeň, že je to nemožné a udělej to ;)
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na petr.khul
David Hartinger:12.5.2012 19:02

Fajn, ono víš co, furt to z toho fóra takhle zakládat do souborů, člověku z toho hrabe :)

Nahoru Odpovědět
12.5.2012 19:02
New kid back on the block with a R.I.P
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na David Jančík
David Hartinger:12.5.2012 19:04

Ani align není validní, chce to float v CSS.

Nahoru Odpovědět
12.5.2012 19:04
New kid back on the block with a R.I.P
Avatar
petr.khul
Člen
Avatar
petr.khul:12.5.2012 19:07

JOO!! Díky moc, funguje to :):):)

Nahoru Odpovědět
12.5.2012 19:07
Petr Khul
Avatar
petr.khul
Člen
Avatar
petr.khul:12.5.2012 19:08

A když jsme u toho, proč mi nefunguje border-radius v IE?:(

Nahoru Odpovědět
12.5.2012 19:08
Petr Khul
Avatar
David Jančík
Vlastník
Avatar
Odpovídá na David Hartinger
David Jančík:12.5.2012 19:09

Když chce vystředit text?

Tak to floatem neudělá ne? A psát to takhle?

center>
   <h3>Menu</h3>
   </center>

Lepší tohle ne?

<h3 align="center">Menu</h3>
Nahoru Odpovědět
12.5.2012 19:09
Zapomeň, že je to nemožné a udělej to ;)
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na petr.khul
Drahomír Hanák:12.5.2012 19:12

Border radius je vlastnost CSS3, která je podporována jen v IE9+

 
Nahoru Odpovědět
12.5.2012 19:12
Avatar
David Jančík
Vlastník
Avatar
Odpovídá na petr.khul
David Jančík:12.5.2012 19:12

No to víš IE.
Přidej tenhle meta tag.

<meta http-equiv="X-UA-Compatible" content="IE=9" />
Nahoru Odpovědět
12.5.2012 19:12
Zapomeň, že je to nemožné a udělej to ;)
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na David Jančík
David Hartinger:12.5.2012 19:13

Tam dáš text-align:center

Nahoru Odpovědět
12.5.2012 19:13
New kid back on the block with a R.I.P
Avatar
petr.khul
Člen
Avatar
Odpovídá na Drahomír Hanák
petr.khul:12.5.2012 19:13

Aha, ale díky ;)

Nahoru Odpovědět
12.5.2012 19:13
Petr Khul
Avatar
David Jančík
Vlastník
Avatar
Odpovídá na petr.khul
David Jančík:12.5.2012 19:15

Jinak zatím CSS3 není dokončené a pro každý prohlížeč (resp. v závislosti na jádře na kterém je postavený) je třeba CSS3 vlastnosti definovat jinak.
Třeba tohle je dobrý: http://css3generator.com/

Je super pogooglit a podívat se jak ty šupáci mají podporu pro CSS3 například gradient:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

A to ještě potřebují ten meta tag :D

By mě zajímalo, když už jim konečně dojde, že ten prohlížeč je pro smích. A jediný k čemu je dobrý je stažení si jiného :D

Nahoru Odpovědět
12.5.2012 19:15
Zapomeň, že je to nemožné a udělej to ;)
Avatar
Kit
Tvůrce
Avatar
Kit:12.5.2012 19:16

Jsem asi rejpal, ale ta stránka je o "Menu" nebo o "Vítejte"? Jiný nadpis tam nevidím, tak o čem ta stránka je?

Nahoru Odpovědět
12.5.2012 19:16
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Jančík
Vlastník
Avatar
Odpovídá na David Hartinger
David Jančík:12.5.2012 19:19

Taky možnost. Já tím chtěl říct, že se tag <center> nepoužívá a že jsou jiné, jednodušší a přehlednější možnosti jak text vystředit.

Nahoru Odpovědět
12.5.2012 19:19
Zapomeň, že je to nemožné a udělej to ;)
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na petr.khul
Drahomír Hanák:12.5.2012 19:21

Na generování CSS3 gradientů můžu doporučit ještě http://www.colorzilla.com/…ient-editor/ a na stránce http://caniuse.com/ je velmi pěkný přehled podpory všech nových vlastností jak HTML5 tak i CSS3 v moderních prohlížečích (i mobilních).

 
Nahoru Odpovědět
12.5.2012 19:21
Avatar
petr.khul
Člen
Avatar
Odpovídá na Kit
petr.khul:12.5.2012 19:22

Hlavičku s nadpisem mám zatím udělanou jako obrázek...

Nahoru Odpovědět
12.5.2012 19:22
Petr Khul
Avatar
Kit
Tvůrce
Avatar
Odpovídá na petr.khul
Kit:12.5.2012 19:25

Doufám, že jen zatím a že tam nebude nebo bude vložen přes CSS. Nadpis se dělá jako text ve značce h1.

Nahoru Odpovědět
12.5.2012 19:25
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
petr.khul
Člen
Avatar
Odpovídá na Kit
petr.khul:12.5.2012 19:29

Já vím, je to fakt jen zatím :P

Nahoru Odpovědět
12.5.2012 19:29
Petr Khul
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 20 zpráv z 20.