Hallo,
ich versuche gerade ein Bild in meiner Typo3 Seite an einer bestimmten Position anzuzeigen. Im Netscape und Firefox klappt es gut aber der Internetexplorer weigert sich standhaft es anzuzeigen.
Hier der CSS-Teil:
#Bild
{
position: absolute;
top: 70px;
left: 600px;
}
Da der HTML-Schnippsel:
<div id="Bild">
<img src="uploads/tf/bild.jpg" width="187" height="108" alt="" title="Firmenansicht" />
</div>
Gruß
Alexander
Eventl. liegt das Bild im IE unter einer anderen Ebene!?
Teste folgendes:
#bild {
position: absolute;
top: 0; /* ganz oben */
left: 0; /* ganz links */
z-index: 999;
}
Danke für Deine Antwort. Ich habs gerade probiert geht aber trotzdem nicht im Netscape und Firefox wird das Bild in die linke obere Ecke gesetzt und beim IE erscheint es überhaupt nicht.
Ist schon sehr seltsam.
Alexander
alexander_ro schriebDanke für Deine Antwort. Ich habs gerade probiert geht aber trotzdem nicht im Netscape und Firefox wird das Bild in die linke obere Ecke gesetzt und beim IE erscheint es überhaupt nicht.
Lade dir doch mal diese Erweiterung für den Internet Explorer herunter. Funktioniert ähnlich wie Firebug für den Firefox-Browser. Damit kannst du genau sehen wo der Inhalt deiner Seite hingebastelt wird, auch wenn du nichts siehst.
Ciao
Frank
panda70 schriebLade dir doch mal diese Erweiterung für den Internet Explorer herunter. Funktioniert ähnlich wie Firebug für den Firefox-Browser. Damit kannst du genau sehen wo der Inhalt deiner Seite hingebastelt wird, auch wenn du nichts siehst.
Hey das Teil ist ja voll Imbar, danke für den Hinweis.
Aber aus dem was ich da gesehen habe bin ich nicht so recht schlau geworden. Sehen tut man das Bild immer noch nicht. Aber im Dokumentenbaum ist es vorhanden. Ich habe das IMG-Tag mal mit einem anderen verglichen und da fällt als erstes auf das höhe und breite auf 0 stehen. Im HTML-Code ist aber höhe und breite ungleich 0 angegeben.
Ausgabe des Internetexplorers zu dem betroffenen Bild:
Actual Width
187px
Actual Height
108px
Adjusted Width
0px
Adjusted Height
0px
Alt text
[Empty Alt Value]
Title text
Firmenansicht
File Size
6737 bytes
Bei den anderen Bildern ist "Adjusted" und "Actual" mit der korekten größe belegt.
Wie gibts denn sowas?
und was muß man sonst noch beachten?
Alexander
alexander_ro schriebAber aus dem was ich da gesehen habe bin ich nicht so recht schlau geworden. Sehen tut man das Bild immer noch nicht. Aber im Dokumentenbaum ist es vorhanden. Ich habe das IMG-Tag mal mit einem anderen verglichen und da fällt als erstes auf das höhe und breite auf 0 stehen. Im HTML-Code ist aber höhe und breite ungleich 0 angegeben.
Ausgabe des Internetexplorers zu dem betroffenen Bild:
Actual Width
187px
Actual Height
108px
Adjusted Width
0px
Adjusted Height
0px
Alt text
[Empty Alt Value]
Title text
Firmenansicht
File Size
6737 bytesBei den anderen Bildern ist "Adjusted" und "Actual" mit der korekten größe belegt.
Wie gibts denn sowas?
und was muß man sonst noch beachten?
Ich nehme an du hast das Bild in einem div stehen? Gibt dem div die Größenangaben mit und schau was passiert. Also ergänze dein CSS um width und height mit den richtigen Pixelangaben.
Ciao
Frank
Das wäre zu schön gewesen aber leider macht die größen Angabe beim div keinen Unterschied.
Ich habe jetzt mal versucht die Seite mit dem IE zu speichern und dann den HTML-Code schrittweise zu entfernen. Wenn alles bis auf den div mit dem Bild (siehe erstes Posting) entfernt ist dann wird es angezeigt und auch die Pixelangaben sind nicht mehr 0.
Alexander
alexander_ro schriebDas wäre zu schön gewesen aber leider macht die größen Angabe beim div keinen Unterschied.
Ich habe jetzt mal versucht die Seite mit dem IE zu speichern und dann den HTML-Code schrittweise zu entfernen. Wenn alles bis auf den div mit dem Bild (siehe erstes Posting) entfernt ist dann wird es angezeigt und auch die Pixelangaben sind nicht mehr 0.
Alexander
Mach das DIV einfach weg, und gib dem Bild eine Klasse, damit kannst du dann das Bild positionieren - ein DIV Container ist hier vermutlich völlig überflüssig.
Das DIV beim Bild wegzulassen hat leider auch nicht geholfen.
Ich habe nach langem aus/ein komentieren festgestellt daß das Bild beim hinzufügen eines "float: left;" bei id "InfoZeile" verschwindet. Ich bin leider weit davon entfernt zu verstehen warum das so ist. Dummerweise ist das float aber nötig weil der IE sonst die Blöcke ineinander schiebt.
CSS-Datei:
#InfoZeile
{
float: left; /* <== Dieser ist der Übeltäter */
margin: 0;
padding: 0;
font-size: 0.8em;
border: 0px solid black;
background: #E5E5EA;
}
#BrotKruemelNavi
{
float: left;
margin: 0;
padding: 5px 0 0 10px;
border: 0px solid black;
}
#Impressum
{
float: right;
margin: 0;
padding: 5px 10px 0 0;
border: 0px solid black;
}
Ausschnitt der HTML-Datei mit dem Problembild. Das erste IMG und darunter der DIV für die InfoZeile ganz oben in der Seite:
<img src="uploads/tf/bild.jpg" width="187" height="108" class="FirmenAnsicht" alt="" title="Firmenansicht" />
<div id="InfoZeile">
<div id="BrotKruemelNavi">Home</div>
<div id="Impressum"><a href="index.php?id=9">Impressum</a></div>
</div>
Ich habe im moment auch keine Idee wie ich das umgehen könnte. In der InfoZeile soll eben die Brotkrümmel-Navi rechts und der Impressum-Link links erscheinen und ich hatte nur die Idee das per float zu machen.
Alexander
alexander_ro schriebDas DIV beim Bild wegzulassen hat leider auch nicht geholfen.
Ich habe nach langem aus/ein komentieren festgestellt daß das Bild beim hinzufügen eines "float: left;" bei id "InfoZeile" verschwindet. Ich bin leider weit davon entfernt zu verstehen warum das so ist. Dummerweise ist das float aber nötig weil der IE sonst die Blöcke ineinander schiebt.
Ich habe im moment auch keine Idee wie ich das umgehen könnte. In der InfoZeile soll eben die Brotkrümmel-Navi rechts und der Impressum-Link links erscheinen und ich hatte nur die Idee das per float zu machen.
Du hast da wohl eher ein CSS-Problem als ein TypoScript-Problem? 🙂
Schau mal was ich zu floats im Netz gefunden habe, schau dir insbesondere die Bemerkungen zu den Größenangaben von float-Elementen an. Wie ich schon im ersten Posting bemerkte, die Größenangaben fehlen. Nur das du noch mehr float-Elemente verwendest (warum eigentlich?), konnte ich nicht ahnen.
http://css-technik.de/css-examples/219_9/
Ciao
Frank
panda70 schriebDu hast da wohl eher ein CSS-Problem als ein TypoScript-Problem? 🙂
sieht ganz so aus :o
panda70 schriebSchau mal was ich zu floats im Netz gefunden habe, schau dir insbesondere die Bemerkungen zu den Größenangaben von float-Elementen an. Wie ich schon im ersten Posting bemerkte, die Größenangaben fehlen. Nur das du noch mehr float-Elemente verwendest (warum eigentlich?), konnte ich nicht ahnen.
Danke für den link sieht recht interessant aus.
Ich habe diese Art aus dem Buch "Bulletproof WebDesign".
Die Angaben über die zwingende Breite erscheinen mir aber etwas fragwürdig. Erstens weil bisher in keinem der Fachbücher zum Thema die ich gelesen habe so etwas erwähnt wird und zweitens die Begründung der Browser wisse nicht wie groß das Element sein soll macht es sich doch sehr leicht. Bei nicht gefloateten Elementen weiß der Browser ja auch dass es so groß wie der Inhalt sein muß. Ich sehe da keinen Unterschied und alle Browser auser dem IE 6 und 7 sehen das wie ich. Auserdem wären fixe größe tödlich wenn ein Anwender auf die Idee kommt die Schriftgröße zu ändern oder gibt es größen angaben die je nach Schriftgröße mitwachsen?
Zu Deiner Frage: "warum eigentlich?" ich wüsste nicht wie ich ohne floats ein Element links und das andere rechts ausrichten soll und das automatisch da es sich von selbst an andere Schriftgrößen anpassen muß. gleiches gilt für die Menüzeile die ich ähnlich einem hier im Forum stehenden HowTo gemacht habe.
Es wundert mich auch wenn die größen in den floats fehlen warum der IE dann ein nicht gefloatetes Element <img> mit größenangabe auf Null größe reduziert. Kann ja wohl nicht sein daß der Browseer hier nicht wusste wie groß es sein soll.
Ich habe es auch gerade ausprobiert aber das Problem mit dem Bild gibt es auch wenn ich allen Elementen mit oder ohne float eine Breite gebe.
Alexander
😃 😃 Heureka 😃 😃
Ich habs - gefunden, nicht warum es nicht geht sondern wie es geht.
Das Image ist jetzt in einem span also kein div mehr und ich habe es vom Seitenanfang in ein div Namens Logozeile verlegt. Eine völlig willkürliche Aktion nichts desto trotz erfolgreich. MS Produkte halt was will man da erwarten.
Nochmal danke an alle die sich rege an der Lösungsfindung beteiligt haben.
Vlg
Alexander
alexander_ro schriebIch habs - gefunden, nicht warum es nicht geht sondern wie es geht.
Das Image ist jetzt in einem span also kein div mehr und ich habe es vom Seitenanfang in ein div Namens Logozeile verlegt.
Ähm, ist das dann nicht irgendwie doch in einem div? Ich meine wenn das Teil innerhalb eines div steht ist es jetzt auch als div-Block eingebaut. Klingt für mich wie das was ich dir geschrieben hatte. Das es am span-Tag liegen sollte, halte ich für ein Gerücht.
Ciao
Frank
panda70 schriebÄhm, ist das dann nicht irgendwie doch in einem div? Ich meine wenn das Teil innerhalb eines div steht ist es jetzt auch als div-Block eingebaut. Klingt für mich wie das was ich dir geschrieben hatte. Das es am span-Tag liegen sollte, halte ich für ein Gerücht.
Ich hatte es so:
<body>
<div>
<img...> <!-- Das Problembild am Seitenanfang -->
</div>
...
</body>
und jetzt ist es so:
<body>
...
<div>
<span...>
<img..>
</span...>
<span...>
<img...>
</span>
<span...>
<img...> <!-- Das Problembild nicht mehr am Seitenanfang-->
</span>
</div>
...
</body>
im CSS wird das SPAN und nicht wie vorher das DIV positioniert und die größe des Bildes gegeben. Auserdem steht das im HTML-Code jetzt Mitten in der Seite und nicht mehr am Anfang. Diese Änderungen habe ich alle zusammen durchgeführt und kann deshalb nicht sagen was davon die Ursache ist. Keinem der DIVs oder SPANs wird sonst eine größe vorgegeben. Alle andern Browser sind mit allen Probierten Varianten klargekommen nur der IE nicht. Da hat nur die letzte hier beschriebene funktioniert.
Wenn Kollege Gates die Schäden die seine Minderwertige Software anrichtet bezahlen müßte wäre er Ärmer als alle dritte Weltländer zusammen. Ich wollte Ihn nicht weiter in die Armut treiben deshalb hab ich die experimente eingestellt als es Funktionierte. ;-)
Ich Vermute allerdings es hängt weniger mit dem SPAN zusammen als mit der veränderten Position im HTML-Code. So wie Du es vorgeschlagen hattest nur dem DIV am Seiten Anfang ein größe zu geben hat definitiv nicht funktioniert. Vermutlich also die kombination der größe und dem positionswechsel innerhalb des HTML-Codes. Ich hatte wärend der Suche HTML-Code und CSS beim W3C-Prüfen lassen also ein Tippfehler ist ziemlich ausgeschlossen.
Gruß
Alexander