FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Kubas129
Člen
Avatar
Kubas129:27.3.2020 13:57

Ahoj, jsem začátečník a zkouším si vytvořit webovou stránku, ale mám problém, chtěl bych posunout asi tak o 20px list dolů a místo toho se mi posouvá celý blok div :(
Předem děkuji za všechnu pomoc :)

<!DOCTYPE html>
<html>
<head>
<title>Daidalos-ikariam</title>
<meta name="author" content="Jakub">
<meta charset="UTF-8">
<meta name="description" content="alianční stránka aliance Daidalos Ikariamu svět MY">
<meta name="keywords" content="HTML, CSS, PHP, JavaScript">
<meta http-equiv="refresh" content="120">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css" >
</head>
<body>
<div id="container">
    <div id="header">
        </div>
        <div id="content">
                <div id=sada>
                        <div id="login">
                        </div>
                        <div id="nav">
                                <ul>
                                <li>Úvod</li>
                                <li>Novinky</li>
                                <li>O nás</li>
                                </ul>
                        </div>
                </div>
                <div id="main">
                </div>
        </div>
        <div id="footer">
        </div>
</div>

</body>
</html>
body{
        background-color:blue;
        width:auto;
        height:auto;
        margin-top:0;
}
#container
{
        width:920px;
        height:1280px;
        background-color: yellow;
        margin-left:auto;
        margin-right: auto;
}
#header{
        background-color:red;
        width:100%;
        height:180px;
}
#content{
        background-color:black;
        width:100%;
        height:1000px;
}
#sada{
        background-color: gray;
        float: left;
        height: 450px;
        width: 200px;
}
#login{
        background: brown;
        width: 100%;
        height: 150px;
}
#nav
{
        margin:0;
        padding:0;
        background-color: green;
        width: 100%;
        height: 300px;
}
#nav ul{
        list-style-type:none;
    padding: 0;
        text-align:center;
        type: block;
        margin:0;
        /*margin-top: 20; zde bych to chtel posunout dolu :(*/
        padding:0;
}

#main
{
        background:purple;
        width:720px;
        height: 1000px;
        float: right;
}
#footer{
        background-color: orange;
        width: auto;
        height:100px;
        clear:both;
}

Zkusil jsem: margin-top: 20px;
vytvořit nový blok do kterého bych dal jen ten list, ale to taky nepomohlo
nic jiného mě už nenapadá :(

Chci docílit: Posunout v nabídce nav, celý unorder list o 20 pixelů dolů, tak ale aby se posunul jen ten list nikoliv celý blok ve kterém ten list je umístěný

 
Odpovědět
27.3.2020 13:57
Avatar
Jurajs
Člen
Avatar
Odpovídá na Kubas129
Jurajs:27.3.2020 16:00

Ahoj zkus to napsat do #nav ....to by mělo jít ;)

 
Nahoru Odpovědět
27.3.2020 16:00
Avatar
Jurajs
Člen
Avatar
Odpovídá na Kubas129
Jurajs:27.3.2020 16:04

Beru zpět, ty tam máš chybu u <div id="sada"></div> chybí ti tam uvozovky ;)

 
Nahoru Odpovědět
27.3.2020 16:04
Avatar
Kubas129
Člen
Avatar
Odpovídá na Jurajs
Kubas129:27.3.2020 16:16

Díky moc, těch uvozovek jsem si nevšiml, nicméně mi to ale pořád nejde :(
když do #nav ul napíšu margin-top: 20px; tak pořád se posune celý ten div s tou zelenou barvou
a neposune se jenom ten element list :( což nechápu proč tomu tak je :(
když ten list se nachází v tom bloku nav a ja nastavuji pouze vlastnost tomu listu

 
Nahoru Odpovědět
27.3.2020 16:16
Avatar
Jurajs
Člen
Avatar
Odpovídá na Kubas129
Jurajs:27.3.2020 16:18

Koukám na to a chybí ti tam tohle

#nav li{
        margin-top: 20px;
}

ty upravuješ UL - nečíslovaný seznam a OL je číslovaný pokud dobře pamatuji, tohle patří do LI, ty chceš mezery mezi položkami v menu a položka v menu je <li> takhle jsem se to učil :D :D

Editováno
 
Nahoru Odpovědět
27.3.2020 16:18
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:27.3.2020 16:24

margin-top je mozne davat na disply:block, mozna inline-block. UL, LI je inline.
Cili, musis zmenit ul na display:block nebo pouzit margin, padding pro #nav.

 
Nahoru Odpovědět
27.3.2020 16:24
Avatar
Kubas129
Člen
Avatar
Odpovídá na Jurajs
Kubas129:27.3.2020 16:28

díky moc ale pořád to nechápu :/ se sice položky v listu posunou, ale taky se s tím zároven posune i celý ten blok nav :(
když to napíšu do #nav li ten margin-top: 20px;

 
Nahoru Odpovědět
27.3.2020 16:28
Avatar
Jurajs
Člen
Avatar
Odpovídá na Kubas129
Jurajs:27.3.2020 16:37

Bude nejlepší, když koukneš na články ITnetwork.cz ....Jak se to dělá, pač máš v tom fakticky guláš...Ani já se v tom pomalu nevyznám :D :D .....Ja ti zkusím něco poslat a zkus si to nějak upravit jak ti to bude vyhovovat

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

}

Jsou to položky vedle sebe, ale to ty umíš zkus to ;)

 
Nahoru Odpovědět
27.3.2020 16:37
Avatar
Kubas129
Člen
Avatar
Odpovídá na Jurajs
Kubas129:27.3.2020 16:54

a nehodil bys mi k tomu sem ještě prosim ten html kod?
Já jen, že tomu tvému css kodu úplně nerozumím, vím že navbar bude asi nějaká třída v tom listu ale nevím přesně k čemu je tam ten nav? Co jsem tak pochytil, tak nav by měl být speciální blok něco jako je div :D ale zdá se mi nesmysl dávat doprostřed listu blok
že takto ten html soubor asi nemá vypadat takto co? :(
jinak díky :)

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" >
</head>
<body>
                <ul class="navbar">
                <li>Doma</li>
                <li> nas</li>
                </ul>

</body>
</html>
 
Nahoru Odpovědět
27.3.2020 16:54
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Kubas129
Jaroslav Smrž:27.3.2020 17:02 
<nav class="navigation">
        <ul>
                <li class="styled-list"><a href="#">Odkaz0</a></li>
                <li class="styled-list"><a href="#">Odkaz1</a></li>
                <li class="styled-list"><a href="#">Odkaz2</a></li>
        </ul>
</nav>

Pak máš 2 možnosti. Buď stylovat ul li.styled-list nebo až a.

.navigation ul li.styled-list {
        display: block;
        margin-top: 20px;
}

nebo

li.styled-list a {
        display: inline-block;
        margin-top: 20px;
}
Nahoru Odpovědět
27.3.2020 17:02
/* Life runs on code */
Avatar
Jurajs
Člen
Avatar
Odpovídá na Kubas129
Jurajs:27.3.2020 19:17

Takhle vypadá celé menu v HTML

<div class="navbar">
    <nav>
      <ul>
        <li class="home">Home</li>
         <li>Services</li>
         <li>Projects</li>
         <li>Contact</li>

      </ul>
    </nav>
  </div>
 
Nahoru Odpovědět
27.3.2020 19:17
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 11 zpráv z 11.