wissensdurstig
Hallo zusammen,
ich habe erst vor ein paar Monaten angefangen mich mit dem Thema Webdesign zu beschäftigen und stoße nun in meinem Lernprozess auf ein Problem, bei dem ich Hilfe von erfahrenen Webdesigner benötige.
Ich habe eine (Test-)Site nun soweit fertig, dass das Design im Firefox, IE & Opera richtig dargestellt wird, aber wie so oft gibt es nun Probleme mit der Darstellung in anderen Browsern. Überaschenderweiße ist diesmal nicht der IE der Übeltäter, sondern Apples Safari.
Ich habe beim Bau meiner Seite darauf geachtet validen Code zu benutzen, da ich dachte, dass damit sicher gestellt sei, dass die Site in allen Browsern gleich dargestlellt wird, aber scheinbar ist dem nicht so. :muede:
Hier der Link zur betroffenen Seite:
Das Ergebnis der W3C's HTML-Validierung: [Valid] Markup Validation of http://media-powerplant.de/Beispiele/Business-Site/index.html - W3C Markup Validator
Das Ergebnis der W3C's CSS-Validierung:
Habe nun aber mal die Seite mit "Browsershots.org" überprüfen lassen, und musste feststellen, dass Safari und Chrome die Seite nahc unten "versetzen", was katastrophale Auswirkungen auf das Design hat, siehe Screenshot.
Hier noch der HTML-Code der Seite (die css sieht man im css-Vali-Link):
Kann mir jemand vielleicht nen Tip geben, wie man solche Problem beheben kann. Vielleicht gibts ja sowas wie nen Validierungsservice für die einzelnen Browser? Wie gesagt ist das gerade der nächste Schritt in meiner Lernphase und wundere mich nun, ob es da nicht irgendwelche nützlichen Bücher oder Links gibt, die einem sagen, was z.B. Safari anders macht als Opera, warum der IE immer spinnt und wie man das behebt usw.
Vielen Dank für eure Hilfe!
ich habe erst vor ein paar Monaten angefangen mich mit dem Thema Webdesign zu beschäftigen und stoße nun in meinem Lernprozess auf ein Problem, bei dem ich Hilfe von erfahrenen Webdesigner benötige.
Ich habe eine (Test-)Site nun soweit fertig, dass das Design im Firefox, IE & Opera richtig dargestellt wird, aber wie so oft gibt es nun Probleme mit der Darstellung in anderen Browsern. Überaschenderweiße ist diesmal nicht der IE der Übeltäter, sondern Apples Safari.
Ich habe beim Bau meiner Seite darauf geachtet validen Code zu benutzen, da ich dachte, dass damit sicher gestellt sei, dass die Site in allen Browsern gleich dargestlellt wird, aber scheinbar ist dem nicht so. :muede:
Hier der Link zur betroffenen Seite:
Das Ergebnis der W3C's HTML-Validierung: [Valid] Markup Validation of http://media-powerplant.de/Beispiele/Business-Site/index.html - W3C Markup Validator
Das Ergebnis der W3C's CSS-Validierung:
Habe nun aber mal die Seite mit "Browsershots.org" überprüfen lassen, und musste feststellen, dass Safari und Chrome die Seite nahc unten "versetzen", was katastrophale Auswirkungen auf das Design hat, siehe Screenshot.
Hier noch der HTML-Code der Seite (die css sieht man im css-Vali-Link):
HTML:
<!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>Business-Site</title>
<link rel="SHORTCUT ICON" href="favicon.ico"/>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="header">
<h1>Firmenname</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div><!-- end of header -->
<div id="content">
<div id="oben">
<h2>Aliquam erat volutpatphaselus</h2>
<p class="text">non imperdiet magna facilisis atlimodo erati<br /><br />
Sed diam ipsum, rutrum placerat vehiculaliopi iaculisametlibi vestibulum nec magnaliquamjp eu vehicula lectustiampimk.</p>
<p class="btnmehr"><a href="#">mehr</a></p>
</div><!-- end of oben -->
<div id="mitte">
<h3>Willkommen auf unserer Firmen-Website!</h3>
<p class="text">Cras consequat aliquam sem sollicitudinultricies <br /><br />
Proin nec arcu quis elit interdum commodo sed hendrerit nulla. Vivamus a nisi libero, a tempor enim. Morbi ac turpis magna, nec accumsan ametlib antelioNam eu nunc non quam placerat rhoncus eleifend volutpat dui. Pellentesque habitant morbi tristique senectus et netus et malesuada famems ac turpis egestas.</p>
<p class="btnmehr"><a href="#">mehr</a></p>
<div id="triad">
<div class="links">
<h4>Unsere Leistungen</h4>
<h5>aliquam sem Lorem</h5>
<p class="triadtext">Nullam vel feugiat nulla. Aliquam eratliber volutpat. Phasellus sagittis urna sit ameti magna tincidunt dapibus.</p>
<p class="triadbtn"><a href="#">mehr</a></p>
</div><!-- end of links -->
<div class="mitte">
<div class="container">
<h4> Projekte</h4>
<h5>aliquam sem Lorem</h5></div>
<p class="triadtext">Nullam vel feugiat nulla. Aliquam eratliber volutpat. Phasellus sagittis urna sit ameti magna tincidunt dapibus.</p>
<p class="triadbtn"><a href="#">mehr</a></p>
</div><!-- end of mitte -->
<div class="rechts">
<div class="container">
<h4>Anschrift & Anfahrt</h4>
<h5>aliquam sem Lorem</h5></div>
<p class="triadtextrechts">Nullam vel feugiat nulla. Aliquam eratliber volutpat. Phasellus sagittis urna sit ameti magna tincidunt dapibus.</p>
<p class="triadbtn"><a href="#">mehr</a></p>
</div><!-- end of rechts -->
</div><!-- end of triad -->
</div><!-- end of mitte -->
<div id="unten">
<div class="untenlinks">
<p>Kontakt</p>
<p class="strich">---------------------------------------------------------</p>
<input name="betreff" type="text" class="kontaktfeld" tabindex="10" value="Schreiben Sie hier den Betreff rein" size="36" /><br /><br />
<textarea name="kontakttext" cols="34" rows="5" tabindex="20" class="kontaktmessage" >Hier können Sie Ihre Meinung mitteilen.</textarea><br /><br />
<input name="kontaktemail" type="text" class="kontaktfeld" tabindex="30" value="Geben Sie hier bitte Ihre E-Mail-Adresse an" size="36"/><br /><br />
<p><a href="#" class="sendenbtn">senden</a></p>
</div>
<div class="untenrechts">
<p class="daumen"></p>
<p class="anderesagen">Was andere über uns sagen...</p>
<p class="unterueberschrift">blanditiis praesentium voluptatum deleniti atque corrupti quos</p>
<p class="text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe evenietlpu utliberi etliberolotu voluptates repudiandae sint et molestiae non recusandae. Itaque earumai rerum hicjiklf tenetur a sapiente kilop delectus.</p>
<div class="mann"></div>
<p class="zitate"><a href="#">Aliquam eu mi nec odio mattis egestas...</a></p>
<p class="zitate"><a href="#">Nam vitae sem et tellus auctor...</a></p>
<p class="zitate"><a href="#">Morbi convallis pulvinar leo, sed feugia...</a></p>
<p class="zitate"><a href="#">Vestibulum lobortis risus eu augue...</a></p>
<p class="zitate"><a href="#">Lorem ipsum dolor sit amet...</a></p>
</div>
</div><!-- end of unten -->
</div><!-- end of content -->
</div><!-- end of main -->
<div id="footer">
<ul>
<li><a href="#">Home</a> | </li>
<li><a href="#">Support</a> | </li>
<li><a href="#">Kontakt</a> | </li>
<li><a href="#">Jobs</a> | </li>
<li><a href="#">Impressum</a> | </li>
<li><a href="#">Login</a></li>
</ul>
<p class="copyright">Copyright © 2010 media powerplant. Alle Rechte vorbehalten</p>
</div><!-- end of footer -->
</div><!-- end of wrapper -->
</body>
</html>Kann mir jemand vielleicht nen Tip geben, wie man solche Problem beheben kann. Vielleicht gibts ja sowas wie nen Validierungsservice für die einzelnen Browser? Wie gesagt ist das gerade der nächste Schritt in meiner Lernphase und wundere mich nun, ob es da nicht irgendwelche nützlichen Bücher oder Links gibt, die einem sagen, was z.B. Safari anders macht als Opera, warum der IE immer spinnt und wie man das behebt usw.
Vielen Dank für eure Hilfe!
Zuletzt bearbeitet von einem Moderator:
