Margin und Padding. Verschiebungsprobleme.

matsch99

Guten Tag,

ich baue gerade ein kleines Design zusammen und stoße mit meinen doch noch recht neuen HTML und CSS Kenntnissen schnell an meine Grenzen. Margin und Padding verschieben / skalieren meine Boxen. Jedoch möchte ich eine normale 100 % Ausfüllung der Boxen in meinem Wrapper, sowie keine lästigen Sprünge wenn ich zwei Boxen untereinander mache (verschiebt alles nach unten). Leider kann ich die Dateien nirgends hochladen (sperre).

Schon einmal vielen Dank für eure Hilfe.

HTML

<!doctype html>
<html>


<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>Something!</title>
</head>


<body>
    <header>
    </header>
<div id="wrapper">
<h1>Mc K doubleV</h1>
<!-- Erste Reihe -->
<!-- HEADER -->
<div class="accordian box row" id="white">Sehr viel blabla bla.
</div>
<!-- second -->
<div class="color box normal" id="green">Grün</div>
<div class="grow box wide" id="yellow">Blau</div>
<div class="grow box normal" id="red">Gelb</div>
<!-- third -->
<div class="rotate box high" id="blue">Blau</div>
<div class="rotate box both" id="red">Gelb</div>
<div class="color box normal" id="green">Grün</div>
<div class="color box normal" id="green">Grün</div>
<div class="color box normal" id="green">Grün</div>
<div class="rotate box normal" id="yellow">Gelb</div>
<div class="color box wide" id="blue">Blau</div>
</div>
</body>
</html>

Alles anzeigen

HTML

@charset "utf-8";
* {
    margin: auto;
    text-shadow: 1px 1px 1px #4d4d4d;
}
body {
    background-image: url(bg.jpg);
}
#wrapper {
    height:700px;
    width:80%;
}
h1 {
    color:white;
    text-align:center;

}
header {
    margin-top:20px;
    margin-bottom:20px;
    padding:20px;
}
#content {
    padding:10px;
}
.box {
    padding:10px;
    float:left;
    border-radius:2px;
    transition:all 0.3s ease;
    font-size:40;
    margin: 5px;
    overflow:hidden
}
.normal { /*einfache Box*/
    height:200px;
    width:23%;
}
.wide { /*Box mit doppelter Länge */
    height:200px;
    width:46%;
}
.row { /*Box als komplette Reihe */
    width:96%;
    text-align:justify;
}
.high /*einfache Box mit doppelter Höhe */{
    height:400px;
    width:23%;
}
.both{ /*box mit doppelter Höhe und doppelter Länge */
    height:400px;
    width:46%;
} /*Box Farben*/
#red {background-color:#ff8080;}
#yellow {background-color:#ffff66;}
#green {}
#blue {background-color:#6699ff;}
#brown {background-color:#cc6600;}
#white {background: transparent url(transparent.png) repeat; font-size:20px;}


/*Effekte */
.grow:hover
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}
.circle:hover
{
    border-radius:40%;
}
.rotate:hover
{
    -webkit-transform: rotateZ(-5deg);
    -ms-transform: rotateZ(-5deg);
    transform: rotateZ(-5deg);
}
.color
{
    background-color:#33cc33;
}
.color:hover
{
    background-color:#b3ff66;
}
.accordian{height:182px;  transition: height 1s ease-in-out;}
.accordian:hover{height:400px;}

Alles anzeigen

djheke

Code

* {     margin: auto;
    text-shadow: 1px 1px 1px #4d4d4d;
     box-sizing:border-box;
}

matsch99

Erstmal danke für die recht fixe Antwort.
Es hat sich auch was geändert, jedoch habe ich nachwievor meine ungewollten Abstände:

modem-kind

Du meinst die Differenz bei
der blauen und roten zu den zwei grünen
nach unten !
naja .box hat 5px margin ..
und so sind die Grünen mit height 200px + 5px + 5px margin zwischen Ihnen
macht 410px ..die anderen beiden sind 400px ohne zuzügliche + 5px +5px

und in der Breite hast Dich wohl mit Deinen Prozentzahlen verrechnet

Gruß modem-kind

MrMurphy

Hallo

Mal abgesehen davon das height-Angaben so weit wie möglich vemieden werden sollen, musst du die height-Angaben natürlich korrekt berechnen, wenn du sie trotzdem verwenden willst.

Heißt in deinem Beispiel: Zwei Boxen mit normaler Höhe sind 200px + 200px + 5px(margin zwischen den Boxen) hoch. Entsprechend sind die doppelt hohen Boxen mit 400px zu niedrig, da der margin fehlt.

Gruss

MrMurphy

matsch99

Hallo,

