Menu stránky

Neviem123

čaute, som uplny začiatočník čo sa týka HTML a CSS takže ten predom upozornujem že nasledujuci text môže vyvolat u profesionalov so slabšou povahou minimalne šok ak nie horšie. Ešte upozornujem že ak má niekto potrebu odpovedat len o tom aký som neschopný idiot tak nech sa tiež rovno zdekuje.

Snažím sa urobiť menu na svojej stránke no ako som už povedal som v tom totálny začiatočnik takže jediné čo viem urobiť je napísať na dané miesto odkaz cez, ktorý sa prepnete na dalšiu stránku. To mi samozrejme nestačí. Potreboval by som vediet ako to urobiť aby tieto odkazy neboli nalepené priamo na sebe, a ako spravit aby boli v strede poprípade iné vychytávky. Zatial som to spravil takto:

Kód: Vybrať všetko

<nav>
   <ul id="menu">
   <a href="index.html"><li>Úvod</li></a>
<li><a href="index.html">prva</a></li>
<li><a href="index.html">druha</a></li>
<li><a href="index.html">tretia</a></li>
</ul>
   </nav>

Dopredu ďakujem neznámej dobrej duši, ktorá sa stým bude babrať i keď viem že pre mnohých to je totálna hračka..

Numline1

Najlepsie bude do istej miery zapojit aj CSS, odporucam ti pozriet si http://www.w3schools.com/css/css_navbar.asp
Konkretne cast "horizontal menu". Je to otazka nastavenia "display: inline" pre "li" element.

Neviem123

Aha. http://www.w3schools.com/css/tryit.asp? ... t_advanced
To je to čo som chcel, ale neviem ako to zakomponovat do tohto:

Spoiler

Kód: Vybrať všetko

<!doctype html>
<html lang='sk'>
  <head>
    <title></title>
    <meta charset='utf-8'>
    <meta name='description' content=''>
    <meta name='keywords' content=''>
    <meta name='author' content=''>
    <meta name='robots' content='all'>
    <!-- <meta http-equiv='x-ua-compatible' content='ie=edge'> -->
    <link href='/favicon.png' rel='shortcut icon' type='image/png'>
    <style>
    header, nav, aside, main, footer {
    } 
    header {
     background-color: rgb(255,0,0);
     height: 150px;
     }
    
    nav {
     background-color: rgb(0,255,0);
     height: 50px;
     }
     
     aside {
      background-color: rgb(0,0,255);
      height: 601px;
      float: left;
      width: 100;
      }
      
      main {
       background-color: rgb(255,255,51);
       height: 601px;
       margin-left: 248px;
       }
       
       footer {
        background-color: rgb(204,204,255);
        height: 100px;
        clear: left;
        }
        
       #menu li{
        display: inline; 
        width: 24%;
        }
        
       #menu li a{
        text-decoration: none;
        }
        
        #menu {
        margin: 0;
        padding: 10 px 0 10px 0;
        }
        
       </style>
  </head>
  <body>
   <header>
   
   <img src="http://aussiesinphuket.com/pictures/phuket-beach-banner.jpg" width="1333" height="150">
     
   </header>
   <nav>
   
   <div style="text-align: center">
   <ul id="menu">
   <a href="index.html"><li>Úvod</li></a>
<li>&nbsp&nbsp<a href="index.html">prva</a></li>
<li>&nbsp&nbsp&nbsp<a href="index.html">druha</a></li>
<li>&nbsp&nbsp&nbsp&nbsp<a href="index.html">tretia</a></li>
</ul>
   </div>
   </nav>
   <aside>
   <img src="http://www.primatravel.sk/images/banner_italy.jpg" width="255" height="600">
   </aside>
   <main>
    <section>
    test

    </section>
    
    <section>
    
    </section>
   </main>
   <footer>
   
   <br><br>Vyrobil ------ -----------</br></br>
   
   </footer>
  </body>
</html>

Teda samozrejme, že to staré menu by sme vymazali to si nevšimajte.

Numline1

V tvojom pripade je CSS priamo v subore, v tagu <style>, takze to hod tam, presne ako to vidis v ukazke.

nav li {display: inline;}

(nav preto, aby to bolo iba v <nav> tagu a nie v celej stranke, <li> je tag v tvojom liste, ale to uz asi vies).

PS: to &nbsp&nbsp&nbsp&nbsp z tych odkazov si prosim ta vyhod, je to mega prasacina.

Neviem123

Skusil by si to tam dať ty? Neviem jak presne to tam mám dať, skušal som všade a furt to robí neplechu a celé sa to rozhádže atd.

Zatial sa mi to podarilo len takto (čo tam je zle neviem

)

http://www.imagehosting.cz/?v=beznzvblb.png

Numline1

Skopiruj si "ul", "li", "a:link" a "a:visited" definicie z toho CSSka, ktore si pastol, oprav si prvy link v menu (mas prehodeny tag <li> a <a>, zmaz tie nbsp, idcko "menu" pouzi na nadradenom dive namiesto ul (tomu divu zmaz text-align). Este odporucam pred to skopirovane CSS z tvojho linku hodit aj #menu, aby si to nemal pre cely dokument. Nasledne by to malo vyzerat cca takto - http://puu.sh/ihbl4/1137fe9ba3.jpg

Zvysok si uz uprav (vysku nav a podobne).

Neviem123

EDIT:Už som tomu pochopil. Ide to. Ešte sa ozvem ak bude problém. Ďakujem ti veľmi pekne za pomoc !

//autoeditácia príspevku (10 Jún 2015, 16:15)
Keď hovoríš že to nbsp je prasačina tak ako by som mal inak použit medzeru? Hocikto mi poraďte.

Numline1

No vidis, schvalne som pockal, kym na to prides.   je tzv. non-breaking space, primarne je dost zle ho pouzivat, hlavne na stylizovanie stranky. Neviem sice, o co si sa pokusal, ale ak si chcel iba odsadit text v menu, tak najvhodnejsia alternativa je asi tiez CSS a left-padding alebo left-margin (vnutorne a vonkajsie okraje). V podstate by to spravilo to, ze ti to posunie text o par pixelov. Viac info Google.

Menu stránky

Menu stránky

Re: Menu stránky

Re: Menu stránky

Re: Menu stránky

Re: Menu stránky

Re: Menu stránky

Re: Menu stránky

Re: Menu stránky