Hintergrundbilder ie/mozilla

max345

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?

Dominikgt

benutz divs:

Code

<div style="background-image:url(http://www.blabla.de/img.jpg);position:absolute;top:100px;left:100px;height:100%;width:100%;">

max345

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.

sudeki05

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

Dominikgt

pack dann noch margin-top:0px; rein

max345

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

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.

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?

DeadEye

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 ...

Tags