Přizpůsobivá navigace – CSS – Fórum – Programujte.com

Zdravím, mám menší problém s přizpůsobivostí navigace v záhlaví při zmenšení okna / na menší obrazovce, vše na stránkách se mi přizpůsobuje správně, jen to menu i přes použití stejných technik pořád zlobí a už nevím, co s tím.

Navigace mě běží přesně jak chci, viz obrázek:

Připojen obrázek.

Když však zmenším okno, nebo nahlížím na menší obrazovce, velikost se nepřizpůsobí a začne to takhle lítat:

Připojen obrázek.

Zřejmě mně něco v kódu chybí, ale netuším co, protože na vše ostatní (aside, obrázky, všechno) stačí stejné metody a menší obrazovce se přizpůsobuje

Kód v html:

<header>
      <nav rel="navigation">
      <ul class="zahlavi-odkazy">
        <li> <a href="index.html"> Hlavní stránka </a> </li>
        <li> <a href="Bujinkan-v-CR/Bujinkan-v-CR.html"> Bujinkan v ČR </a> </li>
        <li> <a href="Skoly/Skoly.html"> Školy </a> </li>
        <li> <a href="Soke/Soke.html"> Sóke </a> </li>
        <li> <a href="Valecnici/Valecnici.html"> Staří válečníci </a> </li>
        <li> <a href="Zbrane/Zbrane.html"> Zbraně </a> </li>
        <li> <a href="Stupne/Stupne.html"> Technické stupně </a> </li>
        <li> <a href="Techniky/Techniky.html"> Techniky </a> </li>
      </ul>
      </nav>
    </header>

Kód v css: 

header  {
        position: relative;
        height: 250px;
        background: url(zahlavi.jpg) right no-repeat;
        }
ul.zahlavi-odkazy{
  		 list-style-type: none;
 		 position: absolute;
		 left: 0;
 		 margin: 24% 0% 0%;
 	  	 padding: 0%;
  		 max-width:100%;
  		 }
.zahlavi-odkazy li{
                  display:block;
                  background: rgb(199,199,199);
                  border: 1px solid white;
                  float:left;
                  padding: 5px 2px;
                   }
.zahlavi-odkazy a{
                font-size:1.25em;
                text-decoration: none;
                padding: 5px 2px 5px;
                color: rgb(24,24,24);
                }
.zahlavi-odkazy a:focus, .zahlavi-odkazy a:hover, .zahlavi-odkazy a:active
                 {
                 background: rgb(247,247,247);
                 padding: 5px 2px 5px;
                 }

Doufám, že se to tu už neřešilo, ale odpověď jsem ve starších příspěvcích nenašel. Moc děkuji za pomoc.

nav uzavrit do divu, obrazek s nav-dvem uzavrit do dalsiho. Vnejsimu nastavis rozmery a position relativel vnitrnimu position absolute; bottom:0. A mohlo by se to drzet vzdy dole.

Moderne se to resi tak, ze se menu schova pod tlacitko 3 vodorovnych carek [=] , kdyz se zmensi sirka. Za mne je to teda nic moc reseni.

#2 peter
Díky, pomohlo to, drží se to krásně dole a myslím, že už můžu být s tím fungováním spokojen, nicméně přestože to z velké části můj problém vyřešilo, spíše mě zajímalo (možná sem to špatně formuloval), jak to menu automaticky zmenšovat se zmenšováním okna, když mám třeba v textu obrázek, tak když zmenším okno, obrázku nezůstane původní velikost, ale zmenší se úměrně velikosti okna (díky height a width udané v %), to menu se však velikosti nepřizpůsobuje - nezmenšuje se. Tak jak udělat tohle? Popřípadě jak udělat alternativní řešení, aby se celá stránka NEpřizbůsobovala, zůstala pořád stejně velká a místo toho byl dole posuvník. Zkoušel jsem experimentovat se scroll, ale nějak mně to nefunguje.

To bude chtit mozna obrazky. css3 ma prizpusobovani obrazku i moznost zmenit css pro ruznou witdh obrazovky. Zas tolik to neovladam, google :)