HTML, CSS - vyplněné tlačítko

Dobrý, dělal jsem stylování pomocí jednoho tutoriálu ale nevím jak udělat aby tlačítko v menu bylo celé vyplněné tlačítko například s height a width. Takto vyplněné cssmenu1.png Kod je zde:

  <style>
    #containter {
      margin:0px auto;
      width:980px;
    }
    .menu {
      list-style:none;
      margin:0px; 
      padding:0px; 
      text-transform:uppercase;
      background:silver;
      border-bottom:3px solid grey;
    }
    .menu li {
      display:inline;
      zoom:1;
      *display:inline;
      padding:5px 15px 4px 15px;
    }
    .menu li a {
      text-decoration:none;
      line-height:40px;
    }
    .menu li a:hover{
      color:red;
      backgroud-color:black;
    }
  </style>
  <body>
    <div id="containter">
      <h1>test tutorial</h1>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <p>Copyright &copy test tutorial</p>
    </div>

Předmět	Autor	Datum
Ten dotaz je nejasný, zkusím hádat, že chceš tohle: .aktivni { background: aqua; } <li class="aktiv… IQ37 23.04.2013 09:57	IQ37	23.04.2013 09:57
... a máš tam překlep: .menu li a:hover{ color:red; backgroud-color:black; } host 23.04.2013 10:05	host	23.04.2013 10:05
Zkusil jsem Váš kod, ale neudělá mě to "padding" od textu barvou aqua se obalí jen text nikoli kolem… zlatacek 24.04.2013 11:52	zlatacek	24.04.2013 11:52
Asi reaguješ na mě, ale píšeš to někomu jinému. /* ------ navigace ----- */ .navigation { backgroun… IQ37 24.04.2013 18:17	IQ37	24.04.2013 18:17
Rady jsi dostal. Dám ti jednu na závěr. Pokud chceš opravdu něco vytvářet, nauč se alespoň základy H… albru123 24.04.2013 20:48	albru123	24.04.2013 20:48
webky = webové kamery webovky - internetové stránky :i: host 24.04.2013 21:26	host	24.04.2013 21:26
Sorry, mám tendenci vše si zkracovat :-D Vzhledem k tématu autor asi pochopil. poslední albru123 24.04.2013 21:34	albru123	24.04.2013 21:34

Ten dotaz je nejasný, zkusím hádat, že chceš tohle:

.aktivni {
background: aqua;
}
<li class="aktivni"><a href="#">Contact</a></li>

[http://pc.poradna.net/file/view/13723-aktivni-jpg]

PS: V tom tvém kódu máš dvě syntaktické chyby (za domácí úkol - opravit).

aktivni.jpg 11.30 KiB

... a máš tam překlep:

.menu li a:hover{
color:red;
backgroud-color:black;
}

Zkusil jsem Váš kod, ale neudělá mě to "padding" od textu barvou aqua se obalí jen text nikoli kolem dokola.

Asi reaguješ na mě, ale píšeš to někomu jinému.

/* ------ navigace ----- */
.navigation {
background: #D9E1E5;
border: 1px solid #ffffff;
height: 41px;
}
.navigation a {
background: silver;
border-right: 1px solid #D8EBD8;
color: #1C455E;
display: block;
float: left;
font: bold 15px sans-serif;
line-height: 41px;
padding: 0 18px;
text-decoration: none;
}
.navigation a:hover {
background: red;
color: #1C455E;
}
.navigation .aktualni {
background: aqua;
}
<div class="navigation">
<a href="#" title="Hlavní stránka">Domů</a>
<a class="aktualni" href="#" title="Rozsah služeb">Rozsah služeb</a>
<a href="#" title="Vzory">Vzory</a>
</div>

Doufám, že tvoje odpověď nebude ve smyslu: "Mi to tam nepasuje." Koukej se taky něco sám naučit.

menu.jpg 5.96 KiB

Rady jsi dostal. Dám ti jednu na závěr. Pokud chceš opravdu něco vytvářet, nauč se alespoň základy HTML a CSS, možná si řekneš: "Další chytrák, já potřebuju proadit a ne se něco učit", ale zvaž to. Naučení základů HTML a CSS tě nebude stát ani týden učení a můžeš vytvořit opravdu hezké webky (pokud máš hotovou grafiku).

webky = webové kamery
webovky - internetové stránky

Sorry, mám tendenci vše si zkracovat
Vzhledem k tématu autor asi pochopil.

Zpět do poradny Odpovědět na původní otázku Nahoru