• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div Box abstand margin-bottom verlagert sich nach oben?

TheHolyDuck

Neues Mitglied
Servus,
bin frisch registriert da ich leider durch stundenlanges suchen nicht mehr weiter komme ^^. Momentan baue ich eine Site für meine Mutter ihre Praxis. Stehe noch recht am Anfang und super erfahren bin ich auch nicht. Lerne schnell, aber leider verstehe ich mein Problem gerade überhaupt nicht.
Zwar ist es folgendes. Ich habe 2 DIV-boxen (wrapper) die sollen unten einen Abstand von 50px erzeugen mit margin-bottom:50px; , leider verlagert er diesen Abstand irgendwie an die obere Box und zwar für beide.

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="boxen.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="container">
<div id="main">
<div id="wegzeiger">Christiane Hahn>Coaching</div>
<div id="main_inner">
<div id="wrapper">
<div class="one_fourth">
<img src="bilder/shadowsonabeach.jpg" alt="Schatten von 2 Menschen auf einem sandigen Boden" width="230px" height="130px" /><img src="bilder/transparent.gif" width="220px" height="120px" class="transparent_border" />
</div>

<div class="three_fourth text last"><b>Coaching</b> ist eine zielorientierte Unterstützung für alle Lebenssituationen.<br />
Die Weiterentwicklung der Persönlichkeit im beruflichen oder privaten Umfeld ist eine klare Zielsetzung und eine der Prioritäten.<br />
Es geht beim Coachen darum die Potentiale, Ressourcen und Fähigkeiten des einzelnen zu fördern oder für den Klienten erstmals sichtbar zu machen. Jeder Mensch hat die Kompetenz um Herausforderungen oder Problem-Situationen zu lösen, manchmal braucht es jemand von außen um das zu erkennen. Hier ist die Aufgabe des Coachs zu begleiten, zu führen und darauf zu achten das der Klient sein Ziel in seinem eigenen Tempo erreicht.</div>


</div> <!-- end wrapper -->

<div id="wrapper">
<div class="one_fourth text">
Das bedeutet: Gemeinsam werden wir Ihnen, Ihre eigenen Fähigkeiten, Eigenschaften, Motivationen und positiven Möglichkeiten bewusst machen. . Mit dieser inneren Stärke sind sie allen Herausforderungen gewachsen.
</div>
<div class="one_fourth text">Im Gespräch rollen wir konstruktiv das vorhandene Problem auf – machen es so verständlich und neu erlebbar ohne in die Hilflosigkeit abzurutschen. Damit wird das bisherige Problem lösbar.
</div>
<div class="one_fourth text">Sie werden die Erfahrung machen, dass sie das Problem aus eigener Kraft bewältigen können, da wir gezielt „Ihre ganz persönliche Lösung“ finden. Selbstverständlich werden sie in allen ihren Schritten unterstützt und wir gehen in Ihrem Tempo vor.
</div>
<div class="one_fourth text last">Im Coaching werden wir einfühlsam ihre Motive anschauen und die dazugehörenden Emotionen. Es geht darum zu verstehen warum man sich bisher so verhalten und empfunden hat. Dies fördert das eigene Verständnis und die nötige Motivation bestimmte Dinge zu ändern.
</div>
</div><!-- end wrapper -->
</div><!-- end main_inner -->
</div><!-- end main -->
</div>
</body>
</html>

CSS
@charset "utf-8";

/* Boxen */


div {
display:block;
}




html, body {
height: 100%;
width: 100%;
background-color:#8e64a3;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}


#container {
margin: 0 auto 0;
padding:0;
position: relative;
height:100%;
width: 61%;
min-width:1050px;
min-height:90%;
clear: left;
background-color: #f8f8f8;
background-color: rgb(248, 248, 248);

/* border left */
border-left: 5px solid rgb(100, 100, 100); /* default border color for browsers without rgba support */
border-left: 5px solid rgba(0, 0, 0, 0.1); /* rgba for transparency */
-moz-background-clip: padding; /* for Mozilla browsers*/
-webkit-background-clip: padding; /* Webkit */
background-clip: padding-box; /* for browsers that fully support background clip */

/* border right */
border-right: 5px solid rgb(100, 100, 100); /* default border color for browsers without rgba support */
border-right: 5px solid rgba(0, 0, 0, 0.1); /* rgba for transparency */
-moz-background-clip: padding; /* for Mozilla browsers*/
-webkit-background-clip: padding; /* Webkit */
background-clip: padding-box; /* for browsers that fully support background clip */
}


