Willkommen im TP-Hilfe-Forum! Dies ist ein Forum zu den Themen Photoshop, Dreamweaver, Flash, Selbständigkeit und mehr, in dem Du Hilfe, Anleitung oder eine Lösung zu Deinen Problemen erhältst.
Aktuell bist Du in unseren Foren als Gast mit reinen Leserechten unterwegs. Wenn Du Dich registrierst, kannst Du eigene Themen verfassen, deine Frage stellen und privat mit anderen TPlern kommunizieren. Weitere Foren werden zugänglich, und Du wirst – falls gewünscht – per Mail über neue Beiträge informiert. Die Registrierung ist schnell und kostenlos. Sollten bei der Registrierung Fragen auftauchen, reicht ein Klick in unsere Hilfe - Häufig gestellte Fragen oder eine kurze Mitteilung an das Support-Team.
Es geht um folgende Seite: url auf Wunsch des Betreibers gelöscht
Das Bild in der Mitte (bei dem "Wein -Gedicht") wir in allen Browsern richtig dargestellt nur im IE7 nicht.
Habs jetzt auf 3 verschiedene Varianten versucht einzubinden - beim IE 7 ist entweder nur ein Teil vom Bild oder gar kein Bild.
hier die drei Varianten:
url auf Wunsch des Betreibers gelöscht - nur ein Teil
url auf Wunsch des Betreibers gelöscht - nur ein Teil
url auf Wunsch des Betreibers gelöscht - gar kein Bild
die Codes der 3 Varianten:
index normal:
PHP-Code:
</div> <div class="start"> <img src="http://www.traum-projekt.com/forum/images/markus_fels_small.jpg" hspace="5" align="left" alt=""> <i> Im Wein sind Mühe, Winzers Fleiß.<br> Im Wein sind .... Roland Betsch</i></div>
test_index:
PHP-Code:
<div class="start"> <img src="http://www.traum-projekt.com/forum/images/markus_fels_small.jpg" class="startbild" alt=""> <i> Im Wein sind Mühe, Winzers Fleiß.<br> Im Wein sind S.... Roland Betsch</i></div>
Ich wäre dafür, das corpus delicti-Bild mit Größenangaben zu versehen. Probiere es mal so:
<img src="http://www.traum-projekt.com/forum/images/markus_fels_small.jpg" width="80" height="195" border="0" alt="Bild">
(Und den Alt-Bezeichner sollte man der Sauberkeit halber auch setzen...)
Aus meiner Sicht macht es nicht viel Sinn, die Größe für das Bild über die CSS-Klasse vorzugeben. Damit ist sie nicht sehr universell.
Gerade die fehlende Größenangabe mag im Zusammenhang mit der float:left Eigenschaft für den Browser verwirrend sein.
Also bei mir im IE7 wird es immer noch abgeschnitten. Sehr komische Sache dass. Quelltext in Ordnung (jedenfalls meckert der Validator nicht), beim Bild scheint auch kein Fehler vorzuliegen (der IE7 lädt es alleine komplett).
Nimm doch erstmal alles andere aus dem Container raus (also den Text) und dann schauen wir weiter..
__________________
Je größer der Deppenfaktor, desto gigantischer das Bescheidwissergefühl
-Dieter Nuhr
....hmmm ... wenn ich mir das bild angucke, schaut es eigentlich so aus, als ob er es einfach in der zweiten zeile abschneidet ...
vielleicht liegt es ja auch am <br> ... mag er das in dem zusammenhang nicht?
-> kannst da mal das gucken: url auf Wunsch des Betreibers gelöscht
(ohne <br> mit <pre> formatiert)
oder interressant für mich wäre auch wie es hier aussieht:
url auf Wunsch des Betreibers gelöscht
(ohne css - vielleicht istzs ja auch nur irgendein style format, dass er nicht kapiert ...
DANKE für deine mühe!!!
lg thomas
__________________
--------------------- offroad 4 fun
Es mag gut sein, dass es in der "letzten Version" ganz gut passt.
Aber durch die dem Bild zugeordnete Eigenschaft "align=left" wird das Bild zwar richtigerweise nach links geschoben, aber dafür interessiert sich das übergeordnete <div> nicht mehr dafür: der eigentlich grüne Hintergrund ist nur noch für den oberen Abstand vorhanden und erstreckt sich nicht mehr über die gesamte Höhe des Bildes. Dazu kommt, würde der Text wieder auf die vollen Zeilen ergänzt, dass dieser um das Bild "herumläuft" und u.U. einen unschönen Knick macht. Letzten Endes ist das also keine gute Lösung.
Ich könnte 2 Varianten vorschlagen:
1. Mache ich eigentlich nicht gerne, aber da Dein Seitenkonzept ohnehin stark auf Tabellen aufbaut, tut es der Sache keinen Abbruch: Füge in die Zelle, wo jetzt Deine 2 divs sind, eine Tabelle (1 Zeile, 2 Spalten) ein. In die linke Spalte das Bild, ohne weitere css-Attribute wie float,background-color usw. (evtl nur die Ränder belassen). In die rechte Spalte den Text, und der <td> die css-Klasse "text" zuweisen (muss man im IE<6 ohnehin machen) - also auch ohne weitere divs. Wichtig ist ebenfalls, der übergeordneten <td> (also der, die ursprünglich die beiden divs enthielt), die Hintergrundfarbe zuzuweisen, nur damit hat man jetzt komplett den gewünschten Raum grün.
2. div-Konstrukt. Und ebenfalls der vorhandenen Tabellenzelle die Hintergrundfarbe zuweisen!!
<td class="text" bgcolor="#F9FBE5">
<div>
<div style="float:left; width=80px;">
<img... />
</div>
<div style="float:right;"> Wein-Gedicht...
</div>
<div style="clear:both;height=0px;"></div>
</div>
</td>
@thomas p
Deine tp3_index.php macht genau das, was ich schrieb: der Text wickelt sich um das Bild, was wohl nicht beabsichtigt ist. Im Grunde willst Du eine 2spaltige Darstellung.
Zu diesem Zwecke hatte ich 2 Lösungsvorschläge geschrieben, wie ich es machen würde. Entweder man fügt noch 'ne Tabelle ein (Variante 1) oder man strukturiert die divs etwas besser (Variante 2).
Ich habe mal Deine Seite genommen und im Quelltext das umgesetzt, was ich in Variante 2 schrieb. Der rot markierte teil ist verändert. (Abgesehen davon sind in Deiner Seite noch Fehler drin: es gibt noch td und tr-Tags innerhalb einer Zelle, das ist Kuddelmuddel und nicht sauber. Die Fehler stehen in dem sich anschließenden Teil, wo die Links sind. Außerdem sollte man Umlaute und Sonderzeichen aus dem Quelltext entfernen und durch HTML-Entsprechungen ersetzen. Aber das ist nicht die Ursache für das Problem.)
<td width="400">
<div class="start1">
<br>
<b>Willkommen auf der Webseite des<br>
WEINGUT PRÖGLHÖF</b><br>
<br>
</div>
<div>
<div style="float:left; width=90px;">
<img src="http://www.traum-projekt.com/forum/images/markus_fels_small.jpg" width="80" height="195" border="0" alt="Proeglhoef-Weine" hspace="5">
</div>
<div style="float:right; width:300px;">
Im Wein sind Mühe, Winzers Fleiß.<br>
Im Wein sind Sonne, Sorg` und Schweiß.<br>
Im Wein ist Erde neu erstanden.<br>
Im Wein ist Geist aus Väters Landen.<br>
Im Wein sind Schöpfung, Hoffen, Bangen.<br>
Im Wein sind Jahre eingefangen.<br>
Im Wein sind Wahrheit, Leben, Tod.<br>
Im Wein sind Nacht und Morgenrot<br>
und Jugend und Vergänglichkeit.<br>
Im Wein der Pendelschlag der Zeit.<br>
Wir selbst sind Teil von Wein und Reben.<br>
Im Weine spiegelt sich das Leben.<br>
Roland Betsch
</div>
<div style="clear:both;height=0px;"></div>
</div>
Sorry, ich habe "rückwirkend" noch mal was geändert in meinem Posting.
Deine in neu_index.php dargestellte 2-Spalten_Variant funktioniert nicht richtig, weil sie nicht richtig in dem übergeordneten Container zurechtkommt (bei Dir befindet sich beides in der Zelle, td) und wahrscheinlich mit den float-Anweisungen ein Problem hat. Das von mir vorgeschlagene Stück hat einen
Div-Container, der 3 Untercontainer enthält - einen linksausgerichteten für das Bild und einen rechtsausgerichteten für den Text und einen dritten, der zum Abschluss den obersten Container auf die richtige Höhe "zwingt".
Nein, passt noch nicht
Du hast 3 Dinge noch nicht berücksichtigt.
Das Bild steckt bei Dir im Container mit der Klasse "startbild". Diese Klasse hat keine Angabe einer Breite, so dass der Browser hier vielleicht sonst irgendwas zurechtlegt. Setze in der CSS-Definition von "startbild" ein "width:100px;" hinzu, das dürfte dann auch mit den gewünschten Abständen passen.
Der Text steckt in einem Container mit der Klasse "text". Diese Klasse hat kein float-Eigenschaft, damit wird sie nicht am rechten Rand dargestellt, sondern da wo Platz ist und läuft zwangsweise auch um das Bild herum, wenn selbiges nicht hoch genug ist. Da ich nicht weiß, wo Du die Klasse "text" noch verwendest (immerhin läässt das der allgemeine Bezeichner "text" ja vermuten), würde ich nicht die Klasse ändern, sondern nur den Container, in dem jetzt Dein Gedicht steckt. Ergänze den Eintrag auf folgenden Umfang <div class="text" style="float:right">, dann passt das Gedicht hin. Glücklicher Umstand ist hier, dass das Gedicht in seiner Breite immer so ist, dass es neben das Bild passen kann. Wenn dagegen eine Zeile zu lang wäre (also ein paar Worte mehr, ich habe das im Bild unten mal eingebaut), dann würde der IE 7 richtig umbrechen und Opera z.B. den ganzen div mit dem kompletten Gedicht soweit nach unten schieben, dass es zwar rechtsbündig, aber unter dem Bild liegt. Normalerweise muss man also noch eine Breitenangabe für dieses div-Tag machen, was dann komplett so aussehen sollte:<div class="text" style="float:right; width:250px;">. Mit den Breiten ist es aber so eine Sache, insbesondere innerhalb von Tabellen. Selbst wenn Du im Code eingetragen hast <td width=400> muss die Zelle nicht in jedem Falle genau so breit sein, denn die Tabelle dehnt sich trotz allen Vorgaben ggfs. nach breiteren Inhalten aus. Aber mit der Seite habe ich es probiert und es klappt.
Der Linkeintrag für den Veranstaltungskalender rutscht willkürlich nach oben. Das behebt man mit dem "unbekannten Element" clear:both.
Ich habe alle 3 Dinge um- bzw. eingebaut und anhängendes Bild im IE7 geschossen (nicht wundern, ich habe die Seite lokal mit einem anderen Bildchen gemacht).
