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

HTML a CSS HTML a CSS Zarovnání odkazu - odrážky na střed menu American English version English version

Avatar
petr.khul
Člen
Avatar
petr.khul:

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 Čápka
Tým ITnetwork
Avatar
Odpovídá na petr.khul
David Čápka:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
petr.khul
Člen
Avatar
Odpovídá na David Čápka
petr.khul:

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
Odpovídá na petr.khul
David Jančík [sczdavos]:

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
Čím více času dostaneš, tím méně ho máš.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na petr.khul
David Čápka:

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
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na David Jančík [sczdavos]
David Čápka:

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

Nahoru Odpovědět 12.5.2012 19:04
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
petr.khul
Člen
Avatar
petr.khul:

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

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

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

Nahoru Odpovědět 12.5.2012 19:08
Petr Khul
Avatar
Odpovídá na David Čápka
David Jančík [sczdavos]:

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
Čím více času dostaneš, tím méně ho máš.
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na petr.khul
Drahomír Hanák:

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

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

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
Čím více času dostaneš, tím méně ho máš.
Avatar
David Čápka
Tým ITnetwork
Avatar
Nahoru Odpovědět 12.5.2012 19:13
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
petr.khul
Člen
Avatar
Nahoru Odpovědět 12.5.2012 19:13
Petr Khul
Avatar
Odpovídá na petr.khul
David Jančík [sczdavos]:

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
Čím více času dostaneš, tím méně ho máš.
Avatar
Kit
Redaktor
Avatar
Kit:

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
Odpovídá na David Čápka
David Jančík [sczdavos]:

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
Čím více času dostaneš, tím méně ho máš.
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na petr.khul
Drahomír Hanák:

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:

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
Redaktor
Avatar
Odpovídá na petr.khul
Kit:

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:

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.