Hallo alle miteinander
Ich habe von meinem Verein her eine kleine Aufgabe bekommen, ihre Internetseite zu gestallten.
Bis jetzt habe ich mich ein wenig mit HTML und CSS beschäftigt und so ein kleines Template zusammen "programmiert"(mit eclipse).
Doch beim Testen bin ich auf sehr merkwürdige dinge gestossen:
-Im Firefox ist das Layout obtimal
-im Internet Explorer ist alles nach rechts verzogen
-im Dreamwaver sind die Menus nach oben verschoben
Jetzt meine Frage:
Wiso ist das so?
Im code habe ich 2 Tabellen für die Menu's und ein "Textfeld" für die Überschrift.
Ware nett, wenn mir jemand sagen könnte, wie ich das Problem mit den verschiedenen Browsern löse, und zugleich die Menu-Tabellen vom Koordinatenpunkt 0px 0px definieren kann, nicht dass sie von der Überschrift abhängig sind.
Zudem bin ich am verzweifeln, da ich versuche links und rechts von der Überschrift noch zwei Bilder einzufügen, aber dann versellt es mir immer wieder alles, wenn es mal ein Bild anzeigt.
Ich bedanke mich schon im Voraus
MFG
P51D
Hier das HTML-File:
Und hier das CSS File:
Ich habe von meinem Verein her eine kleine Aufgabe bekommen, ihre Internetseite zu gestallten.
Bis jetzt habe ich mich ein wenig mit HTML und CSS beschäftigt und so ein kleines Template zusammen "programmiert"(mit eclipse).
Doch beim Testen bin ich auf sehr merkwürdige dinge gestossen:
-Im Firefox ist das Layout obtimal
-im Internet Explorer ist alles nach rechts verzogen
-im Dreamwaver sind die Menus nach oben verschoben
Jetzt meine Frage:
Wiso ist das so?
Im code habe ich 2 Tabellen für die Menu's und ein "Textfeld" für die Überschrift.
Ware nett, wenn mir jemand sagen könnte, wie ich das Problem mit den verschiedenen Browsern löse, und zugleich die Menu-Tabellen vom Koordinatenpunkt 0px 0px definieren kann, nicht dass sie von der Überschrift abhängig sind.
Zudem bin ich am verzweifeln, da ich versuche links und rechts von der Überschrift noch zwei Bilder einzufügen, aber dann versellt es mir immer wieder alles, wenn es mal ein Bild anzeigt.
Ich bedanke mich schon im Voraus
MFG
P51D
Hier das HTML-File:
Code:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
background-image: url(../Hintergrund_2.jpg);
background-position:0px 0px;
background-attachment:fixed;
}
-->
</style>
</head>
<body>
<div id="kopf">
<h1><center>Musikgesellschaft</center></h1> <!-- Titel der Seite -->
</div>
<!-- Menu-oben -->
<table style="padding: 120px 0px 0px 220px" id="menu2" border="0" cellpadding="0" cellspacing="0">
<!-- Position von Tabelle, CSS-Link, Rahmen, Zellenrahmen, Zellenabstand -->
<tr> <!-- Hohe Zelle einfügen -->
<td> <!-- Feld einfügen = öffnen -->
<center><a href="index.html">Harmonie</a></center> <!-- Link und Linkname -->
</td> <!-- Feld schliessen -->
<td> <!-- Feld einfügen = öffnen -->
<center><a href="index.html">Aktuell</a></center> <!-- Link und Linkname -->
</td> <!-- Feld schliessen -->
<td> <!-- Feld einfügen = öffen -->
<center><a href="index.html">Forum</a></center> <!-- Link und Linkname -->
</td> <!-- Feld schliessen -->
</tr> <!-- Zelle schliessen -->
</table> <!-- Tabelle schliessen -->
<!-- Menu-links -->
<table style="padding: 50px 0px 0px 20px" class="menu1" border="0" cellpadding="0" cellspacing="0">
<!-- Position von Tabelle, CSS-Link, Rahmen, Zellenrahmen, Zellenabstand -->
<tr> <!-- Zelle einfügen -->
<td > <!-- Feld einfügen -->
<center><a href="index.html">Home</a></center> <!-- Link und Linkname, zentriert -->
</td> <!-- Feld schliessen -->
</tr> <!-- Zelle schliessen -->
<tr>
<td >
<center><a href="index.html">Über uns</a></center>
</td>
</tr>
<tr>
<td >
<center><a href="index.html">Fotogalerie</a></center>
</td>
</tr>
<tr>
<td >
<center><a href="index.html">Agenda</a></center>
</td>
</tr>
<tr>
<td >
<center><a href="index.html">Kontakt</a></center>
</td>
</tr>
<tr>
<td >
<center><a href="index.html">Intern</a></center>
</td>
</tr>
</table> <!-- Tabelle schliessen -->
</body>
</html>
Code:
/*Hauptteil-Definition */
body{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding:0px;
background-image: url("C:\Daten\Harmonie\Webseite\css\Hintergrund_2.jpg"); /*Hintergrundbild mit Quelle*/
background-position: 50% 50%; /*Hintergrundbild zentriert*/
background-repeat: no-repeat; /*Lehre Bereiche nicht auffüllen*/
}
/* Schriften-Definition */
h1 { /*Schriftname*/
font-family: Arial, Time New Roman; /*Schriftarten*/
font-size : 60px; /*Schriftgrösse*/
font-weight: bold; /*Schriftgewicht*/
letter-spacing:3px; /*Abstand zwischen den Buchstaben*/
color: #FF0000; /*Schriftfarbe*/
line-height: 1.5; /*Zeilenhöhe*/
margin: 1px 1px 1px 1px; /*Abstände*/
}
h2{
font-family: Arial, Times New Roman;
font-size: 16px;
font-weight: bold;
letter-spacing: 3px;
color: black;
line-height: 1;
margin: 1px 1px 1px 1px;
}
h3{
font-family: Arial, Time New Roman;
font-size: 12px;
font-weight: normal;
letter-spacing: 2px;
color: black;
line-height: 0.9;
marign: 1px 1px 1px 1px;
}
/* Kopfbereich */
#kopf { /*Feld-Name*/
padding: 15px 5px 5px 15px; /*Rahmen bestimmen*/
font-size : 1.8em; /*Schriftgrösse bestimmen/*
height: 130px /*Höhe des Feldes*/
width: 97%; /*Länge des Feldes bestimmen*/
top: 0;
left: 0;
position: absolute; /*Position ist absolut*/
background-color: #AAACCC;
}
/* Menu vertikal */
.menu1 a , .menu1 a:visited , .menu1 a:active{ /*Menu-Definition, besucht, aktiv*/
display: block; /*Anzeigen: Feld*/
background-color: #808080; /*Feldfarbe*/
text-decoration: none; /*Textverzierung*/
text-align: center; /*Textausrichtung*/
width: 200px; /*Felderbreite*/
font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; /*Schriftarten*/
font-size: 16px; /*Schriftgrösse*/
font-weight: bold; /*Schriftgewicht*/
color: #0000CD; /*Schriftfarbe = Blau*/
line-height: 30px; /*Zeilenhöhe*/
margin: 2px; /*Felderabstand nach oben*/
}
.menu1 a:hover{ /*Menu-Definition überfahren mit Maus*/
background-color: #AAAAAA; /*Hintergrundfarbe*/
color: #FFFFFF; /*Schriftfarbe vom Link*/
text-decoration: none; /*Schriftverziehrung*/
}
/* Menu horizontal */
#menu2 a , #menu2 a:visited , #menu2 a:active{
display: block;
background-color: #808080;
text-decoration: none;
text-align: center;
width: 330px;
font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; /*Schriftarten*/
font-size: 16px; /*Schriftgrösse*/
font-weight: bold; /*Schriftgewicht*/
color: #0000CD; /*Schriftfarbe = Blau*/
line-height: 30px; /*Zeilenhöhe*/
margin: 2px; /*Felderabstand nach oben*/
}
#menu2 a:hover{ /*Menu-Definition überfahren mit Maus*/
background-color: #AAAAAA; /*Hintergrundfarbe*/
color: #FFFFFF; /*Schriftfarbe vom Link*/
text-decoration: none; /*Schriftverziehrung*/
}