#head {
padding-top:20px;
height:100px;
width:100%;
background-image:url(bilder/header2.png);
background-repeat:no-repeat;
background-size: 100% 100%;
}


#slide {
height: 400px;
background-image:url(bilder/sliderbg.png);
background-repeat:no-repeat;
background-size: 100% 100%;
border-top: 1px solid #636;
/* padding:20px 35px 20px 35px; alte abstand einstellung für die Slideshow, ist bereits in der slideshow berechnet*/
}


#grau {
background-color: #eee;
height:100px;
border-top:1px #FFF solid ;
border-bottom:1px solid #fff;
}

#main {
margin-top:0px; /* schatten img oben am Top anliegend */
padding:10px 35px 0px; /* abstand zu maininner und um Schatten aktuell oben zu halten */
background-color:#f8f8f8;
background-image:url(bilder/shadow.png);
background-repeat:repeat-x;
background-size:100% 3px;
}


#wegzeiger {
font-size:9px;
color:#CCC;
margin-bottom:20px;
}


#main_inner {
margin:0px;
padding:0px;
}


#wrapper {
margin-bottom:50px;
}


#footer {
height: 40px;
width: 100%;
background-color: #000;
position: absolute;
bottom: 0px;
}


/* anordnung 4 spalten beim main */


.one_fourth{width:22%;}
.three_fourth{width:74%;}
.three_fourth,.one_fourth {
position:relative;
margin-right:4%;
float:left;
min-height:1px;
margin-bottom:20;
}


.last{
margin-right:0!important;
clear:right;
}




/* Text/Inhalt */


.transparent_border{
position:absolute;
top:0;
left:0;
border:5px solid #000;
opacity:.15;
}


.abstand {
padding:0px 5px;
}


.text {
color:#555;
font-size:12px;
line-height:22px; /* zeilenabstand text */
font-family:Arial, Helvetica, sans-serif;
}


.mainpic {
padding-right:20px;/* abstand zum maintext*/
float:left;
clear:both;
}


.maintext {
clear:right;
}


.footerinner {
margin:0px 35px;
padding-top:5px;
color: #f0f0f0;
font-size:9px;
}


h1 {
color: rgb(142, 100, 163);
}
 
Zuletzt bearbeitet:
IDs darf man nur 1 Mal pro HTML-Dokument verwenden. Du hast z.B. "wrapper" 2 Mal angegeben, wodurch dein HTML-Code fehlerhaft ist.

Bevor Du aber weiter daran bastelst würde ich dir empfehlen dir auch mal andere HTML-Elemente anzuschauen. Momentan erfasst Du quasi alles in <div>-Elementen, wodurch alle Inhalte semantisch falsch ausgezeichnet werden. Texte solltest Du in Absätzen erfassen, also <p>. Überschriften als <h1> bis <h6>.

Und den SPOILER-Tag gibt es in diesem Forum nicht. Schau bitte im Editor welche es gibt oder nimm gleich HTML bzw. CODE für die Quellcodes die Du hier im Forum zeigst.
 
Servus, danke schon mal für die Antwort. ich hab die Wrapper IDs mal als class definiert leider besteht das Problem weiterhin.
Ich verwende hauptsächlich <div>-Elemente da ich mit diesen einfach besser bauen kann, auch wenns manchmal etwas umständlich wird ^^. Wie eben mein jetztiges Problemchen. Noch einen Tipp evtl ^^° such mir echt den Wolf :S.

<p>-Tags für die Absätze sollte ich evtl mal vermehrt anwenden. Bisher machen sie mir immer einen äußerst störenden Zeilenumbruch rein den ich nicht umzugehen weiß.

Wegem SPOILER-Tag. Der aufbau dieses Forum ist fast derselbe wie ein anderes, da gabs den SPOILER-Tag. Wollte ich einfach mal ausprobieren ;).
 
Okay habe jetzt eine Lösung gefunden. Habe jetzt einen divider DIV eingebaut und den margin auf top gesetzt jetzt funktionierts :).
 
Ich würde es nicht funktionieren nennen, wenn man eine div-Wüste baut. Ich lege dir lieber nochmal nahe auch andere Elemente zu verwenden. Jedes Element kann man per CSS beeinflussen, die Gestaltung nimmt man schließlich mit CSS vor - nicht mit HTML-Elementen.
 
Zurück
Oben