Frage wegen Float

Lona · 10.03.2011

Ich arbeite gerade Littl boxes durch , nun bin ich auf eine Problem bei Floaten gestossen.
Ich habe eigentlich alles gemacht wie es beschrieben ist ...aber es klappt leider nicht .
Ich wollte die Bildergalerie nachbauen und habe folgenden Code genommenCSS..

Code:

<style type="text/css">
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
}
h2 { font-size: 130%; }
h3 {
  font-size: 110%;
  margin: 0 0 1em 0;
}
div.galerie {
  background-color: #eee;
  width: 500px;
  padding: 10px;
  padding-top: 25px;
  border: 1px solid black;
  margin: 0 3px 3px 0;
}
div.galerie img {
  float: left;
  margin-right: 15px;
}



</style>

Leider ändert sich bei mir nichts...es sollte Bild 2 versetzt nach rechts sein aber die beiden Bilder stehen nach wie vor untereinander.

HTML:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Startseite Lernen mit little Boxes</title>
 <style type="text/css">
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
}
h2 { font-size: 130%; }
h3 {
  font-size: 110%;
  margin: 0 0 1em 0;
}
div.galerie {
  background-color: #eee;
  width: 500px;
  padding: 10px;
  padding-top: 25px;
  border: 1px solid black;
  margin: 0 3px 3px 0;
}
div.galerie img {
  float: left;
  margin-right: 15px;
}



</style>



 <link href="bildschirm.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="navi.css" rel="stylesheet" type="text/css" media="screen" />

  </head>
<body id="kontaktseite">

   <div id="wrapper">

<div id="kopfbereich">
<h1><img src="logo.gif" id="logo" alt="Little Boxes" width="222"
height="32" /></h1>
<p>Webseiten gestalten mit HTML und CSS<span> Grundlagen</span>.</p>
</div> <!-- Ende kopfbereich -->

<div id="navibereich">
 <ul>
<li id="navi01"><a href="index.html">Startseite</a></li>
<li id="navi02"><a href="kontakt.html">Kontakt</a></li>
</ul>

</div> <!-- Ende navibereich -->

<div id="textbereich">

             <h2>Die Galerie</h2>
<div class="galerie">
<img src="landschaft01.jpg" width="203" height="180" alt="Von Bäumen umstandener See, in dem sich Wolken spiegeln" />
<h3>Landschaftsbild 01</h3>
<p>Lorem ipsum dolor sit amet, ...</p>
</div> <!-- Ende .galerie 01 -->
<div class="galerie">
<img src="landschaft02.jpg" width="203" height="180" alt="Weite Grasfläche mit Wolken und Halmen im Vordergrund" />
<h3>Landschaftsbild 02</h3>
<p>Lorem ipsum dolor sit amet, ...</p>
</div> <!-- Ende .galerie 02 -->
<p>Alle Fotos von <a href="http://pixelio.de/">pixelio.de</a></p>




</div>
<!-- Ende textbereich -->

<div id="fussbereich">
  <address>
RoseMarie Hellriegel&middot; Lindenstrasse50 &middot; 01234 06679 Hohenmölsen
<br />
Tel: 034441/23378&middot;
</address>


</div> <!-- Ende fussbereich -->

</div> <!-- Ende wrapper -->












<!-- Sichtbarer Teil der Webseite, noch leer -->

































</body>
</html>

Könnte mal jemand drüberschauen?ich komme nicht dahinter was verkehrt sein könnte.
Danke schonmal

cebito · 10.03.2011

AW: Frage wegen Float

Du floatest die Bilder in .galerie, da ist aber immer nur eins drin.

mwxx · 11.03.2011

AW: Frage wegen Float

Wie schon cebito anreisst: Du floatest zwar jedes einzelne <img> innerhalb der <div>s, die aber selbst erstens Blockelemente darstellen (und damit auf natürliche Weise umbrechen) und zweitens selbst nicht floaten ! Gib doch mal auch den divs ein float:left. Wenn's dann immer noch nicht will, kannst Du ja mal versuchsweise über display: inline die Blockartigkeit der Divs aufheben

Lona · 11.03.2011

AW: Frage wegen Float

Danke für die Atworten...ich habe es gemacht wie es in der Anleitung beschrieben ist..
Ich versuche es nochmal heute Nachmittag.
Es ist nur ich fange ja erst so richtig an zu lernen...da guckt man dann immer dumm aus der Wäsche,wenn es nach Anleitung doch nicht hinhaut.
Ich kenne mich leider nicht so aus...

spreewaelder · 11.03.2011

AW: Frage wegen Float

Ich glaube, Du haßt .clearing { clear: both; } vergessen.
Wenn man sich erst einarbeitet und irgenetwas vergißt, bekommt man graue Haare.
Meine eigene Erfahrung.

Lona · 11.03.2011

AW: Frage wegen Float

Nein es ist ganz anders..im FF ist es richtig so wie beschrieben aber mein Phase 5 nimmt den IE da wird es falsch angezeigt...
Hab mal die Datei mit FF geöffnet und da war es richtig...muss gleich nochmal fragen wie ich PH 5 einstellen kann dass die Voransicht mit dem FF angezeigt wird..

MegaAdi · 11.03.2011

AW: Frage wegen Float

Uff... Phase5 is schon ne weile her. Aber wenn ich mich nicht Täusche dann Einstellungen -> Browser intern/extern sein...

Gruß Adrian

cebito · 11.03.2011

AW: Frage wegen Float

MegaAdi schrieb:
Uff... Phase5 is schon ne weile her. Aber wenn ich mich nicht Täusche dann Einstellungen -> Browser intern/extern sein...

Gruß Adrian

Richtig, über "Browser hinzufügen" kannst dann alle möglichen einfügen und später über den Pfeil(Dreieck) neben dem internen Browser auswählen.

Lona · 12.03.2011

AW: Frage wegen Float

Prima ich habe es so gemacht,nun wird die kleine Galerie richtig angezeigt im (FF)