Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: mezery mezi elementy

Aktivity
Avatar
heavyblack1
Člen
Avatar
heavyblack1:20.12.2015 22:02

nevi někdo jak odstranit mezery mezi elementy
index.html

<!DOCTYPE html>
<html lang="cs-cz">
        <head>
                <meta charset="utf-8">
                <title>SST fiktivní firma</title>
                <link rel="stylesheet" href="css/master.css" charset="utf-8">
                <script type="text/javascript" src="kalkulacka.js"></script>
        </head>
        <body>
                <div id="container">
                        <header>
                                <div id="logo">
                                        <object type="image/svg+xml" data="obrazky/logo_starpres.svg" width="100px">Your browser does not support SVGs</object>
                                </div>
                                <div id="centrovac_header">

                                <nav>
                                        <ul>
                                                <li class="vybrano"><a href="index.html">O nás</a></li>
                                                <li><a href="organizacni_struktura.html">Organizační struktura</a></li>
                                                <li><a href="vyrobni_technologie.html">Výrobní technologie</a></li>
                                                <li><a href="politika_kvality.html">Politika kvality</a></li>
                                                <li><a href="kontakty.html">Kontakty</a></li>
                                        </ul>
                                </nav>
                                </div>
                        </header>
                        <div id="banner">
                                <object type="image/svg+xml" data="obrazky/logo_starpres.svg">Your browser does not support SVGs</object>
                        </div>
                        <div id="contect">
                        <article>
                                <div id="centrovac">
                                        <section class="midnightblue">
                                                <div id="centrovac">
                                                        <p>
                                                                Jsme fiktivní firma společnost s ručením omezeným a podnikáme v oboru zámečnictví nástrojařství
                                                        </p>
                                                </div>
                                        </section>
                                        <section class="svarovani belic">
                                                <div id="centrovac">
                                                        <p>
                                                                Potřebujete něco svařit palit na plazmě pak tu jste správně !
                                                        </p>
                                                </div>
                                        </section>
                                        <div class="cistic"></div>
                                </div>
                        </div>
                </div>
                </article>
                <footer>
                        <div class="footer_container">
                                <div id="logo">
                                        <object type="image/svg+xml" data="obrazky/logo_starpres.svg" width="300px">Your browser does not support SVGs</object>
                                </div>
                                <p>
                                        Tel.: 555 538 144
                                </p>
                                <p>
                                        Email: [email protected]
                                </p>
                                <p>
                                        IČ: 67470503
                                </p>
                        </div>
                </footer>
        </body>
</html>

master.css

body{
        margin: 0px;
        font: 16px Verdana;
        text-align: center;
        min-width: 1000px;
}
header{
        height: 100px;
        z-index: 10;
        position: fixed;
        width: 100%;
        background: #2969B0
}
#logo{
        float: left;
        position: static;
        top: 10;
        left: 500px;
}
nav ul {
        margin: 0px;
        list-style-type: none;
}
nav ul li:hover, .aktivni {
        background: #020B0B;
        box-shadow:0px 0px 5px #00C0C0;
}
nav ul li {
        float: left;
        margin: 10px;
        padding: 4px;
}
nav a {
      color: white;
      text-decoration: none;
}
#banner {
        height: 500px;
        padding-top: 100px;
        background: #41A85F;
}
#content {
        position: relative;
        top: 400px;
        height: 1500px;

}
#centrovac_header {
        margin: 0px auto;
        width: 1000px;
}
#centrovac {
        margin: 0px;

        vertical-align: middle;
}
.cistic {
        clear: both;
}
.vybrano{
        background: #007373;
}
article section {
        background: #FFFFFF;
        height: 100%;
        background-size: contain;
}
h1{
        color: white;
        text-align: center;
        font-weight: normal;
}
.footer_container {
        background: #22313F;
        height: 287px;
        color: #FFFFFF;
        font-size: 18px;
}
.belic {
        color: #FFFFFF;
        font-size: 3em;
        margin: 0px;
        padding: 0px;
}
.svarovani {
        background: url("../obrazky/svareni_mag.png") no-repeat;
        background-size: cover;
        height: 677px;
}
.midnightblue {
        text-align: center;
        background: #2c3e50;
        font-size: 3em;
        color: #FFFFFF;
        height: 500px;
        margin: 0px;
}
p {
        vertical-align: middle;
}
 
