zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder im div mit float positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.01.2009, 23:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 3
henmey befindet sich auf einem aufstrebenden Ast
Standard Bilder im div mit float positionieren

Hallo zusammen!

Ich möchte zwei divs mit float nebeneinander positionieren (Navi und Main), was auch problemlos funktionier. Weiter möchte ich im div Main meine Bilder auf der rechten Seite positionieren und der Text soll links am Bild vorbei fließen. Bis hier ist auch noch alles ok.
Der Text der zum Folgenden Bild gehört, soll aber erst auf Höhe des entsprechenden Bildes beginnen, auch wenn neben dem vorausgegangenem noch Platz ist. Und hier liegt das Problem. Wenn ich die Bilder mit "float: right;" positioniere, wird der Platz links neben dem Bild immer erst komplett aufgefüllt.
Wenn ich nach dem Text für z.B. das Erste Bild einen leeren Absatz mit <p style="clear:both;"></p>" einfüge, um mit dem nächsten Absatz unter Bild1 und neben Bild2 zu beginnen, rutscht das nächste Bild und der zugehörige Text ganz nach unten unter div Main.
Was mache ich falsch?
Gibt es eine andere Möglichkeit für das Problem?

Hier der Link zum Problem:
Testpage

Danke schon mal im Voraus!

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Testpage</title>
<style type="text/css">

div#nav_links {
  BACKGROUND-COLOR: #FF99FF;
  HEIGHT: 500px;
  width: 50px;
	float: left;
}

div#main {
  BACKGROUND-COLOR: #FFFFCC;
  HEIGHT: 500px;
  width: 600px;
}

div#main img {
 float: right;
}

#defloat {
	clear: both;
}

</style>
</head>

<body>
  <div id="nav_links"></div>
   <div id="main">
     <p><img src="Beispiel.jpg" width="325" height="240" Border="2" alt="Bild1"></p>
     <p>test1</p>
     <p>fbrjhebf wefjhbfw wjhfb fejhwbf wefwfewef wefwfe efwtg erg eeqrgqerg erger </p>
     <div id="defloat"></div>

     <p><img src="Beispiel.jpg" width="325" height="240" Border="2" alt="Bild2"></p>
     <p>test2</p>
     <p>fbrjhebf wefjhbfw wjhfb fejhwbf wefwfewef wefwfe efwtg erg eeqrgqerg erge </p>
  </div>
</body>
</html>

Geändert von henmey (25.01.2009 um 01:14 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.01.2009, 23:25
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 700
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

Die wenigsten laden sich hier eine Datei runter.

http://xhtmlforum.de/40080-f-r-frage...twortende.html

Stelle Deine QT hier ein und gebe uns eine URL an, wo man sich das anschauen kann.
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.01.2009, 01:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 3
henmey befindet sich auf einem aufstrebenden Ast
Standard Danke!

Danke für den Tip!
Habe es gleich geändert, besser so?
Mit Zitat antworten
  #4 (permalink)  
Alt 25.01.2009, 01:36
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 700
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

Es gibt zwei Möglichkeiten:

1. Mittels float
2. Mittels einer Liste und absoluter / relativer Positionierung

Die erste Möglichkeit hast Du ja jetzt probiert.

Tipp: Packe Deine Bilder und den dazugehörigen Text in ein div, zum Beispiel:
HTML-Code:
<div class="galerie">
  <img src="... />
  <h3>Bildname</h3>
  <p>Text ...</p>
</div> <!-- Ende galerie01 -->
Dann such mal nach folgenden Möglichkeiten:
- Ein zusätzliches div was gecleart wird.
- Das umgebene div (was Du jetzt noch nicht hast) ebenfalls floaten.
- Nach overflow: hidden (Mein Favorit, sehen aber einige hier im Forum anders. )

Oder Du machst die zweite Möglichkeit in dem Du eine ul oder ol baust und positionierst sie mit position absolut und relativ.
Tipp: Wenn der Text kürzer ist als das Bild min-height
__________________
Gruß Michael
SketchAtomTransmit

Geändert von emti (25.01.2009 um 01:46 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 25.01.2009, 02:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 3
henmey befindet sich auf einem aufstrebenden Ast
Standard

Jo, das ist es !
Wenn ich dem <div id="main">, in welchem sich die Bilder und der etsprechende Text befindet, die Eigenschaft "overflow: hidden; zuweise dann liegen die Bilder und der Text genau da wo ich sie haben will.

Danke für die schnelle Hilfe!

Gruß Hendrik
Mit Zitat antworten
Antwort

Stichwörter
bilder, div, float

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
IE 8/9 float & Div Probleme Numrollen CSS 27 23.05.2011 17:03
float Problem? Div "wächst" nicht mit inhalt mit. Garlandt CSS 2 11.04.2011 16:02
Problem mit dem Positionieren der Login Div Cybertronic CSS 26 06.10.2009 22:51
div float erstellen klappt nicht suse2222 CSS 11 28.04.2009 13:10
div neben zentriertem div positionieren tramiz CSS 15 06.04.2009 13:06


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:44 Uhr.