Problem mit HTML und CSS!



  • Hallo,

    ich habe ein Problem.
    Ich möchte auf einer Seite etwas gerne so gestalten, dass sich ein Hintergrundbild (2x1 Pixel) über den gesamten Hintergrund erstreckt und gleichzeitig ein paar Bilder (3) darüber ausgerichtet werden.
    Ich muss diese genau ausrichten können, sodass eines z.B. immer exakt in der Mitte ist.
    Absolute Positionen möchte ich nicht verwenden, weil das alles natürlich auflösungsunabhängig sein soll.

    Möglichst browserunabhängig will ich dies realisieren, aber wenn mir keine Wahl bleibt, gebe ich mich auch mit IE ab.

    Um das zu Realisieren nehme ich HTML und auch gerne CSS in Anspruch...

    Hier ist das so etwa gekennzeichnet, nur ohne Hintergrundbild, wie es sein soll.
    Die Tabelle ist leider auch nicht auf voller Seitengröße 😞

    http://katja-barinsky.de/

    Also hier ist es jetzt so, dassdas Hintergrundbild die anderen asachen verdeckt und das beim IE unten immer so ein dummer Rand ist, ich selber verwende den IE zwar nicht, aber die meisten und so muss ich das auf alle Fälle anpassen.

    Danke im Voraus!

    MfG MAV



  • http://www.netzwelt.com/selfhtml/css/eigenschaften/positionierung.htm#z_index
    Aber warum machst du das mit einer Grafik und nicht einfach über die Hintergrundfarbe 😕



  • Naja, weil die beiden Pixel der Grafik eben unterschiedlich sind, der linke ist orange der rechte blau...
    Bei der Hintergrundfarbe kann man nur eine festlegen...
    Das wär sonst ja auch zu einfach 😑



  • Leider ist es nicht so einfach, weil z-index nur bei absoluter Positionierung funktioniert, ich will die Dinger aber schön zentrieren und das fällt bei absoluter Positionierung weg. 😞

    Ich möchte alles gestalten, wie ich will, ganz normales HTML, aber gleichzeitig soll da ein Hintergrundbild sein, dass den ganzen Hintergrund abdeckt.
    Dieses Bild muss allerdings so platziert sein, dass die Mitte des bildes bei jeder Auflösung = Mitte des Bildschirms ist, da bietet sich Strecken natürlich an.

    Ich bin ratlos 😞

    Mfg mAV



  • <body style="width:100%; height:100%;">
     <div style="position: absolute; z-index: 0; left:0px; top:0px; width:50%; height:100%; background-color:#FF9933;"></div>
     <div style="position: absolute; z-index: 0; left:50%; top:0px; width:50%; height:100%; background-color:#0099CC;"></div>
     <div style="position: absolute; z-index: 1; left:0px; top:0px; width:100%; height:100%;">
      <table height="100%" width="100%">...</table>
     </div>
    </body>
    


  • height="100%" von IE ignoriert bei Tabellen...

    Und was soll width= und height= bei body bringen???

    Auf alle Fälle hast du bei dir ja auch keine Bilder...
    Es funktioniert zwar jetzt, aber nicht mit IE, weil er CSS nicht standardmäßig unterstützt, mit NS, MZ etc. funktioniert es, aber nicht mie IE.
    Ich habe jetzt eine Warnung angebracht, dass man IE nicht verweden sollte.

    MfG mAV



  • Zu den Angaben für den Bodytag: http://c-plusplus.net/forum/viewtopic.php?t=48118
    Bei mir im IE6 wird auch alles korrekt angezeigt 🙂 (also, wenn ich es so mache wie geschrieben - dein Code ist aber nicht ganz korrekt [z.B. fehlender <body>-Tag 👎 ])



  • Warum hackst Du eigentlich auf dem IE rum ?

    Ich habe schon Unmengen an Internetseiten erstellt und hatte mit dem IE noch nie Probleme.
    Ich kenne das nur umgekehrt, allerdings habe ich aber auch nur Netscape 4.5 !
    Diese Version von Netscape rafft allerdings garnichts !

    Gruss Daniel666



  • Ich habe schon Unmengen an Internetseiten erstellt und hatte mit dem IE noch nie Probleme.

    Schön für dich, der IE lässt Sachen durch, die nicht erlaubt sind, und diverse CSS Möglichkeiten unterstützt er nicht, die ganzen Foren sind aber sinnigerweise auf IE abgestimmt, das JS funktioniert z.B. mit Mozilla auch nicht richtig.

    @flenders:
    Body-Tag fehlt?
    Ja, ist behoben.

    Also ich habe mich größtenteils informiert und viel ausprobiert, es kann sich nur um einen Fehler von IE handeln.
    Das Hintergrundbild soll volle Höhe haben, und das wird auch laut HTML und CSS Standard, so wie ich es mache, unterstützt!
    Ich habe sogar für den dummen IE noch width="100%" height="100%" dazugeschrieben und der blökt trotzdem dumm herum.
    Er ignoriert bottom wenn ich in CSS top und bottom angebe,. so verrutscht das Hintergrundbild immer genau so, dass es ganz oben oder ganz unten ist, aber nicht schön ausgerichtet.

    Und das ist ein IE Fehler, also ich mach den schon runter, mich regt das auf.

    MfG MAV



  • Üff

    Äh vergesst es, width und height von body mussten echt nach 100%!

    Sauber, daran lag's, danke flenders.

    PS: Halte trotzdem nicht viel von IE, weil WebSeiten wie diese Foren so darauf abgestimmt sind, dass sie nur für IE klappen und sowas nur passieren kann, weil IE Sachen zulässt, die kein Standard sind und umgekehrt.

    Bin nämlich Standard-Fan seit Neuem. 🙂

    MfG MAV



  • Äh und eigentlich müsste es mit left:0px;right:0px;bottom:0px;top:0px; auch funktionieren, aber er ignoriert es, wenn alle Werte da stehen. 😞

    OK, also genu dazu, danke jedenfalls.

    MfG mAV



  • Jo, bottom und top Angaben in Kombination versteht der IE bisher leider noch nicht 😞 Ist dir sonst dann jetzt alles klar? 🙂



  • Hallo,

    Mis2com schrieb:

    height="100%" von IE ignoriert bei Tabellen...

    Es gibt auch kein Attribut 'height' bei Tabellen.

    Mis2com schrieb:

    Und was soll width= und height= bei body bringen???

    Wollen wir mal die Specification des W3C zitieren:

    'height'
    Value: <length> | <percentage> | auto | inherit

    [...]

    <percentage>
    Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'.

    [...]

    http://www.w3.org/TR/CSS2/visudet.html#the-height-property

    Das bedeutet also folgendes:
    Die Ausdehnung eines Elementes wird bei prozentuellen Angaben immer aufgrund der Breite/Hoehe des Elternelementes errechnet und da das Elternelement, sprich der Tag 'body', keine Ausdehnung hat, hat auch das Kindelement keine.

    Mis2com schrieb:

    Ich habe jetzt eine Warnung angebracht, dass man IE nicht verweden sollte.

    Zwar verstaendlich aber trotzdem nicht wirklich angebracht.

    Daniel666 schrieb:

    Warum hackst Du eigentlich auf dem IE rum ?

    Weil er mit Abstand der schlechteste Browser ist, den es gibt?

    Daniel666 schrieb:

    Diese Version von Netscape rafft allerdings garnichts !

    Installier dir mal einen Browser mit einer modernen Engine, informier dich und wir reden weiter.

    http://firebird.stw.uni-duisburg.de/downloads/0.7/MozillaFirebird-0.7-win32-deDE.zip
    http://firebird.bric.de/

    http://ftp.mozilla.org/pub/mozilla/l10n/lang/moz1.5/mozilla-win32-1.5-deAT.zip
    http://www.mozilla.org/

    MfG
    morpheus



  • Okay, in Sachen mit width und height irrte ich mich... 🙂

    Naja, ich für meinen Teil verwende Mozilla FB 🙂

    MfG MAV


Log in to reply