Float links

**Stickl** · 19.01.2012, 13:58

Hallo! Könnte mal wieder Hilfe brauchen. Bin dabei, Mobile Webseiten zu gestalten, eigentlich für Smartphones, sollen aber auch auf dem Pad gut aussehen. Wenn ihr euch u.g. Seite anschaut, verschieben sich die Absätze nach rechts, je nachdem, wieviel Text neben dem Foto steht und wie breit das Browserfenster ist. Wie löse ich das elegant. Danke schon mal . . . LG Stickl

http://www.mobil.massenkeil-bildhauer.de/arbeiten.html

**wildmieze** · 19.01.2012, 16:11

.. du musst das float vor einem neuen Absatz wieder aufheben.

Ganz spontan würde ich vermutlich Bild und Text jeweils in einen Container packen (das <p> sollte dafür eigentlich ausreichen) und diesem ein overflow:hidden mitgeben.

**Stickl** · 19.01.2012, 16:55

Aber der nächste Absatz beginnt ja wieder mit einem Bild float: links, damit sich der Text gleich anschliesst. Wie sage ich dem Bild, dass es ganz links zu stehen hat?

**wildmieze** · 19.01.2012, 19:19

Das kann ja auch so bleiben^^ .. du musst halt schauen, daß das float:left quasi nur für den jeweiligen Absatz gilt, damit nicht der ganze nächste Absatz mit hochrutscht.. gib Deinen <p> in den css mal testweise ein zusätzliches overflow:hidden; und setze das Bild hinein statt davor .. also so: <p><img>text text text</p>

Edit: achso, Du hast ja noch <h3>-Überschriften .. öhmm .. ich weiß gerade nicht, ob das valide ist, aber pack erstmal einfach mit in das <p> .. wenn das nicht funktioniert / nicht valide ist, kannst Du um das <img><h3> und <p> jeweils ein <div> mit overflow:hidden; legen, müsste den gleichen Effekt haben ..

**Stickl** · 19.01.2012, 19:56

Das habe ich probiert, mit dem Ergebnis, dass mein Text dann an den linken Rand rutscht, das Bilder aber weiter rechts rumschwirrt, wo es nicht sein soll :-(
Das Kommando dürfte nur für die Fotos gelten?!?!? Position links aber mit umlaufendem Text.

**wildmieze** · 19.01.2012, 23:04

*kratzamkopp* .. kann natürlich sein, daß durch die Änderungen margins und/oder paddings angepasst werden müssen.
Zeig mal den geänderten Quelltext/CSS, oder lade die Seite irgendwo hoch .. vielleicht seh ich dann, woran es liegt ..

**Stickl** · 19.01.2012, 23:24

Die Seite ist online und somit Stylesheet und Quellcode. Ich habe mal zwei Screenshots beigefügt, wie es nicht aussehen soll und wie ich es mir wünsche.

**wildmieze** · 19.01.2012, 23:42

Ähh .. ja. Das ist aber die ursprüngliche Version, die ich oben anklicken kann .. also ohne die vorgeschlagenen Änderungen .. wir wollten doch gucken, warum DIE nicht funktionieren ..

**Stickl** · 20.01.2012, 00:05

Stimmt, weil es ja nicht funktioniert hat - aaaaaaaaaaaaaaaber - du hast mich doch drauf gebracht. Ich muss für jeden Absatz ein div anlegen

div#absatz1 {}
div#absatz2 {margin:0px; overflow:hidden}
div#absatz3 {margin:0px; overflow:hidden}
div#absatz4 {margin:0px; overflow:hidden}
div#absatz5 {margin:0px; overflow:hidden}

und dann geht es.
Komischerweise nicht für einen breiten Bildschirm, aber für die Groesse des iPads reicht es.
Ich habe mal einen Screenshot beigefügt, der zeigt wie weit man jetzt das Fenster aufziehen kann.

Ich danke dir recht herzlich für deine Mühe! Schlaf gut . . . LG Ina

**Stickl** · 20.01.2012, 00:39

Es ist auch nur der zweite Absatz der nach rechts springt, wenn das Browserfenster weiter aufgezogen wird. Schreibe ich aber ins erste div#absatz1 {margin:0px;overflow:hidden} haut es mir den ganzen Text unter das erste Bild, grübel grübel
Wenn uns nichts mehr dazu einfällt ist nicht so schlimm, obwohl es mich natürlich schon interessieren würde, wie ich das noch in den Griff bekommen kann, denn dann sieht die Seite in jedem Fall bei jeder Auflösung ordentlich aus.

**wildmieze** · 20.01.2012, 07:44

Hmmm ... spontan sehe ich auch nichts, was das verursachen könnte .. der Validator sagt, ein </div> am Ende ist zuviel, vielleicht ist es das?

**Stickl** · 20.01.2012, 09:12

Das letzte div ist es nicht, allerdings frage ich mich - ist es zwingend notwendig Mobile Webseiten Strict zu programmieren???

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

W3C Validator moniert 11 Fehler, total ätzend . . .

zur Startseite vom TP

Thema: Float links

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Float links

Absatzkontrolle

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[CSS] float links und float rechts

[CSS] float:right wird im IE6 zu weit links dargestellt

float?

[CSS] Probleme mit Float <div>'s und <p>'s

[CSS] Float-Problem

Aktive Benutzer

Aktive Benutzer

Berechtigungen