Frage stellenHallo Leute!
Ich heiße Fritz Maislinger und bin neu hier im Forum.
Derzeit erstelle ich die Homepage http://www.trauteuch.at und habe folgendes Problem.
Im IE 7 wireden die Boxen mit Navigation und Inhalt nicht richtig dargestellt.
Im IE 8 und firefox ist alles in Ordnung.
Woran liegt das? Kann mir bitte wer weiterhelfen.
Schöne Grüße
Fritz Maislinger
Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster
Unterschiedliche Darstellung im IE 7 und IE 8
4 Beiträge • Seite 1 von 1
Unterschiedliche Darstellung im IE 7 und IE 8
von maisi » 28.02.2010, 13:11
- maisi
- neu hier
- Beiträge: 2
- Registriert: 28.02.2010, 12:54
Re: Unterschiedliche Darstellung im IE 7 und IE 8
von ThomaZ » 01.03.2010, 17:20
wenn du das hier einfügst, dann sind all deine Probleme Vergangenheit.
Habe deine Seite mit CSS komplett neu aufgebaut. Im Prinzip tauscht du nur deine startseite aus,
und es sollte alle gehen
Die Navigationen haben einen Hover-Effekt, die Seite ist etwas kleiner, damit sie in ältere
Monitore passt, und es ist alles Zentriert.
und nein, ich leide nicht unter langer Weile
Viel Spaß damit, ich hoffe es gefällt dir.
MfG
ThomaZ
Habe deine Seite mit CSS komplett neu aufgebaut. Im Prinzip tauscht du nur deine startseite aus,
und es sollte alle gehen
Die Navigationen haben einen Hover-Effekt, die Seite ist etwas kleiner, damit sie in ältere
Monitore passt, und es ist alles Zentriert.
- Code: Alles auswählen
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Traut Euch Brautmoden aus Salzburg</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #DDE1A6;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
div[id="container"] {
position: relative;
top: 5em;
text-align: left;
background-color: #dde1a6;
margin: 0 auto;
width: 72.25em;
}
div[id="sidebar"] {
position: relative;
top: 0;
left: 0;
width: 16em;
background-color: #acc255;
color: #FFF5DC;
height: 40em;
}
div[id="mainContent"] {
position: absolute;
top: 0;
left: 16em;
background-color: #fff5dc;
width: 56.25em;
height: 40em;
overflow: hidden;
}
div[id="footer"] {
position: relative;
background-color: #fff5dc;
color: #ACC255;
margin: 0;
text-align: center;
}
div[id="footer"] > ul {
margin: 0;
}
ul[class="navigation_vertikal"] {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 1em;
bottom: 2em;
}
ul[class="navigation_vertikal"] > li {
}
ul[class="navigation_vertikal"] > li > span > a {
display: block;
padding: 0.2em;
margin: 0.1em 0;
padding-right: 1.5em;
text-decoration: none;
color: #FFFFFF;
}
ul[class="navigation_vertikal"] > li > span > a:hover,
ul[class="navigation_vertikal"] > li > span > a:focus {
background-color: #5C7215;
border-left: 0.5em solid #FFFFFF;
}
ul[class="navigation_horizontal"] {
list-style: none;
}
ul[class="navigation_horizontal"] > li {
display: inline;
}
ul[class="navigation_horizontal"] > li > span {
text-align: center;
}
ul[class="navigation_horizontal"] > li > span > a {
display: inline-block;
min-width: 6em;
text-decoration: none;
color: #999999;
padding: 0.3em 0;
}
ul[class="navigation_horizontal"] > li > span > a:hover,
ul[class="navigation_horizontal"] > li > span > a:focus {
background-color: #acc255;
}
div[class="logo"] {
position: relative;
top: 0;
left: 0;
right: 0;
height: 28em;
}
div[class="logo"] > img {
width: 100%;
height: 100%;
}
div[class="start_images"] {
position: relative;
top: 0;
left: 0;
right: 0;
}
div[class="start_images"] > span {
display: inline-block;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
<ul class="navigation_vertikal">
<li><span><a href="#">Brautmoden</a></span></li>
<li><span><a href="#">Ballkleidung</a></span></li>
<li><span><a href="#">Festkleidung</a></span></li>
<li><span><a href="#">Debütantinnen</a></span></li>
<li><span><a href="#">Unser Service</a></span></li>
<li><span><a href="#">Über Uns</a></span></li>
</ul>
</div>
<div id="mainContent">
<div class="logo"><img src="bilder/logo.gif" alt="Traut Euch" /></div>
<div class="start_images">
<span><img src="bilder/bild001.gif" /></span><span><img src="bilder/bild002.gif" /></span><span><img src="bilder/bild001.gif" /></span>
</div>
</div>
<div id="footer">
<ul class="navigation_horizontal">
<li><span><a href="#">Kontakt</a></span></li>
<li><span><a href="#">Events</a></span></li>
<li><span><a href="#">Presse</a></span></li>
<li><span><a href="#">Impressum</a></span></li>
</ul>
</div>
</div>
</body>
</html>
und nein, ich leide nicht unter langer Weile
Viel Spaß damit, ich hoffe es gefällt dir.
MfG
ThomaZ
Freier Typo3 Entwickler;
Designumsetzer in HTML & CSS;
Designumsetzer in HTML & CSS;
- ThomaZ
- Gelegenheitsleser
- Beiträge: 23
- Registriert: 25.02.2010, 20:10
Re: Unterschiedliche Darstellung im IE 7 und IE 8
von maisi » 01.03.2010, 21:34
Hallo ThomaZ;
Erstmal vielen vielen Dank.
Du bist ein Hit.
Kannst Du mir den Code ein wenig erklären oder mir eine gute Page mit css-Erklärungen posten/empfehlen?
Wäre super, denn ich muss noch viel lernen.
Danke nochmal und schöne Grüße aus Salzburg
Maisi
Erstmal vielen vielen Dank.
Du bist ein Hit.
Kannst Du mir den Code ein wenig erklären oder mir eine gute Page mit css-Erklärungen posten/empfehlen?
Wäre super, denn ich muss noch viel lernen.
Danke nochmal und schöne Grüße aus Salzburg
Maisi
- maisi
- neu hier
- Beiträge: 2
- Registriert: 28.02.2010, 12:54
Re: Unterschiedliche Darstellung im IE 7 und IE 8
von ThomaZ » 02.03.2010, 09:29
maisi hat geschrieben:Hallo ThomaZ;
Erstmal vielen vielen Dank.
Du bist ein Hit.
Kannst Du mir den Code ein wenig erklären oder mir eine gute Page mit css-Erklärungen posten/empfehlen?
Wäre super, denn ich muss noch viel lernen.
Danke nochmal und schöne Grüße aus Salzburg
Maisi
Habe den Code nochmal überarbeitet. Es waren noch ein paar kleinigkeiten falsch.
- Code: Alles auswählen
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Traut Euch Brautmoden aus Salzburg</title>
<style type="text/css">
<!--
body {
font: Verdana, Arial, Helvetica, sans-serif;
background: #DDE1A6;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
font-size: 10pt;
}
div[id="container"] {
position: relative;
top: 0.5em;
text-align: left;
background-color: #dde1a6;
margin: 0 auto;
width: 72.25em;
}
div[id="sidebar"] {
position: relative;
top: 0;
left: 0;
width: 16em;
background-color: #acc255;
color: #FFF5DC;
height: 36em;
}
div[id="mainContent"] {
position: absolute;
top: 0;
left: 16em;
background-color: #fff5dc;
width: 56.25em;
height: 36em;
overflow: hidden;
}
div[id="footer"] {
position: relative;
background-color: #fff5dc;
color: #ACC255;
margin: 0;
text-align: center;
}
div[id="footer"] > ul {
margin: 0;
}
ul[class="navigation_vertikal"] {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 1em;
bottom: 2em;
}
ul[class="navigation_vertikal"] > li {
}
ul[class="navigation_vertikal"] > li > span > a {
display: block;
padding: 0.2em;
margin: 0.1em 0;
padding-right: 1.5em;
text-decoration: none;
color: #FFFFFF;
font-size: 1.2em;
}
ul[class="navigation_vertikal"] > li > span > a:hover,
ul[class="navigation_vertikal"] > li > span > a:focus {
background-color: #5C7215;
border-left: 0.5em solid #FFFFFF;
}
ul[class="navigation_horizontal"] {
list-style: none;
}
ul[class="navigation_horizontal"] > li {
display: inline;
}
ul[class="navigation_horizontal"] > li > span {
text-align: center;
}
ul[class="navigation_horizontal"] > li > span > a {
display: inline-block;
min-width: 6em;
text-decoration: none;
color: #999999;
padding: 0.3em 0;
font-size: 1.2em;
}
ul[class="navigation_horizontal"] > li > span > a:hover,
ul[class="navigation_horizontal"] > li > span > a:focus {
background-color: #acc255;
}
div[class="logo"] {
position: relative;
top: 0;
left: 0;
right: 0;
height: 24em;
}
div[class="logo"] > img {
width: 100%;
height: 100%;
}
div[class="start_images"] {
position: relative;
top: 0;
left: 0;
right: 0;
}
div[class="start_images"] > span > img {
height: 100%;
width: 100%;
}
div[class="start_images"] > span {
display: inline-block;
width: 18.74em;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
<ul class="navigation_vertikal">
<li><span><a href="#">Brautmoden</a></span></li>
<li><span><a href="#">Ballkleidung</a></span></li>
<li><span><a href="#">Festkleidung</a></span></li>
<li><span><a href="#">Debütantinnen</a></span></li>
<li><span><a href="#">Unser Service</a></span></li>
<li><span><a href="#">Über Uns</a></span></li>
</ul>
</div>
<div id="mainContent">
<div class="logo"><img src="bilder/logo.gif" alt="Traut Euch" /></div>
<div class="start_images">
<span><img src="bilder/bild001.gif" /></span><span><img src="bilder/bild002.gif" /></span><span><img src="bilder/bild001.gif" /></span>
</div>
</div>
<div id="footer">
<ul class="navigation_horizontal">
<li><span><a href="#">Kontakt</a></span></li>
<li><span><a href="#">Events</a></span></li>
<li><span><a href="#">Presse</a></span></li>
<li><span><a href="#">Impressum</a></span></li>
</ul>
</div>
</div>
</body>
</html>
Den Code zu erklären ist mir jetzt ein wenig zu viel schreibarbeit, aber wenn
du einfach die einzelnen Befehle googlest und einfach mal damit rumspielst,
wirst du vieles selber lernen.
Mach aber vorher eine Sicherung
MfG
Thomas
Freier Typo3 Entwickler;
Designumsetzer in HTML & CSS;
Designumsetzer in HTML & CSS;
- ThomaZ
- Gelegenheitsleser
- Beiträge: 23
- Registriert: 25.02.2010, 20:10
4 Beiträge • Seite 1 von 1
Moderatoren: Laus, Moderatoren
Ähnliche Beiträge zu "Unterschiedliche Darstellung im IE 7 und IE 8"
- Joomla-Darstellung im Firefox passt auf einmal nicht mehr
- Darstellungsprobleme im IE7 und abwärts
- Design darstellung
Zurück zu: Homepage-Check
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste