Problem mit 3 Div Tags neben und Untereinander

Problem mit 3 Div Tags neben und Untereinander

Beitragvon folan » 23.07.2010, 12:29

Hallo Leute,

wenn mir jemand helfen kann bedanke ich mich in voraus. Ich habe folgendes problem:

Ich versuche 3 div tags untereinander zu positionieren. Den Beispiel poste ich gleich mit.

Ich bedanke mich in voraus.
Code: Alles auswählen
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.outer-container {
   width:100%;
   background-color: #99CC00;
   z-index: 2;
   margin: 0 auto;
}
.content-container {
   width:900px;
   background-color: #CCCCCC;
   margin: auto;
   padding: 20px;
   border: solid;
   border-width: 1px;
   border-color: #333333;
   position: relative;
}

.contentleft {
   width:650px;
   z-index3;
   background-color: #666666;
   margin: left;
}

.contentright {
   width:200px;
   background-color: #666666;
   margin: auto;
   float: right;
   position:relative;
   top: -390px;
}

-->
</style>
</head>

<body>
<div class="outer-container">
  <div class="content-container">
    <div class="contentleft">
    <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>sd</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>sd</p>
      <p>&nbsp;</p>
      <p>sd</p>
      <p>sd</p>
    </div>
   <div class="contentright">
     <p>WIE GRIEG ICH DIESEN DIV TAG IN DER GLEICHEN POSITION WIE:</p>
     <p>CONTENT-LEFT</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>DANKE </p>
   </div>
  </div>
</div>
</body>
</html>
folan
neu hier
 
Beiträge: 5
Registriert: 23.07.2010, 11:49

Re: Problem mit 3 Div Tags neben und Untereinander

Beitragvon folan » 23.07.2010, 12:34

Das problem liegt da wenn ich in den contentleft tag rein schreibe dann läuft der contentright tag auch nach unten.

Wie macht ihr sowas, ich weiß dass es für die profis kein großes problem ist aber für mich als anfänger ist es ein 'Disaster' :)


Danke
folan
neu hier
 
Beiträge: 5
Registriert: 23.07.2010, 11:49

Re: Problem mit 3 Div Tags neben und Untereinander

Beitragvon Azra » 23.07.2010, 12:56

Was denn nun? neben oder untereinander?
Oder möchtest du rechts sowie unterhalb des großen Containers die kleinen haben?
Außerdem sehe ich nur 2 <div> Container, deswegen verwirrst du mit diesen rudimentären Angaben etwas.
Wenn du mir Angaben machst schreibe ich den Code eben, ist ja nicht viel.
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum

Re: Problem mit 3 Div Tags neben und Untereinander

Beitragvon Azra » 23.07.2010, 13:14

Hier so?
Code: Alles auswählen
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
   margin: 0;
   padding: 0;
   text-align: center;
   background-color: #99CC00;
}
#wrapper {
   text-align: left;
   margin: 30px auto;
   width: 900px;
   height: auto;
   background-color: #CCCCCC;
   border: 1px solid #333333;
}
#content {
   float: left;
   margin-top: 20px;
   margin-left: 20px;
   width: 650px;
   height: 500px;
   background-color: #666666;
}
#contentright {
   float: right;
   margin-top: 20px;
   margin-right: 20px;
   width: 200px;
   height: auto;
   background-color: #666666;
}
#contentleft {
   margin-top: 20px;
   margin-left: 20px;
   margin-bottom: 20px;
   width: 200px;
   height: auto;
   background-color: #666666;
}
.clear {
   clear: both;
}
</style>
</head>

<body>
   <div id="wrapper">
      <div id="content">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
      </div>
      <div id="contentright">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </div>
      <br class="clear"/>
      <div id="contentleft">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </div>
   </div>
</body>
</html>
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
Benutzeravatar
Azra
Stammuser
 
Beiträge: 422
Registriert: 04.02.2010, 08:36
Wohnort: (Alten)bochum

Re: Problem mit 3 Div Tags neben und Untereinander

Beitragvon folan » 23.07.2010, 22:41

Hallo Azra,

vielen dank für deine hilfe. Ich brauche eigentlich 4 layers, habe heute falsche angaben gegeben.

Den outer-container möchte ich als background haben und innen drin den container und in den container möchte in den content auf der linken und content-right auf der rechten seite positionieren.

Mein problem hier ist wenn ich in den content layer rein schreibe dann bleibt der container layer stehen und folgt nicht mit. Das selbe mit dem container-right layer.

Wie kriege ich es hin ? Ich kämpfe schon seit 3 tagen und schaffe es einfach nicht es richtig zu machen.


Danke nochmals
Folan
folan
neu hier
 
Beiträge: 5
Registriert: 23.07.2010, 11:49

Re: Problem mit 3 Div Tags neben und Untereinander

Beitragvon folan » 23.07.2010, 22:47

Hier der code nochmal.
Code: Alles auswählen
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#outer-container {
   width:100%;
   height:auto;
   left: 0px;
   top: 0px;
   background-color: #CCCCCC;
   margin: auto;
   position: absolute;
}
#container {
   width:900px;
   height:auto;
   margin: 10px auto;
   background-color: #E6E6E6;
   border-left-style: dashed;
   border-left-width: 1px;
   border-left-color: #000000;
   border-right-style: dashed;
   border-right-width: 1px;
   border-right-color: #000000;
}
#content {
   width:650px;
   height:auto;
   float: left;
   margin: 10px;
   background-color: #333333;
}
#content-right {
   width:200px;
   height:auto;
   float: right;
   margin: 10px;
   background-color: #333333;
}
.style2 {
   font-size: 24px;
   color: #FFFFFF;
}


-->
</style>
</head>

<body>
<div id="outer-container">
  <div id="container">
    <div id="content">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p class="style2">Wenn ich hier rein schreibe der container layer folgt nicht mit? </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div id="content-right">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  </div>
</body>
</html>
folan
neu hier
 
Beiträge: 5
Registriert: 23.07.2010, 11:49

Re: Problem mit 3 Div Tags neben und Untereinander

Beitragvon dhx » 24.07.2010, 06:51

Moin,

folan:
Mein problem hier ist wenn ich in den content layer rein schreibe dann bleibt der container layer stehen und folgt nicht mit. Das selbe mit dem container-right layer.

Das Problem liegt eher darin das du die Eigenschaft float und dessen Wirkung nicht bzw. nur teilweise verstanden hast. Lies dir bitte doch mal folgenden Artikel durch:
http://www.css-technik.de/css-examples/219_9/

folan:
Wie kriege ich es hin ?

Dazu gibt es vier verschiedene Ansätze:
http://little-boxes.de/lb1/14.5-vier-me ... loats.html
In deinem Fall würde ich zu Ansatz 1
http://little-boxes.de/lb1/14.6-methode ... clear.html
tendieren.
dhx
Gelegenheitsleser
 
Beiträge: 15
Registriert: 04.07.2010, 10:32


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Problem mit 3 Div Tags neben und Untereinander"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 4 Gäste