| Autor | Zpráva | ||
|---|---|---|---|
| Pringi Profil * |
#1 · Zasláno: 29. 4. 2015, 18:56:12
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 * |
#2 · Zasláno: 29. 4. 2015, 19:06:54
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 |
#3 · Zasláno: 29. 4. 2015, 19:07:14
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 * |
#4 · Zasláno: 29. 4. 2015, 19:09:05 · Upravil/a: roofer
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 |
#5 · Zasláno: 29. 4. 2015, 19:30:36
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 * |
#6 · Zasláno: 29. 4. 2015, 19:41:26
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í.. :-) ) |
||
|
Časová prodleva: 10 let
|
|||
0