Bilder und Texte anordnen: unter XHTML / CSS (Seite 2) (HTML, CSS und Javascript)

[thread]2182[/thread]

Bilder und Texte anordnen: unter XHTML / CSS (Seite 2)

ptk

2004-01-26 20:38

User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]

[quote=Crian,23.Jan..2004, 20:28][quote=ptk,22.01.2004, 19:40]Kannst du mal posten, wie du es gemacht hast?[/quote]
Klar. Auszug aus der CSS-Datei:

Code: (dl )

1
2
3

img { margin:5px; }
img.links { float:left; }
img.rechts { float:right; }

und bei den Bildern dann halt entsprechend

Code: (dl )

<img src="xxx.jpg" alt="Bild xxx" title="bla fasel..." width="507" height="338" class="links"  />

[/quote]
Moechtest du Bild und Text in Spalten organisieren oder einfach den Text um das Bild umfliessen lassen? Ich habe das Problem, dass ich fuer das Spalten-Problem noch keine richtig gute Loesung gefunden habe, die auch mit CSS/MP (=mobile profile, abgespecktes CSS) funktioniert. float geht dann nur, wenn das Bild hoeher ist als der Textblock. Ich habe auch mit <ul><li> und list-style-image experimentiert, aber keine zufriedenstellenden Ergebnisse bekommen.

KKO

2004-01-26 21:21

User since
2003-11-05
124 Artikel
BenutzerIn

user image

hallo,
die "tabellen"-mäßige darstellung mit css ist, wenn man sich vom gewohnten <table> löst, nicht so besonders komplex.
ein beispiel, um drei spalten anzuzeigen, wobei #mitte sich der fenstergröße anpasst:

Code: (dl )

<html><head>
<style type="text/css">
#mitte { margin-left: 205px;  margin-right: 205px; }
#links { width: 200px;  float: left;  }
#rechts {width: 200px; float: right; }
</style>
</head><body>

<div id="links"><h1>LINKS</h1>
<pre>
  width: 200px;
  float: left;
</pre>
 </div>

<div id="rechts"><h1>RECHTS</h1>
<pre>
  width: 200px;
  float: right;
</pre> </div>

<div id="mitte"><h1>MITTE</h1>
<pre>
  margin-left: 205px;
  margin-right: 205px;
</pre>
</div>
</body></html>

Gruß
KKO

ptk

2004-01-27 11:57

User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]

Diese Loesung hat einige Probleme:
- Aus unerklaerlichen Gruenden fuegt der Mozilla 1.6 extra vertikalen margin zum linken und rechten <h1>. Mit margin-top:0px und margin-bottom:0px kann man das Problem loesen. Opera 7.23 verhaelt sich wie erwartet
- Es werden absolute Pixelwerte verwendet. Mir waere es lieber, wenn man es relativ machen koennte. Beispielsweise mit der Benutzung von "%" statt "px", aber besser waere es, wenn man die Breite relativ zu einer Bildbreite machen koennte.
- Wie machst du es, wenn du zu den drei Spalten noch einen Footer einrichten willst? Wie es aussieht, muesstest du dich die mittlere Spalte zur laengsten Spalte machen, aber das kann man nicht immer erzwingen.

Aber fuer mein spezielles Problem koennte der Trick mit margin-left fuer die mittlere Spalte helfen... ich werde gleich mal gucken, ob es mit den CSS/MP-Geraeten funktioniert.

Crian

2004-01-27 13:09

User since
2003-08-04
5873 Artikel
ModeratorIn

Ja, ich will eigentlich Bilder und Texte in Spalten darstellen. An KKO's Lösung stören mich die festen Pixelwerte, alles andere ist bei mir relativ zur Seitenbreite, da werd ich nicht mit sowas anfangen.
Dann lieber Tabellen ;)
Oder halt Text, der dumm um die Bilder rumfließt, anders als er soll.
Im Grunde genommen fehlt eine Art Frame-Element, um es in der Tk-Denkweise zu sagen. Dann könnte man zum Beipiel drei Bilder in einen frame packen und um diese gemeinsam den Text floaten lassen.

Diesen Frame könnte ich natürlich mit einer Tabelle mit einem Feld emulieren, aber dann wäre sie wieder da, die Tabelle, die man eigentlich nicht mehr benutzen will.\n\n

s--Pevna-;s.([a-z]).chr((ord($1)-84)%26+97).gee; s^([A-Z])^chr((ord($1)-52)%26+65)^gee;print;

use strict; use warnings; Link zu meiner Perlseite

ptk

2004-01-27 15:00

User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]

<div> und <span> sehen ja fast aus wie Tk::Frame, aber verhalten sich leider anders. <td> verhaelt sich da wesentlich besser.

View all threads created 2004-01-20 00:52.