Odpovědět
20.12.2015 22:02
Avatar
Neaktivní uživatel:20.12.2015 22:17

Zkus použit "Developer tool" v prohlížeči.

Nahoru Odpovědět
20.12.2015 22:17
Neaktivní uživatelský účet
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na heavyblack1
Jan Lupčík:21.12.2015 8:29

Nastavuješ všemu height, to ti pak padding ani margin nepomůže. Odstraň ty výšky.

Nahoru Odpovědět
21.12.2015 8:29
TruckersMP vývojář
Avatar
Verquido
Tvůrce
Avatar
Verquido:21.12.2015 11:16

Když už se tu řeší mezery mezi elementy tak proč mi nejde nastavit jenom margin-top a musím to nastavovat pomocí padding-top. nevíte někdo? :D

 
Nahoru Odpovědět
21.12.2015 11:16
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Verquido
Jan Lupčík:21.12.2015 11:21

Neviděl jsem tvůj kód, ale nenastavuješ potom někde margin tomu samému elementu? To by pak margin-top byl ignorován. :)

Nahoru Odpovědět
21.12.2015 11:21
TruckersMP vývojář
Avatar
Verquido
Tvůrce
Avatar
Verquido:21.12.2015 15:45

no mám tam myslím nastaveno

#header_text{
    display: block;
    padding-top: 155px;
    margin: 0 auto;
}

Potřeboval bych aby byl margin jenom nahoře 155px ale když to nastavím v

margin: 155px auto;

tak je to nahoře i dole ale když nastavím samostatně margin-top: 155px; tak to ignoruje jak ty říkáš.

 
Nahoru Odpovědět
21.12.2015 15:45
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Verquido
Jan Lupčík:21.12.2015 16:44

Pokud máš

margin-top: 155px;
margin: 0 auto;

tak se nastaví až ten druhý, proto ti funguje jenom ten padding. :)

Nahoru Odpovědět
21.12.2015 16:44
TruckersMP vývojář
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Verquido
Tomáš123:21.12.2015 16:47
margin: 155px auto 0;
Nahoru Odpovědět
21.12.2015 16:47
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Verquido
Tomáš123:21.12.2015 16:49

Medzery vznikajú kvôli pretekaniu marginu. Stačí pridať nadradenému prvku padding alebo nastaviť nepredvolený overflow. Onen margin pochádza z elementov <p>.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
21.12.2015 16:49
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
heavyblack1
Člen
Avatar
heavyblack1:21.12.2015 17:29

Probém jsem vyřešil
overflow: hidden;

Editováno 21.12.2015 17:30
 
Nahoru Odpovědět
21.12.2015 17:29
Avatar
Tomáš123
Člen
Avatar
Odpovídá na heavyblack1
Tomáš123:21.12.2015 20:06

Odpoveď vyššie patrila tebe. Pomýlil som sa.

Nahoru Odpovědět
21.12.2015 20:06
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Verquido
Tvůrce
Avatar
Verquido:21.12.2015 21:10

Díky moc :D Sem asi id*ot :D

 
Nahoru Odpovědět
21.12.2015 21:10
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Verquido
Jan Lupčík:21.12.2015 22:11

V pohodě, není zač. Každý se může zmýlit. :)
Pro příště ale založ na to nové vlákno a používej tlačítko Odpovědět.

Nahoru Odpovědět
21.12.2015 22:11
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 13 zpráv z 13.