Diskuze: Zarovnání záhlaví

Jakub Klindera

Člen

Jakub Klindera:10.2.2017 18:23

Dobrý večer,
zkouším něco v CSS a chci abych měl dvě bílá okna pro text a pod ně záhlaví. Problém je v tom, že to záhlaví se zarovnává nad tato dvě okna (viz. screenshot)

HTML kód :

<!DOCTYPE html>
<html>
<head>
        <title>Název</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="center">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


<div id="footer">

</div>

</body>


</html>

CSS kód:

body{
        width: 1366px;
        height: auto;
        background: url("background.gif");
}

#center{
        float: left;
        width: 800px;
        height: 700px;
        background: white;
        margin: 50px auto 0px 100px;
}

#right{

        width: 300px;
        height: 400px;
        background: white;
        float: left;
        margin: 50px auto 0px 100px;
}

#footer{
        margin: 0px auto 0px auto;
        width: 800px;
        height: 100px;
        bottom: 0;
        background: white;

}

Poradíte mi prosím někdo, jak to zarovnat ? :-)

Odpovědět

10.2.2017 18:23

Jan Troják

Brigádník

Jan Troják:10.2.2017 18:38

Jaký div teda chceš zarovnat dolů? #footer?

Editováno 10.2.2017 18:39

Nahoru Odpovědět

10.2.2017 18:38

Jakub Klindera

Člen

Jakub Klindera:10.2.2017 18:43

Ano, div #footer

Nahoru Odpovědět

10.2.2017 18:43

Jan Troják

Brigádník

Jan Troják:10.2.2017 18:52

Tak do #footer dej:
margin-top: "počet px/%, o kolik se má div posunout ze zhora stránky" ;

margin-top: 750px;

Editováno 10.2.2017 18:53

Nahoru Odpovědět

10.2.2017 18:52

Jakub Klindera

Člen

Jakub Klindera:10.2.2017 19:00

Takto to nebude fungovat. Zůstane to stejně, jen se všechno posune níže, včetně těch dvou oken, jinak uspořádání je pořád stejné.

Nahoru Odpovědět

10.2.2017 19:00

Michal

Člen

Michal:10.2.2017 19:01

Stačí přidat:

#footer {
    clear: both;
}

Tím se #footer vykreslí až pod všemi plovoucími prvky.

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

10.2.2017 19:01

Jakub Klindera

Člen

Jakub Klindera:10.2.2017 19:02

Super, toto jsem potřeboval. Děkuji

Nahoru Odpovědět

10.2.2017 19:02

Jan Lupčík

Tvůrce

Jan Lupčík:10.2.2017 19:12

https://jsfiddle.net/znvmnbax/1/
Vyházel jsem některé nepotřebné věci (ty si můžeš doplnit). Předělal jsem ti to ale do flexboxu, přečti si něco o něm. S ním je určitě jednodušší a rychlejší tvorba. Nemyslíš?

Editováno 10.2.2017 19:14

Nahoru Odpovědět

10.2.2017 19:12

TruckersMP vývojář

Jakub Klindera

Člen

Jakub Klindera:10.2.2017 19:16

Taky mě napadlo takové řešení Je mnohem jednodušší, ale já jsem se to chtěl naučit i jinak než takto Navíc při práci s divy mám problémy se zarovnáním, tak se učím a zkouším různá řešení

Ale děkuji

Nahoru Odpovědět

10.2.2017 19:16

Jan Lupčík

Tvůrce

Jan Lupčík:10.2.2017 19:50

Není zač, snad si z toho něco vezmeš.

Nahoru Odpovědět

10.2.2017 19:50

TruckersMP vývojář

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 10 zpráv z 10.