Hallo
bin noch ziemlich neu in Sachen Html und CSS aber ich hab ein problem mit dem IE 7 und ich weis nicht woran das liegen könnte.
Ich habe schon in Google geschaut aber nichts gefunden was mir helfen könnte.
Hab auch mal bei "validator.w3.org" die Seite überprüfen lassen und es wurden Fehler angezeigt aber das hilft mir auch nicht wirklich weil die fehler die angezeigt werden nicht im HTML-Code von mir auftauchen
bis auf eines.
Darum frage ich einfach mal hier nach hilfe^^
Das Problem ist folgendes:
Ich habe 2 Link- Navigationen, eine oben und eine Links. Im Fire Fox sehen die 2 Navigationsleisten richtig aus d.h. es sitzt alles da wo es sein sollte.
Im IE allerdings sind Navigationen "verschoben" d.h. die obere Navigationsleiste ist wie eine Treppe angeordnet (von links oben nach rechts unten) und
bei der Navigation Links sind Links "nur" nach untenhin auseinander gezogen.
Wie gesagt habe ich die Seite ja überprüfen lassen und mir wurde gesagt das dieser Code vor dem <head> Abschnitt fehlt:
Nachdem ich den Code eingefügt habe seh es im IE schon anders aus: Die Links Oben werden zwar immernoch wie eine Treppe angeordnet nur das der Content-Bereich nicht nach untengeschoben wurde
und die Links auf der linken Seite sind diesmal NICHT nach unten verzerrt.
Ich habe Screenshots angehängt: (Weil die Bilder sehr groß sind füge ich sie mal als Link ein)
HP im Fire Fox
HP im IE mit Code
HP im IE ohne Code
Mein HTML-Code:
Und mein CSS-Code:
Hier noch der Link zu meiner HP:
http://valhallaempire.va.funpic.de/evsema/Layout.html
Würde mich freuen wenn ihr mir helfen könnt
MfG
Ph4Z3r
bin noch ziemlich neu in Sachen Html und CSS aber ich hab ein problem mit dem IE 7 und ich weis nicht woran das liegen könnte.
Ich habe schon in Google geschaut aber nichts gefunden was mir helfen könnte.
Hab auch mal bei "validator.w3.org" die Seite überprüfen lassen und es wurden Fehler angezeigt aber das hilft mir auch nicht wirklich weil die fehler die angezeigt werden nicht im HTML-Code von mir auftauchen
bis auf eines.
Darum frage ich einfach mal hier nach hilfe^^
Das Problem ist folgendes:
Ich habe 2 Link- Navigationen, eine oben und eine Links. Im Fire Fox sehen die 2 Navigationsleisten richtig aus d.h. es sitzt alles da wo es sein sollte.
Im IE allerdings sind Navigationen "verschoben" d.h. die obere Navigationsleiste ist wie eine Treppe angeordnet (von links oben nach rechts unten) und
bei der Navigation Links sind Links "nur" nach untenhin auseinander gezogen.
Wie gesagt habe ich die Seite ja überprüfen lassen und mir wurde gesagt das dieser Code vor dem <head> Abschnitt fehlt:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
und die Links auf der linken Seite sind diesmal NICHT nach unten verzerrt.
Ich habe Screenshots angehängt: (Weil die Bilder sehr groß sind füge ich sie mal als Link ein)
HP im Fire Fox
HP im IE mit Code
HP im IE ohne Code
Mein HTML-Code:
HTML:
<html>
<head>
<title>"EvSeMa"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="config.css" rel="stylesheet" type="text/css" media="all">
</head>
<body style="text-align:center;">
<div id="Page">
<div id="Header"> </div>
<div id="Navi-Oben">
<ul id="Nav-Oben">
<li><a href="Layout.html" id="current">EvSeMa</a></li>
<li><a href="Gallerie.html">Angebot</a></li>
<li><a href="#">Preise</a></li>
<li><a href="#">Buchung</a></li>
<li><a href="#">Referenz</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div id="Navi-Links">
<ul id="Nav-Links">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
<li><a href="#">Link7</a></li>
<li><a href="#">Link8</a></li>
<li><a href="#">Link9</a></li>
<li><a href="#">Link10</a></li>
</ul>
</div>
<div id="Content">
<div id="Text">
<ul>
<li>Hallo ich bin eine testpage!</li>
<li>hhjk </li>
</ul>
</div>
</div>
<div id="Footer">
</div>
</div>
</body>
</html>
Und mein CSS-Code:
Code:
#Page {
background-image:url(Bilder/Background.png);
background-repeat:repeat-x;
background-color:#1c3855;
width:1024px;
height:1090px;
position:relative;
margin:0px auto;
text-align:left;
}
#Header {
background-image:url(Bilder/Header.png);
width:974px;
height:160px;
float:left;
position:relative;
left:25px;
top:25px;
}
#Navi-Oben {
background-image:url(Bilder/Navi-Oben.png);
background-repeat:no-repeat;
width:924px;
height:25px;
float:left;
position:relative;
left:50px;
top:40px;
}
#Navi-Links {
background-image:url(Bilder/Navi-Links.png);
background-repeat:no-repeat;
width:150px;
height:300px;
float:left;
position:relative;
left:25px;
top:55px;
}
#Content {
background-image:url(Bilder/Content.png);
width:809px;
height:710px;
float:left;
position:relative;
left:40px;
top:55px;
}
#Text{
width:779px;
height:635px;
position:absolute;
left: 15px;
top: 50px;
}
#Footer {
background-image:url(Bilder/Footer.png);
width:974px;
height:100px;
float:left;
position:relative;
left:25px;
top:70px;
}
ul#Nav-Oben{
margin:2px;
padding:0px;
list-style:none;
}
ul#Nav-Links{
Margin:0px;
padding:0px;
list-style:none;
}
ul#Nav-Oben a{
float:left;
text-decoration:none;
text-align:center;
display:block;
margin: 0px 0px 0px 0px;
font: bold .8em verdana, "sans serif";
color:#FFFFFF;
}
ul#Nav-Links a{
float:left;
text-decoration:none;
text-align:center;
display:block;
margin: 25px 0px -25px 0px;
font: bold .8em verdana, "sans serif";
color:#FFFFFF;
}
ul#Nav-Oben li a:link, ul#Nav-Oben li a:visited{
width:115px;
line-height:21px;
}
ul#Nav-Oben li a:hover{
background-image:url(Bilder/Link_Oben-Hover.png);
background-repeat:no-repeat;
}
ul#Nav-Oben li a:active, ul#Nav-Oben li a#current{
background-image:url(Bilder/Link_Oben-Hover.png);
background-repeat:no-repeat;
}
ul#Nav-Links li a:link, ul#Nav-Links li a:visited{
width:150px;
line-height:25px;
}
ul#Nav-Links li a:hover{
background-image:url(Bilder/Link_Links-Hover.png);
background-repeat:no-repeat;
}
ul#Nav-Links li a:active, ul#Nav-Links li a#current{
background-image:url(Bilder/Link_Links-Hover.png);
background-repeat:no-repeat;
}
Hier noch der Link zu meiner HP:
http://valhallaempire.va.funpic.de/evsema/Layout.html
Würde mich freuen wenn ihr mir helfen könnt
MfG
Ph4Z3r