NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Menu

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
mnsk
Člen
Avatar
mnsk:4.1.2020 10:27

Zdravím, dělám webovou stránku a potřeboval bych pomoc.
Jak mám v menu dát od sebe ty položky? (Úvodní, Umístění, apod. )
Jak mám přiblížit nápis "Úvodní strana" k menu? "
Stránka

html kod

<!DOCTYPE html>
<html>
<head>
   <title>Kapucínský klášter</title>
   <link rel="shortcut icon" href="ikony/web.ico" type="image/x-icon">
   <link rel="stylesheet" type="text/css" href="styl.css">
   <meta charset="utf-8">
</head>

<body>
  <header>

    <img src="obr/klaster_s_nazvem.png" width="15%" height="15%">

  </header>

  <nav>

    <ul>
      <li>Úvodní</li>
      <li>Umístění</li>
      <li>Historie</li>
      <li>Fotografie</li>

    </ul>
  </nav>

    <div class="uvodni">

      <h1>Úvodní strana</h1>

    </div>


 <footer>


  </footer>
</body>


</html>

css kod

header {
    background-color: #F5F5F5;
}
                                                                                    /* menu_zacatek */
nav ul  {
    background-color: #585858;
    font-size: 25px;
    text-align: center;
    color: white;
    margin: 0px;
 }

nav ul li {
    display: inline-block;
    list-style-type: none;


}

li {
   padding: 1%;

}

li:hover {
    background-color: #A9A9A9;

}

body {
    margin: 0px;
}                                                                                   /* menu_konec */

.uvodni {
  text-align: center;
  color: black;
  font-size: 25px;
  text-decoration: underline;
  background-color: #F5F5F5;
}
 
Odpovědět
4.1.2020 10:27
Avatar
Jurajs
Člen
Avatar
Odpovídá na mnsk
Jurajs:4.1.2020 11:56

Já jsem to vyřešil takhle :

.navbar nav {
  margin-top: 3vh;
  float: right;
  margin-right: 10vh;
}
.navbar nav ul{
  list-style-type: none;
}
.navbar nav ul li{
  display: inline;
  padding-left: 20vh;  /* <====   Tohle je řešení jak dát položky od sebe :) */

}
Editováno 4.1.2020 11:57
 
Nahoru Odpovědět
4.1.2020 11:56
Avatar
Jurajs
Člen
Avatar
Odpovídá na mnsk
Jurajs:4.1.2020 12:37

Máš v tom trošku zmatek, v CSS máš body kde si dolů, dej ho nahoru...zkus ten nadpis - uvodní strana dát nahoru k menu pomocí margin-bottom...

 
Nahoru Odpovědět
4.1.2020 12:37
Avatar
Jurajs
Člen
Avatar
Odpovídá na mnsk
Jurajs:4.1.2020 13:23

Kouknul jsem na to a trochu jsem ti to popravil...

<!DOCTYPE html>
<html>
<head>
   <title>Kapucínský klášter</title>
   <link rel="shortcut icon" href="ikony/web.ico" type="image/x-icon">
   <link rel="stylesheet" type="text/css" href="styl.css">
   <meta charset="utf-8">
</head>

<body>
  <header>

    <img src="obr/klaster_s_nazvem.png" width="15%" height="15%">

  </header>

  <nav>

    <ul>
      <li>Úvodní</li>
      <li>Umístění</li>
      <li>Historie</li>
      <li>Fotografie</li>

    </ul>
  </nav>

     <div class="uvodni_text">
    <div class="uvodni">

      <h1>Úvodní strana</h1>

    </div>
  </div>


 <footer>


  </footer>
</body>


</html>
body {
    margin: 0px;
}
header {
    background-color: #F5F5F5;
}
                                                                                    /* menu_zacatek */
nav ul  {
    background-color: #585858;
    font-size: 25px;
    text-align: center;
    color: white;
    margin: 0px;
 }

nav ul li {
    display: inline-block;
    list-style-type: none;
    padding-left: 120px;

}

li {
   padding: 1%;

}

li:hover {
    background-color: #A9A9A9;

}                                                                                   /* menu_konec */

.uvodni_text{
  position: relative;
   bottom: 33px;
}
.uvodni {
  text-align: center;
  color: black;
  font-size: 25px;
  text-decoration: underline;
    background-color: #F5F5F5;
}
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
4.1.2020 13:23
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 4 zpráv z 4.