Klávesnice zdarma Klávesnice zdarma
Pořádné programy s pořádnou klávesnicí zdarma. Více zde
Pouze tento týden sleva až 80 % na C# .NET
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
Redaktor
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 12.6.2018 20:45
Nahoru Odpovědět  +1 12.6.2018 20:44
Act as if it was Impossible to Fail
Avatar
Jiří Gavenda: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
"Kdybychom byli bez chyb, nezpůsobilo by nám takovou radost odhalovat chyby druhých. " - Francois de la Roc...
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ň: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í
+1 bodů
Řešení problému
Nahoru Odpovědět 14.6.2018 18:44
RD
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.