Textumfluss links bzw rechts mit CSS korrekt realisieren

F

finne

Mitglied
Thread Starter
Dabei seit
08.07.2007
Beiträge
70
Reaktionspunkte
0
Hallo Mac-User-Gemeinde,

ich habe ein kleines (X)HTML- und CSS-Problem.

Verinfacht dargestellt, möchte ich bei einer Website gern folgendes realisieren:

attachment.php


Im Prinzip kein großes Ding, man könnte ja ganz einfach die Grafik zum umfliessenden Text links via CSS ausrichten lassen. Problem hierbei ist jedoch, dass dann die logische Struktur des Inhalts verloren geht:

Überhschrift
Bild
Text

-> so wäre der Aufbau korrekt.

Im obrigen Beispiel muss ich jedoch, soweit mein CSS-Wissen langt, die Elemente wie folgt anhorden:

HTML: 
<img src="" alt="bla" style="float:left;" /> 
<h2>Überschrift</h2>  
<p class="band">TEXT TEXT TEXT ...</p>

Bild
Überschrift
Text

Das daraus resultierende Probleme ist, dass die Abstände zum nächsten Element natürlich vom Text ausgehen und nicht vom Bild, da der Text das letzte Element ist. Damit kann sich die Anordnung etwas verschieben, gerade beim Skalieren von Schriften.

Wielöst man solch einen Umfluss am sinnvollsten?
 

Anhänge

  • textumfluss_rechts_css.jpg
    textumfluss_rechts_css.jpg
    37,3 KB · Aufrufe: 185
Hallo Finne,

ich kann dein Problem nicht nachvollziehen.

Warum schreibst du nicht

Code: 
<h2>&Uuml;berschrift</h2>  
<img src="" alt="bla" style="float:left;" /> 
<p class="band">TEXT TEXT TEXT ...</p>

Warum soll das nicht gehen?
 
@ MacBarfuss: Die Überschrift soll neben dem Bild stehen, dass klappt dann leider nicht.

Außerdem ist dann immer noch das Problem mit Abstand zum Unteren element.

Vielleicht sollte ich noch folgendes ergänzen:

das oben aufgeührte Beispiel soll x-mal untereinander stehen. Sklaiert man die Schrift (entsprechend klein), verschiebt es die Bilder, so dass sie zum Teil nebeneinander stehen.
 
Fehlt dahinter vlt. einfach nur ein "clear:left"?

Bzw:
Code: 
<img src="" alt="bla" style="clear:left;float:left;" />
 
Finde ich gut, dass Du Dir Gedanken um die Linearität des XHTML-Dokuments machst :)

Hier ist ein Beispiel, das ist evtl. ein Ansatz für Dich:

http://www.creativemac.de/spielwiese/floatingright.htm

Markup und CSS sind in der Datei zu finden, das Ding skaliert vzgl. der Schriften nach oben und unten. Einziger Nachteil: Da ist ein hässliches "clearendes" <br /> eingebaut.

EDIT: Ich habe noch eine 2. Variante gebaut, bei der überlaufender Text unter dem Bild weiterfliesst. Bei Variante 1 bleibt der Text immer im Raster neben dem Bild. Beide Varianten skalieren aber unendlich größer und kleiner ohne das was kaputt geht...


2nd
 
Zuletzt bearbeitet:
Mein Vorschlag:
HTML: 
<head>
 <style>
  div#bild {
  /* float immer mit width verwenden */
    width: 3em;
    float: left;
  }
  div#content {
    margin-left: 3.5 em
  } 
  </style>
</head>
<body>
    <div id="bild">
  <img src="..." ... />
  </div>
  <div id="content">
    <h1>Überschrift</h1>
    <p>Text</p>
  </div>
</body>
 
:kopfkratz:

Kollege, in Deinem Bsp. ist die Struktur des Dokumentes nicht korrekt und der Fragende möchte genau das vermeiden. Mach mal das CSS aus - dann hängt das Bild über dem Textblock mit diesem Code...

2nd
 
2ndreality schrieb:
Finde ich gut, dass Du Dir Gedanken um die Linearität des XHTML-Dokuments machst :)

Hier ist ein Beispiel, das ist evtl. ein Ansatz für Dich:

http://www.creativemac.de/spielwiese/floatingright.htm

Markup und CSS sind in der Datei zu finden, das Ding skaliert vzgl. der Schriften nach oben und unten. Einziger Nachteil: Da ist ein hässliches "clearendes" <br /> eingebaut.

EDIT: Ich habe noch eine 2. Variante gebaut, bei der überlaufender Text unter dem Bild weiterfliesst. Bei Variante 1 bleibt der Text immer im Raster neben dem Bild. Beide Varianten skalieren aber unendlich größer und kleiner ohne das was kaputt geht...


2nd
Zum Vergrößern anklicken....

Hat funktioniert. VIELEN DANK! :D
 
Ach so. Jetzt hab' ich das erst kapiert ;)
Ich selbst arrangiere die Container meist so, dass der Text so weil wie möglich am Anfang des Dokuments steht, weil er so von den Suchmaschinen am stärksten gewichtet wird.
 
Man sollte nicht nur für Suchmaschinen entwickeln. Wenn die Navigation unter dem Content kommt, ist das für Klienten ohne CSS-Unterstützung sehr ärgerlich.

2nd
 
Ja, das ist zwar richtig. andererseits bringt es auch relativ wenig, wenn man weder von Besuchern mit noch von solchen ohne CSS-fähigem Client gefunden wird.

Als Reaktion auf das von Dir geschilderte "Problem" kann man eine durch CSS versteckte Sprunganweisung zur "navi" im oberen Teil des Dokuments platzieren. Ist ein Kompromiss.
 
Naja, es ist ja nun nicht so, dass eine ungeordnete Navigationsliste im Kopfbereich des Dokumentes einer Indizierung entgegensteht ;)

Zumal die Bots dann gleich den Einstieg in viele Bereiche der Seite haben und nicht erst lange auf Links parsen müssen. Für eine gute Indizierung ist dieses Vorgehen nicht hinderlich, gerade wenn man den Gesamtkontext einer Seite betrachtet.

Und die versteckten/sichtbaren Anker auf Bereiche innerhalb einer Seite (Navi, Content, nach oben etc.) sollten sowieso aus Usability-Gründen generell mit eingebaut sein.


2nd
 
Zurück
Oben Unten