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

Seite wird unterschiedlich dargestellt

Alissa

Neues Mitglied
Hallöchen, ^^

ich wollte für eine Homepage erstellen und habe nicht wirklich viel Ahnung davon und weiß jetzt nicht nicht weiter, weshalb ich nun um Hilfe bitte.

Ich habe mir ein kostenloses Template runtergeladen und die Grafiken dann auf meine wünsche angepasst. Dann habe ich mit phase5.6 die Seite index bearbeitet, wenn ich das dann in der Vorschau angeschaut habe sah es so aus wie ich es mir vorgestellt habe. Als ich das dann hochgeladen habe sah das bei IE auch so aus wie in der Vorschau von phase5.6, doch bei Mozilla wird die Shoutbox ganz woanders angezeigt und auch der Text wird nicht so dargestellt wie er sollte.

Hier ma ein Bild mit IE und Mozilla:

mit_ie.png


mit_mozilla.png



Hier der Link zum Selber anschauen: Tears of Angel

Und dann noch die Codes von der Index Seite und etwas das format.css heißt:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz" >
<title>Tears of Angel</title>
<!-- Der nachfolgende einzeilige Copyright-Vermerk (c) ist nicht zu löschen.-->

<!-- (c)Copyright by S.I.S.Papenburg / www.on-mouseover.de/templates/ -->
<!--Ein Entfernen dieses Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen -->


<!-- Der nachfolgende Hinweis-Vermerk darf gelöscht werden-->

<!-- Hinweis:
Das Anbieten dieser Vorlage auf einer Webseite, CD, DVD oder anderen Bild/Tonträgern ist untersagt.
Nutzen dürfen Sie diese Vorlage aber auf einer Webseite wie folgt:
Die Vorlage kann privat (kostenlos) und kommerziell/gewerblich (gegen Bezahlung) für Sie selbst oder eine dritte Person (andere Person oder Firma) genutzt werden.
Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.
Lesen Sie auf der Webseite www.on-mouseover.de/templates/
bitte die Nutzungsbedingungen nach.
-->

<link rel="stylesheet" href="http://file1.npage.de/003998/66/html/format.css" type="text/css">

</head>
<body     >

<div align="center">

<table align="center" id="main"  cellspacing="0" cellpadding="0" border="0"   >
<tr>
<td align="center"    >

<table align="center" id="main_top"   cellspacing="0" cellpadding="0" border="0" >
<tr>
<td>
<table  align="center"  cellspacing="0" cellpadding="0" border="0"   >
<tr>
<td id="top">
<!-- menü GANZ oben-->
<table align="right"      id="menu"  border="0" cellpadding="0" cellspacing="0"    >
<tr>
<td  ><a href="http://www.rocheck.de"  >Rocheck</a></td><td class="trenn2" >•</td>
<td ><a href="http://rns.gamona.de"  >Ragnarok no Seishi</a></td><td class="trenn2">•</td>
<td ><a href="http://www.euro-ro.de"  >Ragnarok euro</a></td><td class="trenn2">•</td>
<td ><a href="http://last-unicorn-gilde.de/index_gilde.html"  >Last Unicorn</a></td>
</tr>
</table>
<!-- ende menü GANZ oben--></td>
</tr>
<tr>
<td  id="top1" >
<br>
<span id="slogan"></span>
</td>
</tr>
<tr>
<td  id="top2">

<table width="880px;" align="center"   id="menuhorizontal"  border="0" cellpadding="0" cellspacing="0"    >
<tr>
<td width="20%"  ><a href="index.html"  ></a></td>

<td width="20%"><a href="index.html"  >Home</a></td>
<td class="trenn">†</td>
<td width="20%"><a href="index.html"  >Über uns</a></td>
<td  class="trenn">†</td>
<td width="20%"><a href="index.html"  >Forum</a></td>

<td width="20%"><a href="index.html"  ></a></td>

</tr>
</table>


</td>
</tr>
</table >

</td>
</tr>
</table>

<table    align="center"  id="main_inhalt"     border="0" cellpadding="0" cellspacing="0"  >
<tr>
<td  valign="top"    align="center" >
<table  align="center"  id="inhalt"    border="0" cellpadding="0" cellspacing="0">

<div style="float:left; width=200px;"><!-- BEGIN Shoutbox.de CODE -->
<iframe src="http://79801.shoutbox.de/" width="152px;" height="300px;" frameborder="0" allowTransparency="true"></iframe>
<!-- END Shoutbox.de CODE--></div>
<div style="float: right; width=840px;"><p><h2>Hallöchen,^^</h2>

