Hallo zusammen
Ich habe für einen Verein eine Webseite erstellt und auch ins Internet gestellt. Beim Ausprobieren mit verschiedenen Browsern habe ich festgestellt, dass es bei der Anzeige grosse Unterschiede gibt. Internet Explorer zeigt die Seite so an, wie ich das will. Bei Firefox und Opera gibt es mehrere Probleme; die Schrift ist zu klein, der Rahmen, den ich um das ganze gelegt habe, wird nicht angezeigt und ein Bilderbanner wird verschoben angezeigt. Weiss jemand, woran das liegen könnte?
Dies ist der Link zur Seite: http://www.jugenderholungsheim.at
Das ist der HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Jungvolk Vorarlberg-Herzlich willkommen!</title>
<link rel="stylesheet" type="text/css"
media="screen" href="design.css" />
<style type="text/css">
</style>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="kopfbereich">
<img class="bild" src="adler.jpg" border="0px" height="147px" width="147px" alt="website design" />
<p>Jungvolk Vorarlberg</p>
</div>
<div id="inhaltsbanner">
<img src="inhaltsbanner1.jpg" alt="Jungvolk Website Design"
width="822px"/>
</div>
<div id="steuerung">
<a href="index.htm">Home</a>|
<a href="ueber-uns.htm">Über uns</a> |
<a href="jv.htm">Was ist das JV?</a> |
<a href="programm.htm">Programm</a> |
<a href="kontakt.htm">Kontakt</a> |
<a href="berichte-und-fotos.htm">Berichte + Fotos</a> |
<a href="links.htm">Links</a>
</div>
<div id="inhalt">
<h1>Was ist das Jungvolk?</h1>
<div class="untertitel"> Geschichte:</div>
<div class="grundtext"> <p>Das Jungvolk wurde 1974 von Grete und Beat Schindler gegründet.</p></div>
</br>
<div class="untertitel"> Wieso Jungvolk?</div>
<div class="grundtext"> <p>Das Jungvolk bietet Kindern und Jugendlichen in den Ferien und an Wochenenden spannende Abwechslung in der Natur. Das Jungvolk unterstützt eine positive Persönlichkeitsentwicklung; es werden Freundschaften fürs Leben geschlossen, die Natur neu und anders erlebt und viele neue Erfahrungen gesammelt.</p></div>
</br>
<div class="untertitel"> Für wen?</div>
<div class="grundtext"> <p>Für alle motivierten Jugendlichen von 10 bis zum vollendeten 16.Lebensjahr, die Spass haben wollen abseits von Computer und Fernseher und neue Bekanntschaften fürs Leben schliessen wollen.</p></div>
</br>
<div class="untertitel"> Winterlager:</div>
<div class="grundtext"> <p>In den Semesterferien veranstalten wir unser alljährliches Winterlager. Neben Schifahren und Snowboarden stehen stehen auch viele weitere tolle Dinge auf dem Plan wie zum Beispiel Winter- und Schigeländespiel.
Zur Abendgestaltung gehören lustige Spieleabende und verschiedene Wettbewerbe wie "Wer wird Schokoladär". Aber zu den absoluten Highlights gehören auf jeden Fall die Lagerdisco und die Miss - und Mister-Bürserberg Wahl. </p></div>
</br>
<div class="untertitel"> Sommerlager:</div>
<div class="grundtext"><p>Unser Sommerlager findet zu Beginn der Sommersemesterferien statt und dauer 2 Wochen. Gleich zu Beginn gehen wir den Lageraufbau an, das Wichtigste ist hier sicherlich der Lagerturm und der Zeltaufbau, in welchen wir die ganzen zwei Wochen übernachten.
Mit dem Lagerturm können wir unsere Lagerfahne gegen "Fahnenklauer" verteidigen. Am meisten Spaß haben alle sicher am Nachmittag bei den Geländespielen. Hier gibt es das Hexengelände, Tag-Nacht, Schatzsuche, Zauberwald, Indianer Jones und die Olympischen Lagerspiele.
Auch an den Abenden haben wir es sehr lustig, je nach Wetter befinden wir uns am Zeltplatz beim Lagerfeuer oder im Heim, wo wir lustige Spieleabende haben. Ein Highlight des Lagers ist sicherlich die Lagerdisco. Je nach Begeisterung der Lagerteilnehmer, geht die Lagerdisco auch mal etwas länger.
Den krönenden Abschluss unseres Sommerlagers bildet die Abschlussfeier. Hier werden je nach vollbrachten Leistungen, Leistungsabzeichen verteilt. Mit schönen Erinnerungen und der ein oder anderen Medaille muss man dann nach den zwei Wochen leider wieder nach Hause. ABER, man kann ja beim nächsten Lager schon wieder dabei sein!</p></div>
</br>
<div class="untertitel"> Waldläuferlager:</div>
<div class="grundtext"> <p>Das Waldläuferlager findet am letzten Sommerferienwochenende im September unter freiem Himmel an der Bregenzer Ache statt. Auf dem Programm stehen Biwakieren, Grillen auf dem offenen Feuer, Orientierungsläufe, Ironman/ Ironwoman, Überlebenstraining und vieles mehr.</p></div>
</div>
<hr />
<div class="copyright">Copyright 2010, Jungvolk Vorarlberg</div>
</body>
</html>
Alles anzeigen
und das ist design.css:
html, body,
{
font: 100% Arial, Helvetica, sans-serif;
border-style:solid;
border-left-width:100px;
border-left-color: #808080;
border-right-width:75px;
border-right-color: #808080;
border-top-width:5px;
border-top-color: #808080;
border-bottom-width:5px;
border-bottom-color: #808080;
}
* {
margin:0;
padding:0;
}
#kopfbereich
{
background:url(banner2.jpg) repeat-x left top;
height:80px; width:970px;
border-top-style: solid;
border-top-width:1px;
border-right-style: solid;
border-right-width: 2px;
border-bottom-style: solid;
border-bottom-width:3px;
}
#kopfbereich p
{
color:white;
font-size:2em;
padding: 15px 0em 0em 150px;
font-size:28pt;
font-weight:bold;
}
#kopftext p
{
color:black;
font-size:2em;
padding: 0px 0em 0em 150px;
font-size:28pt;
font-weight:bold;
}
#inhaltsbanner p
{
text-indent:150px;
}
#inhaltsbanner
{
text-indent:150px;
}
#steuerung
{
background-color:white;
font-size:14pt;
font-weight:normal;
line-height:1em;
text-align:left;
text-indent:150px;
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
margin-right:15px;
}
#inhalt p
{
background-color: #FFFFFF;
font-size:12pt;
font-weight:normal;
margin: 0em 2em 0em 150px
}
#inhalt h1, h2, h3, p, ul
{
padding-bottom:.3em;
}
#inhalt ul
{
padding-left:2em;
}
#inhalt dd
{
text-indent:0px;
}
#inhalt dt
{
text-indent:100px;
}
h1
{
text-indent:150px;
font-size:16pt;
font-weight:bold;
padding-top:0.9em;
color:#000080;
}
h2
{
text-indent:150px;
}
.bild
{
float:left;
}
.untertitel
{
text-indent:20px;
float:left;
color:#000080;
font-size:10pt;
font-weight:bold;
}
.grundtext
{
color:black;
font-size:12pt;
}
.klein
{
font-size:10pt;
color:purple
}
table
{
margin-left:130px;
border:2px;
}
.copyright
{
text-indent:150px;
font-size:8pt;
color: #808080;
}
Alles anzeigen
Schöne Feiertage und Danke schonmal!
