Diskuze: Posunutí textu (basic)

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

Aktivity

Kubas129

Člen

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

Jurajs

Člen

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

Jurajs

Člen

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

Kubas129

Člen

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

Jurajs

Člen

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

Editováno 27.3.2020 16:20

Nahoru Odpovědět

27.3.2020 16:18

Peter Mlich

Člen

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

Kubas129

Člen

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

Jurajs

Člen

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

Kubas129

Člen

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

Jaroslav Smrž

Tvůrce

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 */

Jurajs

Člen

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.

Nejčastěji vyhledáváné

Diskuze: Posunutí textu (basic)