Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Ladislav Viktorin
Člen
Avatar
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
Avatar
dez1nd
Člen
Avatar
Odpovídá na Ladislav Viktorin
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
 
Nahoru Odpovědět
30.6.2017 12:28
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na dez1nd
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
Avatar
dez1nd
Člen
Avatar
Odpovídá na Ladislav Viktorin
dez1nd:30.6.2017 12:56

ten odkaz je nefunkční ;)

 
Nahoru Odpovědět
30.6.2017 12:56
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na dez1nd
Ladislav Viktorin:30.6.2017 13:06

Pardon Odkaz

 
Nahoru Odpovědět
30.6.2017 13:06
Avatar
Jiří Fencl
Člen
Avatar
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
 
Nahoru Odpovědět
30.6.2017 13:06
Avatar
Jakub Klindera
Člen
Avatar
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
 
Nahoru Odpovědět
30.6.2017 13:20
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na Jakub Klindera
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
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na Ladislav Viktorin
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
Avatar
dez1nd
Člen
Avatar
Odpovídá na Ladislav Viktorin
dez1nd:30.6.2017 13:31

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

 
Nahoru Odpovědět
30.6.2017 13:31
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na dez1nd
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
Avatar
dez1nd
Člen
Avatar
Odpovídá na Ladislav Viktorin
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
 
Nahoru Odpovědět
30.6.2017 13:38
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na dez1nd
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
Avatar
dez1nd
Člen
Avatar
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
 
Nahoru Odpovědět
30.6.2017 13:43
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na dez1nd
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
Avatar
dez1nd
Člen
Avatar
Odpovídá na Ladislav Viktorin
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
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na dez1nd
Ladislav Viktorin:30.6.2017 13:52

Ano

 
Nahoru Odpovědět
30.6.2017 13:52
Avatar
Jakub Klindera
Člen
Avatar
Odpovídá na Ladislav Viktorin
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
Avatar
dez1nd
Člen
Avatar
Odpovídá na Ladislav Viktorin
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
 
Nahoru Odpovědět
30.6.2017 13:55
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na Jakub Klindera
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
Avatar
Jakub Klindera
Člen
Avatar
Odpovídá na Ladislav Viktorin
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
Avatar
Ladislav Viktorin
Člen
Avatar
Odpovídá na Jakub Klindera
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
Avatar
Jan Štrobl
Člen
Avatar
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č
Řešení problému
 
Nahoru Odpovědět
30.6.2017 14:50
Avatar
Jakub Klindera
Člen
Avatar
Odpovídá na Ladislav Viktorin
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
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 24 zpráv z 24.