Diskuze: mezery mezi elementy

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

Avatar
heavyblack1
Člen
Avatar
heavyblack1:

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: starpres@sst.opava.cz
                                </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:

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.eu
Avatar
IT Man
Redaktor
Avatar
Odpovídá na heavyblack1
IT Man:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Paranormal
Redaktor
Avatar
Paranormal:

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:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Paranormal
Redaktor
Avatar
Paranormal:

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:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Tomáš123
Člen
Avatar
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:

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:

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:

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:

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:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
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.