• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Enterpage mit CSS machen.

W

Werso

Neues Mitglied
Hallo Leute,
ich habe eine Enterpage in HTML + Javascript.
Richtig(Firefox):Richtig.png
Falsch(Internet Explorer):Fehler2.png <<-- Seit dem ich den Code
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
eingefügt habe ist das Problem aus bei Firefox

Nochmal Falsch(Auf einem 29" Bildschrim oder so):Fehler.png

Wenn man Über Operation 7 und San Andreas geht verändert sich die Text farbe(Neues Bild)

Kann man das in CSS umsetzten?... also so das es wie bei Richtig.png aussieht?

Würde mich über antworten freuen :)
Richtig.png
 
Zuletzt bearbeitet:
Werso schrieb:
ich habe eine Enterpage in HTML + Javascript.
Zum Vergrößern anklicken....
Warum zeigst du uns dann Bilder? ;)

Mir scheint es so, als wären bei Fehler2.png die padding- und margin-Werte nicht auf 0 gesetzt, sondern beim Browserstandard belassen. Aber wie gesagt, ohne einen Link zur Seite oder den Quelltext können wir das Problem nur erraten.
 
Link zur Seite : Ice Cold Players
Enterpage:
HTML: 
<html>
<head><title>Ice Cold Players</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<script language="JavaScript">
<!--
button1_a= new Image();
button1_a.src = "Bilder/op7.png"
button1_b= new Image();
button1_b.src = "Bilder/op7-2.png"
button2_a= new Image();
button2_a.src = "Bilder/mtasa.png"
button2_b= new Image();
button2_b.src = "Bilder/mtasa2.png"
//-->
</script>
</head>
<body bgcolor="black">
<center>
<img src="Bilder/oben.png" width="800">

<a href="Operation7/baustellenschild.jpg"
    onmouseover="austausch1.src='Bilder/op7-2.png';"
    onmouseout="austausch1.src='Bilder/op7.png';">
    <img src="Bilder/op7.png"
    border="0" width="800" name="austausch1"></a>
</a>

<img src="Bilder/mitte.png" width="800">

<a href="MultiTheftAuto/"
    onmouseover="austausch2.src='Bilder/mtasa2.png';"
    onmouseout="austausch2.src='Bilder/mtasa.png';">
    <img src="Bilder/mtasa.png"
    border="0" width="800" name="austausch2"></a>
</a>

<img src="Bilder/unten.png" width="800">
</center>
</body>
</html>
 
Dem Dokument fehlt der DocType.
Ohne DTD weiß der Browser nicht, wie es mit der Datei umzugehen hat. Füge diesen Code ganz am Anfang der Datei ein:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
Ergänze im CSS:

Code: 
img { display: block; }

Und mein Tipp:
- Schreibe nicht diesen Oldstyle-HTML-Code. <center> ist dort völlig falsch angebracht.
- ergänze im CSS noch

Code: 
* { margin: 0;padding: 0; }

wodurch alle Außen- und Innenabstände der Browser auf 0 gesetzt werden. Vereinfacht das Handling von Elementen ungemein.
 
Weil man CSS für jegliche Gestaltung verwendet, gehe ich davon aus, dass Du eine solche Datei natürlich noch anlegen wirst.
 
Ich habe eine Andere Idee....

Werde es mal mit Buttons in Javascript versuchen.... :)

Würde mich aber trotzdem noch mit CSS befassen :)
 
Mach doch einen Wrapper um deine Bilder + ein bisschen css weils schöner ist ;)

HTML: 
<!DOCTYPE html>
<html>
<head><title>Ice Cold Players</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<script language="JavaScript">
<!--
button1_a= new Image();
button1_a.src = "Bilder/op7.png"
button1_b= new Image();
button1_b.src = "Bilder/op7-2.png"
button2_a= new Image();
button2_a.src = "Bilder/mtasa.png"
button2_b= new Image();
button2_b.src = "Bilder/mtasa2.png"
//-->
</script>
<link rel="stylesheet" media="all" type="text/css" href="style.css"> 
</head>
<body>

<div id="wrapper">
<img src="Bilder/oben.png"  class="bilder">

<a href="Operation7/baustellenschild.jpg"
    onmouseover="austausch1.src='Bilder/op7-2.png';"
    onmouseout="austausch1.src='Bilder/op7.png';">
    <img src="Bilder/op7.png"
   class="bilder" name="austausch1"></a>
</a>

<img src="Bilder/mitte.png" class="bilder">

<a href="MultiTheftAuto/"
    onmouseover="austausch2.src='Bilder/mtasa2.png';"
    onmouseout="austausch2.src='Bilder/mtasa.png';">
    <img src="Bilder/mtasa.png"
    class="bilder" name="austausch2"></a>
</a>

<img src="Bilder/unten.png" class="bilder">
</div>
</body>
</html>


und im CSS

HTML: 
body {
background-color:#000;
}

.bilder {
width: 900px;
border: none;
height:auto;
}

#wrapper {
width: 900px;
height: auto;
margin: auto;
}

nicht getestet aber dürfte so funktionieren.
 
Zuletzt bearbeitet:
JUHUHUHU :)

Problem gelöst.

Ich habe die html + CSS datei von Philastan genommen und noch das von vitus37hinzugefügt.

Jetzt ist alles SUPER :)

Ich poste nochmal beide Sachen :

index.html
HTML: 
<!DOCTYPE html>
<html>
<head><title>Ice Cold Players</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<script language="JavaScript">
<!--
button1_a= new Image();
button1_a.src = "Bilder/op7.png"
button1_b= new Image();
button1_b.src = "Bilder/op7-2.png"
button2_a= new Image();
button2_a.src = "Bilder/mtasa.png"
button2_b= new Image();
button2_b.src = "Bilder/mtasa2.png"
//-->
</script>
<link rel="stylesheet" media="all" type="text/css" href="style.css"> 
</head>
<body>

<div id="wrapper">
<img src="Bilder/oben.png"  class="bilder">

<a href="Operation7/baustellenschild.jpg"
    onmouseover="austausch1.src='Bilder/op7-2.png';"
    onmouseout="austausch1.src='Bilder/op7.png';">
    <img src="Bilder/op7.png"
   class="bilder" name="austausch1"></a>
</a>

<img src="Bilder/mitte.png" class="bilder">

<a href="MultiTheftAuto/"
    onmouseover="austausch2.src='Bilder/mtasa2.png';"
    onmouseout="austausch2.src='Bilder/mtasa.png';">
    <img src="Bilder/mtasa.png"
    class="bilder" name="austausch2"></a>
</a>

<img src="Bilder/unten.png" class="bilder">
</div>
</body>
</html>
style.css
HTML: 
body {
background-color:#000;
}

.bilder {
width: 800px;
border: none;
height:auto;
display: block;
}

#wrapper {
width: 800px;
height: auto;
margin: auto;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben