Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

Probelm mit der Plazierung zweier divs nebeneinander

Antwort erstellen

Probelm mit der Plazierung zweier divs nebeneinander

Beitragvon beatrix » 21.03.2011, 17:18

Hallo, ich habe ein Problem. Ich denke, es liegt am falschen floaten, ich komm aber nicht drauf, was da falsch ist. Könnte mir da jemand einen Tipp geben? Das wäre supernett. Es geht um diese Seite
http://formathochzwei.de/testtemplate/index.html
Im content Bereich sollen zwei divs nebeneinander plaziert werden. die beiden divs werden allerdings nicht im content bereich angezeigt, sondern brechen aus. :(
Ich würde mich sehr über Hilfe freuen.
Herzlichen Gruß Bea
beatrix
Gelegenheitsleser
 
Beiträge: 40
Registriert: 30.03.2005, 11:43
Nach oben

Re: Probelm mit der Plazierung zweier divs nebeneinander

Beitragvon djheke » 21.03.2011, 18:58

erweiter mal die Angaben fur
#content{
overflow:hidden;
...
...
}

mfg
henry
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben

Re: Probelm mit der Plazierung zweier divs nebeneinander

Beitragvon djheke » 21.03.2011, 22:07

Hallo ,habe mir das ganze nochmal angesehen und einige Änderungen vorgenommen und hoffe du möchtest es so ungefähr.

HTML
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">


<head>
<title>#</title>
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="#" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="de" />
<meta name="author" content="#" />
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="images/logo.jpg" width="800" height="143" alt="Logo" /></div>
   <div id="inhalt">
     <div id="menu">
       <ul>
         <li><a href="#" class="active" title="Startseite">Willkommen </a></li>
         <li><a href="#" title="Die Lage der Wohnung">Die Lage </a></li>
         <li><a href="#" title="Die Wohnung">Wohnung </a></li>
         <li><a href="#" title="Die Ausstattung">Ausstattung </a></li>
         <li><a href="#" title="Die Preise">Preise </a></li>
       </ul>
      </div>        <!-- Ende Menue  -->
 
     <div id="content_left">
     <p>
      kldsalöfl dfjs
       dslkaöjlj  dsa jd&ouml;ajsf dsaljfa&ouml; f&ouml;id afdshf&ouml;ids af djsh&ouml;fauihzfkjdfah &ouml;iudfzas
       dfhkjaszhduf adsjhfud
      </p>
     </div>
 
     <div id="content_right">
       <p>huhjd jkddddddddddddddddddddddddddddddddddddddddd</p>
        <p>dddddddddddddjkdkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
        <p>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>
     </div>
 
   </div>
 
   
    <div id="footer"> Kontakt Impressum </div>
</div>
</body>
</html>


Auszug CSS
Code: Alles auswählen
/* ----------container zentriert das layout-------------- */
#container {
width:970px;
margin-left: auto;
margin-right: auto;

}

/* ----------HEADER-------------- */
#header{
padding:0 20px;
background-color:#a2a850;
}

/* das Hauptmenue */
#menu {
width: 125px;
float:left;
}
#menu
      {
   text-align:right;
      }
      

#menu ul {
   margin:0;
   padding:0;
   list-style:none;
}

#menu li {
   margin:0;
   padding:0;
}

#menu a
      {
   border: none;
   display: block;
   font:  0.85em Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 0;   
   padding: 6px 19px 1px 0px;
      }
#menu a:link, #menue a:visited
      {
      color: #949494;
      }
#menu a:focus {
      background:    url(../grafik/linie.gif) no-repeat 100% 90%;
      color:  #203552;
      }
#menu a:hover, #menue a.active
      {
      background:    url(../grafik/linie.gif) no-repeat 100% 90%;
      color:  #203552;
      }
* html #menu a {
   height: 1px;}

/* -----------------Inhalt--------------------- */

#inhalt{
background: #fef7cd;
overflow:hidden;

}

#content_left
   {
   float:left;
   padding:0px;
   width:330px;
   background-color: #dad;
}
#content_right
   {
   float:right;
   padding:0px;
   width:515px;
   background-color: #039;

}
#content_left p , #content_right  p
      {
      line-height: 1.7em;
      padding:0.5em 3em 0.3em 2.6em;
      }




/* -----------footer--------------------------- */
#footer {
clear: both;
text-align: center;
font-size: 11px;
line-height: 45px;
padding: 30px 45px 10px 125px;
   background-color: #039;
}



Die Hintergrundfarben sind nur zum besserem Überblick.

Du kannst dir hier auch eine Vorlage auswählen.
http://www.gipspferd.de/vorlagen.htm Die Doctyps kannst du natürlich ändern.

mfg
henry
Benutzeravatar
djheke
Stammuser
 
Beiträge: 233
Registriert: 15.11.2010, 22:45
Nach oben

Re: Probelm mit der Plazierung zweier divs nebeneinander

Beitragvon beatrix » 22.03.2011, 16:48

Hallo henry, vielen Dank für deinen Hilfe :-D
#content{
overflow:hidden;
war genau das richtige.
Herzliche Grüße
Bea
beatrix
Gelegenheitsleser
 
Beiträge: 40
Registriert: 30.03.2005, 11:43
Nach oben

Re: Probelm mit der Plazierung zweier divs nebeneinander

Beitragvon Azra » 30.03.2011, 07:26

Das ist der große Zusammenbruch (Kollabieren)
Eines der verwirrenden Dinge bei der Benutzung von float ist das Entgegenwirken der Kinderelemente zu ihren Elternelementen.
Besitzt ein Elternelement, in deinem Fall #content, nichts außer Kinderelemente mit dem Attribut float, kollabiert dessen Höhe buchstäblich zu nichts. Es ist jedoch nur dann relevant, wenn das Elternelement einen entsprechend sichtbaren Hintergrund besitzt, welcher durch das Kollabieren nicht in voller Höhe angezeigt wird.

Um dieses Problem zu lösen hilft meist ein clear nach dem letzten float und vor dem schließenden Tag des Elternelements. Die am häufigsten verwendete Methode ist ein leerer Container mit dem Attribut clear.

HTML
Code: Alles auswählen
<div class="clear"></div>
CSS
Code: Alles auswählen
.clear{
clear: both;
}
“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
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Probelm mit der Plazierung zweier divs nebeneinander"

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

Wer ist online?

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

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de