Suche
Teilen
startseite » forum

Grafik absolut positionieren

  • alexander_ro alexander...
    Padawan
    0 x
    61 Beiträge
    0 Hilfreiche Beiträge
    16. 02. 2007, 16:26

    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:
    [HTML]

    #Bild
    {
    position: absolute;
    top: 70px;
    left: 600px;
    }

    [/HTML]

    Da der HTML-Schnippsel:
    [HTML]

    <div id="Bild">
    <img src="uploads/tf/bild.jpg" width="187" height="108" alt="" title="Firmenansicht" />
    </div>

    [/HTML]

    Gruß
    Alexander[/HTML]

  • einpraegsam.net einpraegs...
    MacGyver
    0 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    16. 02. 2007, 20:24

    Eventl. liegt das Bild im IE unter einer anderen Ebene!?

    Teste folgendes:
    [HTML]#bild {
    position: absolute;
    top: 0; /* ganz oben */
    left: 0; /* ganz links */
    z-index: 999;
    }
    [/HTML]

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • alexander_ro alexander...
    Padawan
    0 x
    61 Beiträge
    0 Hilfreiche Beiträge
    16. 02. 2007, 20:37

    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

  • panda70 panda70
    Padawan
    0 x
    33 Beiträge
    0 Hilfreiche Beiträge
    17. 02. 2007, 21:14

    [quote="alexander_ro"]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.[/quote]

    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.

    [url]http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en[/url]

    Ciao

    Frank

  • alexander_ro alexander...
    Padawan
    0 x
    61 Beiträge
    0 Hilfreiche Beiträge
    17. 02. 2007, 23:44

    [quote="panda70"]
    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.
    [/quote]

    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

  • panda70 panda70
    Padawan
    0 x
    33 Beiträge
    0 Hilfreiche Beiträge
    18. 02. 2007, 04:25

    [quote="alexander_ro"]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?[/quote]

    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

  • alexander_ro alexander...
    Padawan
    0 x
    61 Beiträge
    0 Hilfreiche Beiträge
    18. 02. 2007, 09:03

    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

  • einpraegsam.net einpraegs...
    MacGyver
    0 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    18. 02. 2007, 12:34

    [quote="alexander_ro"]
    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
    [/quote]

    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.

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • alexander_ro alexander...
    Padawan
    0 x
    61 Beiträge
    0 Hilfreiche Beiträge
    18. 02. 2007, 22:21

    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:
    [HTML]#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;
    }

    [/HTML]

    Ausschnitt der HTML-Datei mit dem Problembild. Das erste IMG und darunter der DIV für die InfoZeile ganz oben in der Seite:
    [HTML]<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>
    [/HTML]

    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

  • panda70 panda70
    Padawan
    0 x
    33 Beiträge
    0 Hilfreiche Beiträge
    19. 02. 2007, 03:52

    [quote="alexander_ro"]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.

    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.[/quote]

    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.

    [url]http://css-technik.de/css-examples/219_9/[/url]

    Ciao

    Frank

Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin