Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
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
Bogdan
Redaktor
Avatar
Bogdan:20.12.2015 22:17

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

 
Nahoru Odpovědět 20.12.2015 22:17
Avatar
IT Man
Redaktor
Avatar
Odpovídá na heavyblack1
IT Man: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  ±0 21.12.2015 8:29
Cokoliv a kdokoliv může jednou uspět.
Avatar
Paranormal
Redaktor
Avatar
Paranormal: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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Paranormal
IT Man: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
Cokoliv a kdokoliv může jednou uspět.
Avatar
Paranormal
Redaktor
Avatar
Paranormal: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
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Paranormal
IT Man: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  ±0 21.12.2015 16:44
Cokoliv a kdokoliv může jednou uspět.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Paranormal
Tomáš123:21.12.2015 16:47
margin: 155px auto 0;
Nahoru Odpovědět  ±0 21.12.2015 16:47
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Paranormal
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í
+1 bodů
Ř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
Paranormal
Redaktor
Avatar
Paranormal:21.12.2015 21:10

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

Nahoru Odpovědět 21.12.2015 21:10
„Když toho moc neumíme tak jsme na nejlepší pozici se něčemu naučit.“
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Paranormal
IT Man: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  +2 21.12.2015 22:11
Cokoliv a kdokoliv může jednou uspět.
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.