Avatar
balaz.marek94:12. června 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. června 20:19
Avatar
Peter Sciranka
Redaktor
Avatar
Odpovídá na balaz.marek94
Peter Sciranka:12. června 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. června 20:45
Nahoru Odpovědět  +1 12. června 20:44
Act as if it was Impossible to Fail
Avatar
Jiří Gavenda:13. června 17:33

Mělo by stačit přidat

nav ul {
    padding-left: 0;
}
Nahoru Odpovědět 13. června 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. června 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. června 18:28
RD
Avatar
Roman Duchoň:14. června 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. června 18:44
RD
Avatar
balaz.marek94:16. června 21:16

Ďakujem všetkým za rady :)

 
Nahoru Odpovědět 16. června 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.