Diskuze: mezery mezi elementy

HTML a CSS HTML a CSS mezery mezi elementy American English version English version

Aktivity (1)
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
BlugW
Redaktor
Avatar
BlugW:20.12.2015 22:17

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

Nahoru Odpovědět 20.12.2015 22:17
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.com
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
Usmívej se, zítra už tvůj kód nemusí fungovat!
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
Usmívej se, zítra už tvůj kód nemusí fungovat!
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
Usmívej se, zítra už tvůj kód nemusí fungovat!
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
Usmívej se, zítra už tvůj kód nemusí fungovat!
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.