kostenloser Webspace werbefrei: lima-city

Floaten funktioniert nicht

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   pueschel

   pueschel hat kostenlosen Webspace.

   20:12, 6.2.2012

   Ich bin gerade am Programmieren von Meldungsfenstern
   für aktuelle Meldungen!
   
   Mein HTML-Code für eine Meldung:
   

   <div class="meldung meldung1">
   	<h4 class="titelout">Hallo Welt</h4>
   	<h6 class="unterout">Bla, bla, bla</h6>
   	<img src="meinbild.jpg" alt="Ein Bild" class="bild" />
   	<div class="inhalt">
   		<h4 class="titelinner">Innen</h4>
   		<h6 class="unterinner">Test, Test, Test...</h6>
   		<span class="text">
   			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
   			<a href="#" class="weiterinn">Weiter</a>
   		</span>
   	</div>
   	<div class="clearfloats"></div>
   	<a href="#" class="weiterout">Weiter</a>
   </div>

   
   
   Bitte wundert euch nicht, dass es zweimal Weiter gibt!
   
   Mein CSS-Code dazu sieht folgendermaßen aus:
   

   * {
   	margin: 0;
   	padding: 0;
   }
   
   div {
   	border: 1px solid red;
   }
   
   .meldung {
   	margin-bottom: 15px;
   	width: 500px;
   	background-color: yellow;
   	float: left;
   	padding-bottom: 1em;
   }
   
   .meldung .bild {
   	float: left;
   }
   
   .meldung .inhalt {
   	/*float: left; */	
   }
   
   .meldung .weiterout {
   	float: right;
   	height: 1em;
   }

   
   
   Das Div könnt ihr auch löschen, da es nur für die Boxen gedacht ist!
   Aber leider wird der Text-Container inhalt um das Bild gefloatet, aber ich
   möchte, dass der Container rechts neben dem Bild bleibt, wie in einer Tabelle,
   aber leider kann ich keine extra erstellen! Es muss mit CSS gehen!
   
   Hat jemand vielleicht eine Idee?
   Das Auskommentierte float lerf hilft leider nicht

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   0:20, 7.2.2012

   Erwartest Du jetzt, daß jemand, um dir zu helfen, die Codeschnipsel gedanklich zum Laufen bringt, oder sogar aus diesen eine Testseite zusammenbaut?
   
   Du hast, hier bei Lima, kostenlosen Webspace. Setze eine Demo deines Problems auf, verlinke sie in deinem Beitrag und jeder kann, mit seinen Werkzeugen, im Browser sofort auf Fehlersuche gehen, ohne sich überflüssige Arbeit machen zu müssen.
   

4. gentleman1

   gentleman1 hat kostenlosen Webspace.

   18:30, 12.2.2012

   Hallo pueschel,
   
   ich habe mir mit Hilfe deiner Codeschnipsel eine kleine Seite zusammengezimmert. Deine derzeitige Ausgangsposition findest du auf http://gentleman1.lima-city.de/hilfe/pueschel/hilfepueschel_ausgang.htm.
   
   Damit das ganze ein bisschen vom linken Rand weg kommt, habe ich das ganze mit

   margin-left: 100px;

   ein bisschen nach rechts gerückt. Das ganze siehst du auf http://gentleman1.lima-city.de/hilfe/pueschel/hilfepueschel.htm.
   
   Solltest du jetzt aber wollen, das der rote Rahmen um deinen Inhalts-DIV an Ort und Stelle bleibt, dann muss man es anders angehen. Hierzu habe ich das ganze statt mit margin mit padding eingerückt. Das ganze siehst du auf http://gentleman1.lima-city.de/hilfe/pueschel/hilfepueschel_fertig.htm.
   
   Meine Lösung hilft dir allerdings nur, wenn du die Breite des Bildes einkalkulieren kannst.
   
   Den CSS-Code für padding lautet:
   
   

   * {
   	margin: 0;
   	padding: 0;
   }
   
   div {
   	border: 1px solid red;
   }
   
   .meldung {
   	margin-bottom: 15px;
   	width: 500px;
   	background-color: yellow;
   	float: left;
   	padding-bottom: 1em;
   }
   
   .meldung .bild {
   	float: left;
   }
   
   .meldung .inhalt {
   	/*float: left; */
   padding-left: 100px;
   }
   
   .meldung .weiterout {
   	float: right;
   	height: 1em;
   }

   
   
   Die anderen kannst du dir gerne aus den Lösungen herauskopieren.
   
   VG
   Gentleman1

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?