Diskuze: Menu vodorovne

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 12:10

Prosim muze mi nekdo poradit jak Tohle nasrylovat tak aby to bylo vedle sebe a ne pod sebou? Diky i za nadavky jak jsem neschopnej (to cloveka nakopne).

Odpovědět

30.6.2017 12:10

dez1nd

Člen

dez1nd:30.6.2017 12:28

HTML tag <menu></menu> je k vykreslení toolbarmenu ne ? např. zde https://www.w3schools.com/…tag_menu.asp

jinak přidat do stylu

menu li
{
        float:left;
}

a nezapomeň, že nemáš uzavřený tag <div>

Editováno 30.6.2017 12:31

Nahoru Odpovědět

30.6.2017 12:28

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 12:38

Ani tak me to nepomohlo abys vedel v cem presne mam problem tak ti dam dalsi Odkaz

Nahoru Odpovědět

30.6.2017 12:38

dez1nd

Člen

dez1nd:30.6.2017 12:56

ten odkaz je nefunkční

Nahoru Odpovědět

30.6.2017 12:56

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 13:06

Pardon Odkaz

Nahoru Odpovědět

30.6.2017 13:06

Jiří Fencl

Člen

Jiří Fencl:30.6.2017 13:06

Asi by jsis mel nejdriv nastudovat zaklady html :

pro <menu> musis dat list-style:none
pro li musis dat float:left a tem <a> display:block aby byla cela oblast aktivni a zde teprve nastavovat paddingy, vysku, vysku radku (+vertical middle)

Editováno 30.6.2017 13:07

Nahoru Odpovědět

30.6.2017 13:06

Jakub Klindera

Člen

Jakub Klindera:30.6.2017 13:20

Mohlo by to vypadat nějak takto, pokud by tam byly i nějaké rozestupy mezi odkazy.

<!DOCTYPE html>
<html>
<head>
        <title></title>


<style>

        #menu ul li{
                list-style-type: none;
                float: left;
                margin: 5px 20px 0px 20px;
        }

        #menu ul li a {
        font-size: 24px;
        text-decoration: none;
                }

</style>

</head>
<body>



<div id="menu">
 <ul>
  <li><a href="#">odkaz 1</a></li>
  <li><a href="#">odkaz 2</a></li>
  <li><a href="#">odkaz 3</a></li>
  </ul>
</div>



</body>
</html>

Mohl by sis vytvořit zvlášť soubor styl.css, kde bys zapisoval CSS kódy. Akorát musíš bys musel připsat do hlavičky

<link rel="stylesheet" type="text/css" href="styl.css">

Ale doporučuji ti, aby ses podíval na základy

Editováno 30.6.2017 13:23

Nahoru Odpovědět

30.6.2017 13:20

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 13:21

style.css už mam nechce se mi vse zapisovat do jednoho souboru. Jinak dik skusím to

Nahoru Odpovědět

30.6.2017 13:21

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 13:30

Tak jsem to skusil a stejně se nic nezmenilo....

Nahoru Odpovědět

30.6.2017 13:30

dez1nd

Člen

dez1nd:30.6.2017 13:31

Bude nejlepší, když pošleš svůj kód

Nahoru Odpovědět

30.6.2017 13:31

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 13:35

Zde Odkaz nejde mi kopírování nevím proč, tak snasd si poradiš.

Nahoru Odpovědět

30.6.2017 13:35

dez1nd

Člen

dez1nd:30.6.2017 13:38

Vidím, že se ve styl.css odkazuješ na třídu ale v HTML máš jen id. předělej ve styl.css z .menu ul li na #menu ul li

Editováno 30.6.2017 13:39

Nahoru Odpovědět

30.6.2017 13:38

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 13:41

Když dam do kodu šárp# tak mi kod vubec nefunguje

Nahoru Odpovědět

30.6.2017 13:41

dez1nd

Člen

dez1nd:30.6.2017 13:43

HTML

<div id="menu">
        <ul>
                <li><a href="#">odkaz 1</a></li>
                <li><a href="#">odkaz 2</a></li>
        </ul>
</div>

CSS

#menu ul li{
   list-style-type: none;
   float: left;
   margin: 5px 20px 0px 20px;
}
#menu ul li a {
   font-size: 24px;
   text-decoration: none;
}

nebo druhá varianta

HTML

<div class="menu">
        <ul>
                <li><a href="#">odkaz 1</a></li>
                <li><a href="#">odkaz 2</a></li>
        </ul>
</div>

CSS

.menu ul li{
   list-style-type: none;
   float: left;
   margin: 5px 20px 0px 20px;
}
.menu ul li a {
   font-size: 24px;
   text-decoration: none;
}

Editováno 30.6.2017 13:45

Nahoru Odpovědět

30.6.2017 13:43

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 13:45

Mám tu druhou variantu, ale jak jsem psal... I tak to nejde

Nahoru Odpovědět

30.6.2017 13:45