ich denke wir reden gerade etwas aneinander vorbei
Ich probiers nochmal kurz zu erklären. Padding vergrößert ja meine Boxen. Margin fügt einen Abstand hinzu. Ich möchte das die Boxen exakt in meinem Wrapper liegen. Vom Abstand und von der Höhe her. Jetzt habe ich ja versucht mit diesen wirren Prozentangaben (Werte wie 50% / 25 % würden ja dank margin und padding das design sprengen) es hinzukriegen das sie meinen Wrapper ausfüllen. Aber das klappt leider nicht so ganz. Ich möchte es eigentlich nur so haben wie es auf dieser seite: "http://etchapps.com/" funktioniert. Meine Frage ist nun: gibt es eine Möglichkeit das sich die Boxen wie ein Blocksatz anordnen? Oder müsste ich dafür komplett anders anfangen? Ich habe schon versucht wrapper auf auto zu setzen (weite) aber das funktioniert wohl nicht so einfach.

modem-kind

na hast es jetzt ? ?

also

Zitat

Padding vergrößert ja meine Boxen.

Padding vergrößert deine Boxen nicht mehr ..Dank von djheke hinzugefügtem :
box-sizing: border-box;

so nun zu Deinem Wrapper :
er hat eine Bestimmte Größe .. also zb. 80% vom Body / äußerlich
das sind innerhalb in diesem aber seine 100% Raum in der Breite

Deine Boxen darin sollen mit 3 nebeneinander stehenden Boxen diesen ausfüllen
Und die Abstände Margin sollen auch noch rein und dürfen zusammen ALLES eben 100% nicht überschreiten
also mal rechnen
zb. Box1 24% + Box2 48% + Box3 24% = ? 96% macht Rest 4%
wie viele Abstände hast Du ?
3 linke und 3 rechte - macht 4% / 6 = 0.66%

also schreibst du
margin: 3px 0.66%; - und nicht margin: 5px 5px
( das mit den 3px erkläre ich jetzt nich ! )

Dein .accordian und die H1 berechnest Du genauso -

achso und Deine height: 200px Boxen änderst Du auf height: 197px; !

und in Zukunft mal etwas googeln u. lesen zb. über Boxmodel , box-sizing usw.

Gruß modem-kind

djheke

So gehtt's auch

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>Valiedieren</title>
<meta charset="utf-8">
<style>
* {
 margin:0;
 padding:0;
 box-sizing:border-box;
}
body {
 background:#000;
}


main {
 margin:0 auto;
 width:80%;
 overflow:hidden;
}


header {
 padding:20px;
 background:#dda;
}


section {
 width:100%;
 float:left;
 background:#fda;
 border-right:5px solid #000;
}


article {
 border-top:5px solid #000;
 border-right:5px solid #000;
 float:left;
 height:200px;
 width:25%;
 background:#0f0;
}


article:nth-of-type(2) {
 width:50%;background:#ada;
}
article:nth-of-type(4),
article:nth-of-type(5) {
 height:400px;
 width:25%;
 background:#fda;
}
article:nth-of-type(5) {
 height:400px;
 width:50%;
 background:#fdf;
}
article:nth-of-type(10) {
 width:50%;
 background:#f33;
}


article:nth-of-type(3) {
 background:#4da;
 color:#fff;
}
article:nth-of-type(6) {
 background:#09c;
 color:#fff;
}
article:nth-of-type(8) {
 background:#99c;
 color:#fff;
}
article:nth-of-type(9) {
 background:#00f;
 color:#fff;
}
section p , article p {
 padding:5px;
}
</style>
</head>
<body>
<header>
<h1>Mc K doubleV</h1>
</header>
<main>
<section>
 <p>Sehr viel blabla bla.</p>
 <p>Sehr viel blabla bla.</p>
 <p>Sehr viel blabla bla.</p>
</section>




<article><p>Box</p></article>
<article><p>Box</p></article>
<article><p>Box</p></article>


<article><p>Box</p></article>
<article><p>Box</p></article>
<article><p>Box</p></article>
<article><p>Box</p></article>


<article><p>Box</p></article>
<article><p>Box</p></article>
<article><p>Box</p></article>


</main>
</body>
</html>

Alles anzeigen

modem-kind

ja geht prima..
so werden die Borders ja nicht als Prozent neu berechnet -
scaliert sich somit aber auch nicht.. wär bei border 20px im Phone nicht schön anzusehen
(okay - mit Breakpoints gehts natürlich - )

und:
in diesem Fall kann man sich sowieso das width nth-of-type(x)
sparen. gibt ja nur zwei width entweder article 25% (Standard)
oder 50% was als eine class ja reicht class="fuenfzig"

und
bei zb. 200 stk. <article> wird nth-of-type recht unübersichtlich find ich..
kein Entwickler Programm sagt Dir der wie vielte nth-of-type das ist im DOM .. aber die zb.
class wird Dir angezeigt ..darum gebe ich lieber jedem <article>
noch die durch Nummerierte class mit
art-1 art-2 usw.

Oki good night

wollt match99 eh mal eher mehr die 100% näher bringen ..
naja wenns ihn Interessiert

Tags