September discount week
Tento týden až 80% sleva na e-learning týkající se jazyka C
50 % bodů zdarma na online výuku díky naší Slevové akci!
Avatar
Martin Škopek:4. ledna 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. ledna 10:27
Avatar
Jurajs
Člen
Avatar
Odpovídá na Martin Škopek
Jurajs:4. ledna 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. ledna 11:57
 
Nahoru Odpovědět
4. ledna 11:56
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jurajs
Člen
Avatar
Odpovídá na Martin Škopek
Jurajs:4. ledna 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. ledna 12:37
Avatar
Jurajs
Člen
Avatar
Odpovídá na Martin Škopek
Jurajs:4. ledna 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í
+1 bodů
Řešení problému
 
Nahoru Odpovědět
4. ledna 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.