Diskuze: Menu

mnsk

Člen

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

Jurajs

Člen

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

Jurajs

Člen

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

Jurajs

Člen

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č

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.