dez1nd

Člen

dez1nd:30.6.2017 13:48

http://webminer.8u.cz/ tenhle odkaz je nejaktuálnější ?

Nahoru Odpovědět

30.6.2017 13:48

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 13:52

Ano

Nahoru Odpovědět

30.6.2017 13:52

Jakub Klindera

Člen

Jakub Klindera:30.6.2017 13:54

A napsal si, odkud má HTML čerpat CSS kód ?

Do <head> </head> napiš:

<link rel="stylesheet" href="style.css" type="text/css">

Takže celý kód:

<html>
<head>
        <title>WebMiner</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <meta charset="utf-8">
</head>
<body>
<div id="menu">
        <ul>
                <li><a href="#">odkaz 1</a></li>
                <li><a href="#">odkaz 2</a></li>
        </ul>
</div>
</body>
</html>

Nahoru Odpovědět

30.6.2017 13:54

dez1nd

Člen

dez1nd:30.6.2017 13:55

Stále vidím že ve stylu pro menu je místo mřížky tečka (nebo v HTML místo class je tam id)
přečti si základy. mřížka v CSS se odkazuje na id a tečka se odkazuje na class.
Ještě tam dělají neplechu ty divy s pozadím.. zakomentuj je a bude to fungovat.

Editováno 30.6.2017 13:56

Nahoru Odpovědět

30.6.2017 13:55

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 13:56

Ten odkaz na style.css tam mam. Vse mi jde jen to menu nejde.

Nahoru Odpovědět

30.6.2017 13:56

Jakub Klindera

Člen

Jakub Klindera:30.6.2017 14:11

Dodej sem jak HTML kód, tak CSS kód.

Nahoru Odpovědět

30.6.2017 14:11

Ladislav Viktorin

Člen

Ladislav Viktorin:30.6.2017 14:40

Html

<html>
        <head>
                <title>WebMiner</title>
                <link rel="stylesheet" href="style.css" type="text/css">
        </head>
<body>

        <div class="obal">
                <div id="menu">
                <ul>
                        <li><a href="#">odkaz 1</a></li>
                        <li><a href="#">odkaz 2</a></li>
                </ul>
                        </div>
                <img src="http://webminer.8u.cz/yyy.potx.png">
</div>

        <div class="obalB">
                <img src="http://webminer.8u.cz/yyy.potx.png">
</div>

        <div class="obalC">
                <img src="http://webminer.8u.cz/yyy.potx.png">
</div>

</body>
</html>

Css

.obalA img {
   width: 100%;
   max-width: 1000px;
   height: 10%;
   max-height: 300px;
   border: 3px solid brown;
   box-sizing: border-box;
   display: block;
   border-radius: 30px;
   position: absolute;
   box-shadow: 30px 30px 30px brown;
   background: white;
}
#menu ul li{
   list-style-type: none;
   float: left;
   margin: 5px 20px 0px 20px;
}
#menu ul li a {
   font-size: 24px;
   text-decoration: none;
}
.obalB img {
   width: 70%;
   max-width: 750px;
   height: 85%;
   max-height: 1100px;
   border: 3px solid brown;
   box-sizing: border-box;
   display: block;
   border-radius: 30px;
   position: absolute;
   top: 15%;
   float: right;
   left: 30%;
   box-shadow: 30px 30px 30px brown;
   background: white;
}
.obalC img {
   width: 25%;
   max-width: 250px;
   height: 85%;
   max-height: 1100px;
   border: 3px solid brown;
   box-sizing: border-box;
   siaplay: block;
   border-radius: 30px;
   position: absolute;
   top: 15%;
   float: left;
   box-shadow: 30px 30px 30px brown;
   background: white;
}

mam k tomu obrazek

Nahoru Odpovědět

30.6.2017 14:40

Jan Štrobl

Člen

Jan Štrobl:30.6.2017 14:50

HTML

<body>
  <div id="obal">
      <div id="horni">
       <ul id="menu">
       <li>Položka</li>
        <li>Položka2</li>
        <li>Položka3</li>
       </ul>
      </div>


  <div id="obsah">
  </div>

  </div>
 </body>

Styly

#obal {margin: 0px auto; height: 1200px; width: 900px; border: 1px solid;}
#horni {margin: 0px auto; height: 200px; width: 900px;}
#obsah {margin: 0px auto; width: 900px;}
#menu {display: inline-block;}
#menu li {list-style-type: none; float: left; background-color: yellow; margin-left: 20px;}

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

30.6.2017 14:50

Jakub Klindera

Člen

Jakub Klindera:30.6.2017 15:03

Myslím si, že si stále nepochopil divování, přečti si tutoriály se základy HTML, které jsou výš. Navíc, teď tam to menu máš zarovnané vedle sebe a ne pod sebou, tak jak si chtěl.

Nahoru Odpovědět

30.6.2017 15:03

Nejčastěji vyhledáváné

Diskuze: Menu vodorovne