NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
balaz.marek94
Člen
Avatar
balaz.marek94:12.6.2018 20:19

Zdravím, pustil som sa do tvorby jednej stránky a menu, ktoré som vytvoril, je odsadené z ľavej strany niekoľko pixelov (zobrazené na obrázku), vedeli by ste mi prosím poradiť, ako to opraviť?
HTML kód stránky:

<!DOCTYPE html>
<html>
        <head>
                <title>Any Smarties blog</title>
                <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
                <div id="header">

                        <nav >
                                <ul>
                                        <li class="menu_item">
                                                <a href="#">CESTOVANIE</a>
                                        </li>
                                        <li class="menu_item">
                                                <a href="#">FOTKY</a>
                                        </li>
                                        <li class="menu_item">
                                                <a href="#" >FOTKY</a>
                                        </li>
                                        <li id="any_smarties">
                                                <div>Any Smarties</div>
                                        </li>
                                        <li class="menu_item">
                                                <a href="#">FOTKY</a>
                                        </li>
                                        <li class="menu_item">
                                                <a href="#">ON MY MIND</a>
                                        </li>
                                        <li class="menu_item">
                                                <a href="#">OTHER</a>
                                        </li>

                                </ul>
                        </nav>
                </div>


        </body>
</html>

CSS kód

body {
        background-image: url(images/pinkwatercolor.jpg);
        background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
        background-color: #FFF;
}

@font-face {
    font-family: basictitlefont;
    src: url(fonts/basictitlefont.ttf);
}

@font-face {
    font-family: pakudascript;
    src: url(fonts/pakudascript.ttf);
}

#header {
    height: 300px;
}

nav ul {
  margin-top: 25px;
  width: 100%;
  display: table;
  table-layout: fixed;
}

nav ul li {
  border-style: inset;
  border-width: 1px 0px 1px 0px;
  display: table-cell;
  width: 15%;
  text-align: center;
}

nav a {
        color: #000;
        text-decoration: none;
        font-family: basictitlefont;
        font-size: 20px;
}

Za každú radu vopred ďakujem :-)

Chci docílit: Odstrániť odsadenie menu.

 
Odpovědět
12.6.2018 20:19
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na balaz.marek94
Peter Sciranka:12.6.2018 20:44

Ahoj, asi to nebude úplne týmto, ale na začiatku CSS je dobré "vynulovať" predvolené marginy a paddingy aspoň nejak takto:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

Najlepšie je takýto problém riešiť v chrome dev tools (stlač f12), kde v menu úplne v pravo hore je štvorec so šípkou, tak na to klikneš (prípadne klávesová skratka je: CTRL + SHIFT + C) a potom choď kurzorom na to odsadenie a malo by sa ti ukázať, že kde je problém.

Dúfam, že som to napísal aspoň trochu zrozumiteľne :)

Ak by si si nevedel rady, tak napíš.

Editováno
Nahoru Odpovědět
12.6.2018 20:44
Act as if it was Impossible to Fail
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:13.6.2018 17:33

Mělo by stačit přidat

nav ul {
    padding-left: 0;
}
Nahoru Odpovědět
13.6.2018 17:33
Neaktivní uživatelský účet
Avatar
Roman Duchoň
Člen
Avatar
Odpovídá na balaz.marek94
Roman Duchoň:14.6.2018 18:28

Už jsem zas na HTML dlouho nekoukl...
Ale co takové to:

body {
    margin: 0 auto;
}

?

A vůbec... přijde mi, že máš sice u nav ul šířku 100%, ale neměli by se dědit (to jest mít width: 100% i u body a html)?

Nahoru Odpovědět
14.6.2018 18:28
RD
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:14.6.2018 18:44

No, zkoušel jsem to a problém je u odrážek ul (zmátlo mě display: table-cell;).

Tak tedy, jak bylo řečeno:

nav ul {
padding: 0;
}

Sorry za příspěvek číslo 2, ale nemohu tu nechat jen samotný ten předchozí. :D

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
14.6.2018 18:44
RD
Avatar
balaz.marek94
Člen
Avatar
balaz.marek94:16.6.2018 21:16

Ďakujem všetkým za rady :)

 
Nahoru Odpovědět
16.6.2018 21:16
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 6 zpráv z 6.