<img style="float:left;;" src="http://file1.npage.de/003998/66/bilder/hp_auf_poring.png" width="75px;" height="100px;" border="0" alt="HP">
<div style="float: left; width=380px;"><font color="#01507E"><font size="-1"><font face="VERDANA,ARIAL,HELVETICA">
<p>...schön dass ihr bei uns, Tears of Angel, vorbei schaut.<br></br>Wir sind eine lvl 9 Ragnarok Online Fun
Gilde die gerade im Aufbau ist. Auf dieser Seite kannst du dich ein wenig über uns infomieren und dich im Forum bei uns bewerben.<br></br>
Also, noch viel Spass auf unserer Page und auf ein baldiges Treffen ingame.^,^</p></font></font></font>
</p></div><div style="clear: both;">&nbsp;</div>


*Bald ein Newssystem*
</p>
</div>

<tr>
<td valign="top"  id="inbox">
</ol></blockquote>
</td>
<br></br>
<!-- ende inhalt-->
</tr>
</table>
</td>
</tr>
</table>
<!-- fuss-->
<table id="main_fuss"   border="0" cellpadding="0" cellspacing="0" >
<tr>
<td id="fuss">

</td>
</tr>

</table>
<!-- ende fuss-->
</td>
</tr>
</table></div>

</body>
</html>
Code:
/* ================ ALLGEMEIN =============== */


body
{margin-top: 0px;  margin-left: 0px; margin-right: 0px;margin-bottom: 0px;
background-color: #efefef; padding:0px;
width:100%;
background-image:url(http://file1.npage.de/003998/66/bilder/back_main.jpg);background-repeat:repeat-y;
background-position:center top;

}
/* hinweis: die schrift für den inhaltsbereich ändern sie weiter unten bei #inbox */


/* scrolleiste internet explorer ab vers.5.5 */
body
{scrollbar-arrow-color: #A8A8A8; scrollbar-base-color: #F2F2F2;
scrollbar-highlight-color : #A8A8A8; scrollbar-shadow-color : #f9f9f9;
SCROLLBAR-TRACK-COLOR: #F9F9F9;}


#main {text-align:center;border:solid 0px #000;margin:0px;width:100%;}




/* ================ KOPFBEREICH ================ */

#main_top{width:100px;width:100%;
background-image:url(http://file1.npage.de/003998/66/bilder/header_0.jpg);background-repeat:no-repeat;
background-position:center top;
}

#top {
height:54px;
text-align:right;
padding-right:20px;
}


#top1 {
height:170px;
vertical-align:middle;
text-align:center;
color:#DEEDE4;
padding-top:20px
}

#top2 {
height:56px;
text-align:center;
vertical-align:middle;
color:#000;
font-size:14px;
}


#hpname {letter-spacing:-1px;font-size:38px;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
color:#3888CF;
}

#hpname i {
color:#EEF4FB;
}

#slogan {letter-spacing:-1px;font-size:16px;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
color:#3888CF;font-style:italic;
}


/* ================ INHALTSBEREICH ================ */


#main_inhalt{
width:100%;
height:1000px;
background-image:url(http://file1.npage.de/003998/66/bilder/back_in.jpg);background-repeat:no-repeat;
background-position:center top;
}

#inhalt{width:1200px; 450px;
height:100%;
}

ul.liste1 {list-style-type:circle;color:#256196;}

#inbox {height:900px;
color:#202020;
padding-top: 50px; padding-bottom: 40px;
padding-left: 60px;padding-right:60px;
letter-spacing:0px;
width:100%;
vertical-align:top;
text-align:justify;
font-size: 16px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
}



/* überschriften */
h2{  font-family: arial, helvetica, tahoma ,verdana, sans-serif;
color:#256196;
margin-bottom:10px;letter-spacing:2px;font-size: 18pt;
border-bottom:dashed 0px #000;
padding-bottom:4px;font-style:italic;
}


/* =============== FUSSBEREICH =============== */

#main_fuss{width:0px;width:100%;
}

#fuss {width:100%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size:12px;
color: #000;
height:146px;
text-align:center;
vertical-align:middle;
letter-spacing:6px;
background-color:#ffffff;
background-image:url(http://file1.npage.de/003998/66/bilder/fuss1.jpg);background-repeat:no-repeat;
background-position:center top;
}

#fuss2 {width:100%;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
font-size:12px;
color: #000;
height:100px;
text-align:center;
vertical-align:middle;
vertical-align:middle;
background-color:#dfebf7;
background-image:url(http://file1.npage.de/003998/66/bilder/fuss2_.jpg);background-repeat:repeat-y;
background-position:center top;
}



/* =============== NAVIGATION =============== */

/* allgemeine links im text */

