Ergebnis 1 bis 8 von 8

Thema: Hintergrundbilder ie/mozilla

  1. #1
    HTML Newbie
    Registriert seit
    27.04.2007
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Hintergrundbilder ie/mozilla

    Hi,
    also wie ihr sicher ahnt habe ich ein Problemchen...

    Eigentlich wollte ich verschiedene Bilder hinter den Text legen, jedoch habe ich es nicht geschafft den Texten einen z-Index zu geben bzw ein Bild zwischen Hintergrundbild und Text zu schieben.
    Dann habe ich meine Bilder einfach als Hintergrundbilder nacheiner angegeben und es klappte ganz gut bis ich mir das ganze im ie anschaute (6.0)

    Im ie wurde keines der Bilder angezeigt.

    <span style="background-image:url(./img/RandOben.jpg);background-repeat:repeat-x; width:100%; height: 100%; position: fixed; left: 0px; top: 0px; "></span>
    <span style="background-image:url(./img/RandLinks.jpg); background-repeat:repeat-y; width:100%; height: 100%; position: fixed; left: 0px; top: 0px; "></span>
    <span style="background-image:url(./img/ObenLinks.jpg); background-repeat: no-repeat; width:100%; height: 100%; position: fixed; left: 0px; top: 0px; "></span>
    <span style="background-image:url(./img/Schleifchen.png); background-repeat: no-repeat; width:100%; height: 100%; position: fixed; left: 0px; top: 0px; "></span>
    etc.

    Ich habe versucht das span durch jeweils eine neue Tabelle zu ersetzen - die Positionierung wird im ie Murks.

    Der Rest der Seite ist als 2x2 Tabelle mit ein paar Links in der unteren linken Zelle.
    Wenn ich in dieser Tabelle neben den 3 Hintergrundbildern noch weitere Bilder einfüge sind die Links nicht mehr anklickbar oder die Bilder reichen nicht über eine Zelle hinaus in die andere oder sie werden garnicht angezeigt.


    Achja die weiteren Bilder haben recht viele transparente Flächen (png)

    Habt ihr eine Idee?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    18.01.2007
    Ort
    Hamburg
    Alter
    26
    Beiträge
    710
    Danke
    2
    Bekam 2 mal "Danke" in 2 Postings

    Standard

    benutz divs:
    Code:
    <div style="background-image&#58;url&#40;http&#58;//www.blabla.de/img.jpg&#41;;position&#58;absolute;top&#58;100px;left&#58;100px;height&#58;100%;width&#58;100%;">

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    27.04.2007
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das sieht kaum besser aus.
    Immerhin ist nun am oberen rand ein 25px *?* breiter Streifen mit den Bildern, jedoch ist der Rest abgeschnitten. Auch die Transparenz wurde durch weiss ersetzt.
    Das erste Bild sollte doppelt so hoch sein, aber immerhin klappt das 'repeat'.
    Das zweite ist nicht zu sehen (liegt unterm 3ten+4ten)
    Das dritte wird nicht wiederholt und ist auch bei etwa 25px (von 50) abgeschnitten.
    Das vierte überdeckt die anderen mit weiss und ist auch abgehackt.


    Es klappt nichtmal, wenn ich den ganzen Rest vom Body auskommentiere.
    Im Morzilla ist alles gut.

  4. #4
    König(in) Avatar von sudeki05
    Registriert seit
    04.05.2006
    Ort
    Hamburg
    Alter
    28
    Beiträge
    1.435
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Leider weiß ich nun nicht genau was du meinst, aber das <div> hast ja auch wieder geschlossen, ne? </div> will nur sicher gehen

    Problems with Windows? - Reboot
    Problems with UNIX? - Be Root

  5. #5
    Großmeister(in)
    Registriert seit
    18.01.2007
    Ort
    Hamburg
    Alter
    26
    Beiträge
    710
    Danke
    2
    Bekam 2 mal "Danke" in 2 Postings

    Standard

    pack dann noch margin-top:0px; rein

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    27.04.2007
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Tjo, ich habe mal 2 Screenies gemacht.
    Ich hoffe mal das mit dem Links hier im Forum ist ok so

    http://img219.imageshack.us/my.php?image=bild1ql7.jpg
    http://img228.imageshack.us/my.php?image=bild2wp6.jpg

    Ich habe grade keinen Webspace zur Hand sonst würde ich einfach mal die Datei einfügen.
    Hier nochmal der ganze Code (die Tabelle ist bei den Bildern auskommentiert):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/transitional.dtd">
    <html>
    <head>
    <title>Titel </title>
    <style type="text/css">
    <!--
    a:link { COLOR: #820030; FONT-FAMILY: arial; TEXT-DECORATION: none; FONT-WEIGHT: bold; FONT-SIZE: 10pt; }
    a:visited { COLOR: #820030; FONT-FAMILY: arial; TEXT-DECORATION: none; FONT-WEIGHT: bold; FONT-SIZE: 10pt; }
    a:active { COLOR: #820030; FONT-FAMILY: arial; TEXT-DECORATION: none; FONT-WEIGHT: bold; FONT-SIZE: 10pt; }
    a:hover { COLOR: #820030; FONT-FAMILY: arial; TEXT-DECORATION: underline overline; FONT-SIZE: 10pt; }
    table { COLOR: #000000; FONT-FAMILY: arial; TEXT-DECORATION: none; FONT-SIZE: 10pt; }

    body {
    background-color: #ffffe0;

    margin: 0px;
    padding: 0px;

    scrollbar-base-color: #ffffe0;
    scrollbar-3dlight-color: #ffffe0;
    scrollbar-arrow-color: white;
    scrollbar-darkshadow-color: #ffffe0;
    scrollbar-face-color: #ffffe0;
    scrollbar-highlight-color: white;
    scrollbar-shadow-color: white;
    scrollbar-track-color: #ffffe0;
    }
    -->
    </style>
    </head>
    <body>
    <div style="background-image:url(./img/RandOben2.jpg); background-repeat:repeat-x; width:100%; height: 100%; position: absolute; left: 0px; top: 0px; "></div>
    <div style="background-image:url(./img/RandLinks2.jpg); background-repeat:repeat-y; width:100%; height: 100%; position: fixed; left: 0px; top: 0px; "></div>
    <div style="background-image:url(./img/ObenLinks2.jpg); background-repeat: no-repeat; width:100%; height: 100%; position: absolute; left: 0px; top: 0px; "></div>
    <div style="background-image:url(./img/Schleifchen.png); background-repeat: no-repeat; width:100%; height: 100%; position: absolute; left: 0px; top: 0px; "></div>

    <Table border="0" style="table-layout:fixed;position: fixed; left: 0px; top: 0px;width:100%;border-collapse:collapse">
    <tr style="height:100px">
    <td style="width:200px"></td>
    <td><p style="text-align:center;vertical-align:center;font-family:Comic Sans MS;font-size:18px">Titel
    zweite Zeile </p></td>
    </tr>
    <tr>
    <td align="center" valign="center">
    <p style="line-height:200%">
    viele

    verschiedene

    Links

    innerhalb der Seite

    auchmaletwaslängeralssonst

    ...

    ....

    Wir über uns

    Kontakt

    Impressum
    </p>
    </td>
    <td align="left" valign="top">


    Willkommen!

    Schön Dich hier zu sehen!

    Was möchtest Du denn in diesem Bereich?
    </p></td>
    </tr>

    </Table>
    </body>
    </html>


    PS: Leider werden die Tabstops nicht angezeigt. Ich hoffe es ist nicht zu unübersichtlich so.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    27.04.2007
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Also ich bin da nun schon ein gaanz kleines Stückchen weiter.
    Die 'div-elemente' sehen im ie so bescheiden aus, weil sie genau eine Zeile hoch sind. Wenn ich nun also ein wenig Text/Zeilenumbrüche dort mit rein quetsche, um die Höhe zu ändern, wird mehr von der Grafik angezeigt. Das wäre zwar sehr gefuscht, aber für den Anfang schon nicht schlecht.
    Probleme würde noch immer der linke Rand machen, da man beim Scrollen ganz schnell ans Ende es Divelementes kommt und die Grafik nur innerhalb bis zu dessen Ende wiederholt wird.

    Wie sieht denn nun eine saubere Lösung aus, um 'die Höhe des Divs' ohne css festzulegen?

    Achja beim der Transparenz bin ich auch ein kleines bischen weiter. Als Gif wird sie angezeigt. Es bleibt jedoch ein weisser Rand um die grüne Schlange und sie wirkt etwas krümelig. Das werde ich früher oder später aber sicher noch mit einem anderen Grafikprogramm hinbekommen (ich nutze zur Zeit Gimp). Kennt jemand eine 'günstige' alternative?

  8. #8
    Interessierte/r
    Registriert seit
    20.02.2005
    Beiträge
    120
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von max345
    Also ich bin da nun schon ein gaanz kleines Stückchen weiter.
    Die 'div-elemente' sehen im ie so bescheiden aus, weil sie genau eine Zeile hoch sind. Wenn ich nun also ein wenig Text/Zeilenumbrüche dort mit rein quetsche, um die Höhe zu ändern, wird mehr von der Grafik angezeigt. Das wäre zwar sehr gefuscht, aber für den Anfang schon nicht schlecht.
    Probleme würde noch immer der linke Rand machen, da man beim Scrollen ganz schnell ans Ende es Divelementes kommt und die Grafik nur innerhalb bis zu dessen Ende wiederholt wird.

    Wie sieht denn nun eine saubere Lösung aus, um 'die Höhe des Divs' ohne css festzulegen?

    Achja beim der Transparenz bin ich auch ein kleines bischen weiter. Als Gif wird sie angezeigt. Es bleibt jedoch ein weisser Rand um die grüne Schlange und sie wirkt etwas krümelig. Das werde ich früher oder später aber sicher noch mit einem anderen Grafikprogramm hinbekommen (ich nutze zur Zeit Gimp). Kennt jemand eine 'günstige' alternative?
    eine feste Höhe ohne css ... theoretisch wäre eine Gif-Grafik möglich, die einfach nur transparent ist und dann entsprechend gestreckt als Platzhalter dient. Aber warum diese Abneigung gegen css?

    Was die Transparenz bei *png-Grafiken angeht: Der Internet Explorer hat (mindestens bis Version 6) ein Problem damit ... bei mir werden die transparenten Flächen z.B. grau angezeigt ...
    Der weisse Rand um die grüne Schlange liesse sich sicherlich durch die passende Hintergrundfarbe im Grafikprogramm entfernen (also schon die Farbe wählen, die auch der Hintergrund der Seite haben soll), das "krümelige" ... naja, die 256 Farben für gifs tun ihr übriges, Dithering hilft auch nur bedingt und treibt die Größe der Datei nach oben, ist aber sicherlich bekannt ^^

    zum Grafikprogramm kann ich leider nichts sagen, günstig und umfangreich ... ka ...
    SELFHTML - Die Energie des Verstehens
    HTML-Validator
    CSS-Validator
    Links zu CSS-Lösungen für allerlei Probleme

Ähnliche Themen

  1. Hintergrundbilder
    Von Mangan als Gast im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 01.05.2007, 16:05
  2. Hintergrundbilder
    Von DarkSyranus im Forum Off Topic und Quasselbox
    Antworten: 13
    Letzter Beitrag: 08.12.2006, 23:30
  3. Hintergrundbilder
    Von AWSDcoPhill im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 03.04.2006, 09:14
  4. Mozilla IE problem (im mozilla hp gerastert im ie nicht)
    Von force im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 16.10.2005, 01:58

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •