Hallo, hab n Problem, ich mach zum ersten mal ne Homepage (Ausbildung als Mediengestalter) und ja, es klappt so einigermaßen,aber ohne euch wär ich schon das ein oder andere mal verloren gewesen... Nun aber, ich glaub ich hab ganz viele Fehler in meinen Codes, die das Problem verursachen, nämlich die unterschiedliche Darstellung in den Browsern (und in der Vorschau von Dreamweaver wirds auch nochmal anderst dargestellt)...
Hier habt ihr 2 Bilder der verschiedenen Darstellungen:
Firefox:
http://img683.imageshack.us/img683/6856/firefoxjpg.jpg
Inet Explorer:
http://img265.imageshack.us/img265/2688/inetexplorer.jpg
Und hier ist mein Quellcode und die externe CSS datei:
<!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">
<html>
<head> <title> Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Pictures/Header.jpg" alt="header" name="header" width="700" height="135" id="header" border="0">
</a>
</header>
<button1>
<img src="Pictures/Buttons/Unternehmen.jpg" alt="Unternehmen" name="button1" width="135" height="50" id="button1">
</button1>
<button2>
<img src="Pictures/Buttons/Sortiment.jpg" alt="Sortiment" name="button2" width="135" height="50" id="button2">
</button2>
<button3>
<img src="Pictures/Buttons/Aktuell.jpg" alt="Aktuell" name="button3" width="135" height="50" id="button3">
</button3>
<button4>
<img src="Pictures/Buttons/Kundenservice.jpg" alt="Kundenservice" name="button4" width="135" height="50" id="button4">
</button4>
<button5>
<img src="Pictures/Buttons/Kontakt.jpg" alt="Aktuell" name="button5" width="135" height="50" id="button5">
</button5>
<stimmungsbild>
<img name="stimmungsbild" src="Pictures/stimmungsbild.jpg" width="700" height="466" alt="stimmungsbild" id="stimmungsbild" ></stimmungsbild>
<span id="content">
<content>
<br>
<headline id="headline">Wir schreiben Geschichte.</headline>
<br>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte
</content>
</span>
<span id="mikronavi">
<mikronavi>
Impressum
</mikronavi>
</span>
</body>
</html>
CSS-Datei:
body{
background-image:url(Pictures/background.jpg);
background-repeat:repeat-x;
}
#header{
position:absolute;
top:10px;
left:170px;
width:700px;
height:135px;
}
#button1{
position:absolute;
top:155px;
left:170px;
width:136px;
height:50px;
}
#button2{
position:absolute;
top:155px;
left:311px;
width:136px;
height:50px;
}
#button3{
position:absolute;
top:155px;
left:452px;
width:136px;
height:50px;
}
#button4{
position:absolute;
top:155px;
left:593px;
width:136px;
height:50px;
}
#button5{
position:absolute;
top:155px;
left:734px;
width:136px;
height:50px;
}
#stimmungsbild{
position:absolute;
top:210px;
left:170px;
width:700px;
height:400px;
}
#content{
position:absolute;
top:610px;
left:170px;
width:695px;
height:150px;
padding:0px 0px 0px 5px;
background-color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
#headline{
font-family:Verdana, Geneva, sans-serif;
font-size:21px;
color:#e2011b;
}
#mikronavi{
position:absolute;
color:#FFF;
top:760px;
left:170px;
width:700px;
height:25px;
padding: 5px 0px 0px 0px;
background-image:url(Pictures/mikronavi.jpg);
background-repeat:no-repeat;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
Ich hoffe das ihr mir helfen könnt was ich falsch gemacht habe bzw. wo ich arbeiten muss!
P.S. die vielen " " habe ich deshalb gemacht weil ich nicht weis wie ich das "Impressum" sonst rechts hinkriege. Per padding wird nur der Rote Balken länger... Und seltsamerweise sind die Content, Headline und Mikronavi nur per span id möglich...
Danke schonmal im Vorraus, Gruß Robin.
Hier habt ihr 2 Bilder der verschiedenen Darstellungen:
Firefox:
http://img683.imageshack.us/img683/6856/firefoxjpg.jpg
Inet Explorer:
http://img265.imageshack.us/img265/2688/inetexplorer.jpg
Und hier ist mein Quellcode und die externe CSS datei:
<!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">
<html>
<head> <title> Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="Pictures/Header.jpg" alt="header" name="header" width="700" height="135" id="header" border="0">
</a>
</header>
<button1>
<img src="Pictures/Buttons/Unternehmen.jpg" alt="Unternehmen" name="button1" width="135" height="50" id="button1">
</button1>
<button2>
<img src="Pictures/Buttons/Sortiment.jpg" alt="Sortiment" name="button2" width="135" height="50" id="button2">
</button2>
<button3>
<img src="Pictures/Buttons/Aktuell.jpg" alt="Aktuell" name="button3" width="135" height="50" id="button3">
</button3>
<button4>
<img src="Pictures/Buttons/Kundenservice.jpg" alt="Kundenservice" name="button4" width="135" height="50" id="button4">
</button4>
<button5>
<img src="Pictures/Buttons/Kontakt.jpg" alt="Aktuell" name="button5" width="135" height="50" id="button5">
</button5>
<stimmungsbild>
<img name="stimmungsbild" src="Pictures/stimmungsbild.jpg" width="700" height="466" alt="stimmungsbild" id="stimmungsbild" ></stimmungsbild>
<span id="content">
<content>
<br>
<headline id="headline">Wir schreiben Geschichte.</headline>
<br>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte
</content>
</span>
<span id="mikronavi">
<mikronavi>
Impressum
</mikronavi>
</span>
</body>
</html>
CSS-Datei:
body{
background-image:url(Pictures/background.jpg);
background-repeat:repeat-x;
}
#header{
position:absolute;
top:10px;
left:170px;
width:700px;
height:135px;
}
#button1{
position:absolute;
top:155px;
left:170px;
width:136px;
height:50px;
}
#button2{
position:absolute;
top:155px;
left:311px;
width:136px;
height:50px;
}
#button3{
position:absolute;
top:155px;
left:452px;
width:136px;
height:50px;
}
#button4{
position:absolute;
top:155px;
left:593px;
width:136px;
height:50px;
}
#button5{
position:absolute;
top:155px;
left:734px;
width:136px;
height:50px;
}
#stimmungsbild{
position:absolute;
top:210px;
left:170px;
width:700px;
height:400px;
}
#content{
position:absolute;
top:610px;
left:170px;
width:695px;
height:150px;
padding:0px 0px 0px 5px;
background-color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
#headline{
font-family:Verdana, Geneva, sans-serif;
font-size:21px;
color:#e2011b;
}
#mikronavi{
position:absolute;
color:#FFF;
top:760px;
left:170px;
width:700px;
height:25px;
padding: 5px 0px 0px 0px;
background-image:url(Pictures/mikronavi.jpg);
background-repeat:no-repeat;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
Ich hoffe das ihr mir helfen könnt was ich falsch gemacht habe bzw. wo ich arbeiten muss!
P.S. die vielen " " habe ich deshalb gemacht weil ich nicht weis wie ich das "Impressum" sonst rechts hinkriege. Per padding wird nur der Rote Balken länger... Und seltsamerweise sind die Content, Headline und Mikronavi nur per span id möglich...
Danke schonmal im Vorraus, Gruß Robin.