a:link, a:visited, a:active{ font-size: 16px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana,  sans-serif;color:#000      ;text-decoration:underline;background-color:#;}

a:hover{
color:#256196;text-decoration:none}



/* menue im logo-bereich */

#menuhorizontal a, #menuhorizontal a:visited , #menuhorizontal a:active {display: block;
color:#fff;
font-weight:bold;
text-transform:capitalize;font-variant:small-caps;
text-decoration:none ;font-family:verdana, sans-serif; font-size: 14px;
padding-left: 0px;padding-right: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
border:solid 0px #AAAAAA;
height:34px;
line-height:34px;
text-align:center;
}

#menuhorizontal a:hover {background-color:#; text-decoration:none ;
color:#FFF;
text-decoration:underline ;
border-left:solid 0px #fff;
}
.trenn {width:1px;color:#3888CF}


/* ==== zweites menue ganz oben und unten ==== */



#menu a, #menu a:visited , #menu a:active {display: block;
color:#1D4D78;
text-decoration:none ;
font-family: arial, helvetica, tahoma ,verdana,  sans-serif; font-size: 14px;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
height:34px;
line-height:34px;
text-align:center;
background:transparent;
}

#menu a:hover {color:#256196; text-decoration:underline ;
background:transparent;}
}

Ich möchte das die Seite wie im IE angezeigt wird, wenn mir jemand helfen könnte wäre ich sehr dankbar.

LG Alissa
 
Hallo.

ersteinmal, auch wenn es OT ist: Ragnarok, super! ;) Hab ich auch mal 6 Jahre lang gespielt.

Zu deinem Problem: Dir fehlen Grundlegende Kentnisse in html und css. Du benutzt für deine Homepage Tabellen für Layoutzwecken, was nicht korrekt ist. Eine Tabelle zeichnet tabellarische Daten aus.

Vielleicht solltest du nocheinmal etwas weiter vorne anfangen und dir dein "Design" aufzeichnen (ps, gimp, paint, was auch immer), deinen Content schreiben, ihn korrekt auszeichnen mit html und anschließend alles mit css so wie in deiner Skizze gestalten.

Gruß
Loon3y

EDIT: der Nick kommt mir bekannt vor, warst du mal bei GoW?
 
Nein war ich nicht, das was ma der name meiner Alchi.^^

Das ich nicht wirklich Ahnung habe weiß ich, hatte mich gefreut das es auf dem IE so angezeigt wird wie ich es möchte, doch bei Mozilla halt leider nicht. Muss ich das jetzt alles neu machen? Ich habe nicht wirklich Ahnung davon und habe deshalb auch eine Vorlage die man kostenlos downloaden konnte genommen. Q_Q
 
Nein war ich nicht, das was ma der name meiner Alchi.^^

schad ;) *g* wo warste dann? :o)

Das ich nicht wirklich Ahnung habe weiß ich, hatte mich gefreut das es auf dem IE so angezeigt wird wie ich es möchte, doch bei Mozilla halt leider nicht. Muss ich das jetzt alles neu machen? Ich habe nicht wirklich Ahnung davon und habe deshalb auch eine Vorlage die man kostenlos downloaden konnte genommen. Q_Q


Von Vorlagen ist meist abzuraten.
Das beste wäre wohl,w enn du es nochmal neu machen würdest....Allerdings, wen du die Zeit und nicht die eigeninitiative hast das komplett zu lernen (istn icht böse gemeint), dann kannst du auch mal im Job-Forum fragen, ob dir jemand deine Arbeit abnehmen mag.

Gruß
Loon3y
 
Spiele Ro seid zwei Jahren und das auf Loki bis Odin kam.

Ist da denn alles falsch? Woran könnte es denn liegen das der Text so verschoben dargestellt wird und nicht im blauen drinnen bei Mozilla.

LG Alissa
 
hatte mich gefreut das es auf dem IE so angezeigt wird wie ich es möchte, doch bei Mozilla halt leider nicht.
Das liegt meistens daran, dass der IE einiges nicht so auf dem Kasten hat oder Fehler versucht selbständig zu verbessern. Aber das macht eigentlich keinen Sinn, denn Fehler sind nunmal Fehler, das Verhalten dabei ist nicht definiert, und Fehler müssen behoben werden.

Oft ist es so, dass eine Site im IE gut auszusehen scheint, im Firefox aber nicht. Dann ist es in fast allen Fällen der Code, der fehlerhaft ist. Man sollte immer zuerst in einem aktuellen Browser testen (eigentlich alles außer IE ;-)) und erst dann im IE.

Oft liegt es auch einfach an einem fehlenden oder falschen Doctype, der den IE in den Quirks Mode setzt, wo er dann ein falsches BoxModel zur Darstellung (CSS) benutzt.

Dein Link geht nicht mehr, ich kann also nicht mehr nachsehen.
 
Zurück
Oben