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:
CSS
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: