Přizpůsobivá navigace – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín

Spuštěný nový filmový web Filmožrouti.cz — vše o Avengers, Pacific Rim, Thor, Star Wars…
Lori0
Duch
8. 2. 2018   #1
-
0
-

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.

Nahlásit jako SPAM
IP: 176.74.128.–
peter
~ Anonymní uživatel
3135 příspěvků
9. 2. 2018   #2
-
+1
-
Zajímavé

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.

Nahlásit jako SPAM
IP: 2001:718:2601:258:989:6fa...–
Lori0
Duch
9. 2. 2018   #3
-
0
-

#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.

Nahlásit jako SPAM
IP: 176.74.128.–
peter
~ Anonymní uživatel
3135 příspěvků
12. 2. 2018   #4
-
0
-

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

Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:38...–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 14 hostů

Podobná vlákna

Navigace — založil A-dy

Navigace — založil Dagi

Drobečková navigace — založil Paja2

PHP - navigace — založil matouch

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý