Autor Zpráva
Pringi
Profil *
Ahoj,
snažím se vycentrovat div top_content, ale nefunguje to a netuším proč... html a body má nastavené width i height na 100%...

css:
html, body {
    background-image: url("img/bg_a_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.top_menu {
    display: table;
    width: 100%;
    height: 5%;
    background: #000;
    opacity: 0.5;
}

.top_menu ul li {
    display: inline;
}

.top_menu ul li a {
    color: #fff;
    font-size: 15px;
    text-decoration: none;
}

.top_menu ul li a:hover {
    color: #ff0000;
    font-weight: bold;
}

.line {
    color: #fff;
}

.top_content {
    margin-left: 0 auto;
    margin-right: 0 auto;
    color: #fff;
    font-weight: bold;
    font-size: 100%;
}

html:
<!DOCTYPE html>
<html lang="cs">
<head>
  <title>Flat UI</title>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
</head>

<body>
<nav class="top_menu">
  <ul>
    <li><a href="#">ÚVOD</a></li><span class="line"> | </span>
    <li><a href="#">PORTFOLIO</a></li><span class="line"> | </span>
    <li><a href="#">REFERENCE</a></li><span class="line"> | </span>
    <li><a href="#">O MNĚ</a></li><span class="line"> | </span>
    <li><a href="#">KONTAKT</a></li>
  </ul>
</nav>

<div class="top_content">
    <p>THE FUTURE STARTS HERE.</p>
</div>

</body>

</html>

Živou ukázku nemužu přiložit, protože nemám k dispozici webhosting
roofer
Profil *
margin-left: 0 auto;
margin-right: 0 auto;

Tohle je blbost. 0 a auto nejde.

Když tak : margin-left: auto; margin-right: auto;

Nebo: margin: 0 auto 0 auto;
mimochodec
Profil
Pringi:
Živou ukázku nemužu přiložit, protože nemám k dispozici webhosting

A pro tento účel... http://kod.djpw.cz
roofer
Profil *
PS: nebo jen margin: 0 auto;


Ukázka: Asi takhle?

Divu musíš dát také nějaký rozměr, aby jsi ho mohl centrovat. A pokud chceš ten odstavec doprostřed, na to je tam : text-align: center.
Bubák
Profil
roofer:
DIV top_content nemá deklarovanou šířku, takže se roztáhne na celou dostupnou šířku, co nadřazený element, co je ve tvém HTML kódu BODY, dovolí, jak je vidět na http://kod.djpw.cz/nvmb, kde jsem dal divu top_content červené pozadí. Pokud je DIV takhle široký, tak nepoznáš, zda je vpravo, vlevo, nebo uprostřed.

roofer:
nebo jen margin: 0 auto;
To je přesně totéž, co margin: auto; taky vynuluje horní i dolní margin a pravý i levý bude stejný.
roofer
Profil *
Bubák, Bubák:
Jasně, v ukázce jsem mu (divu) tam dal 50%. A taky šedivé pozadí, aby to bílé písmo bylo na bílém podkladě vidět. :-)

Margin auto na horní a dolní margin nepůsobí jako na levou a pravou, přesto raději používám 0 auto. (už slyším, že to je jak středník za poslední či jedinou definicí.. :-) )

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: