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