|
|||
DIV, IE und Firefox - Falsche Darstellung
Also obwohl ich eigentlich nur Standard CSS Werte nehme, zeigt er mir in beiden Browser verschiedene Varianten an.
style.css Code:
a:link { color:#006CFF; } a:visited { color:#006CFF; } a:hover { background-color:#006CFF; color:#FFFFFF; } a:active { color:#006CFF; } a.toplinks:link { color:#FFFFFF; text-decoration:underline; } a.toplinks:visited { color:#FFFFFF; text-decoration:underline; } a.toplinks:hover { background-color:#006CFF; color:#FFFFFF; text-decoration:none; } a.toplinks:active { color:#FFFFFF; text-decoration:underline; } body { background-color:#FFFFFF; font-family:Arial; font-size:1em; margin:0px; } #container { border:0px #000000 dotted; margin:0 auto; text-align:left; width:900px; } #content { border:0px #000000 dotted; float:right; width:630px; } #footer { clear:both; color:#999999; font-family:Arial; font-size:0.7em; margin:0 auto; padding-top:15px; text-align:center; width:900px; } #navigation { border:1px #000000 dotted; border-top:0px; font-family:Arial; font-size:1em; float:left; width:250x; } #productleft { background-image:url(images/product_left.jpg); float:left; height:100px; width:11px; } #producttext { background-image:url(images/product_text.jpg); border-right:1px #7F7F7F solid; border-left:0px; height:100px; width:100%; } #shopname { color:#FFFFFF; font-family:Arial; font-size:2.5em; margin:0 auto; padding-top:10px; text-align:left; width:900px; } #topnavi { color:#FFFFFF; font-family:Arial; font-size:0.9em; margin:0 auto; padding-top:10px; text-align:left; width:900px; } .headline { border-bottom:1px #000000 dotted; color:#006CFF; font-family:Arial; font-size:1.5em; padding-left:10%; } .hereuare { font-family:Arial; font-size:1em; margin-top:5px; width:100%; } .navlinks { color:#000000; font-family:Arial; font-size:0.9em; padding:5px; width:100%; } .productdescription { padding:5px; padding-left:15px; } .slogan { color:#FFFFFF; font-family:Arial; font-size:0.5em; } .top { background-image:url(images/top.gif); background-repeat:repeat-x; height:123px; width:100%; } index.php Code:
<?php $sitetitle = "Title"; $slogan = "Slogan!"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title><?php echo $sitetitle; ?></title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="top"> <div id="shopname"><?php echo $sitetitle; ?><br><div class="slogan"><?php echo $slogan; ?></div></div> <div id="topnavi"><a href="link1" class="toplinks">Erster Link</a> | <a href="link2" class="toplinks">Zweiter Link</a> | <a href="link3" class="toplinks">Dritter Link</a> | <a href="link4" class="toplinks">Vierter Link</a></div> </div> <div id="container"> <div class="hereuare"><b>Du bist hier:</b> <a href="index.php" target="_parent">Startseite</a></div> <br> <div id="content"> <div class="headline">Angebote</div> <br> <div id="productleft"></div> <div id="producttext"> <div class="productdescription"> Hier kommt der Text etc. </div> </div> </div> <div id="navigation"> <img src="images/navigation.gif" width="250" height="35"> <br> <div class="navlinks"> ›› <a href="/1/erste_kategorie">Erste Kategorie</a><br><br> ›› <a href="/2/zweite_kategorie">Zweite Kategorie</a><br><br> ›› <a href="/3/dritte_kategorie">Dritte Kategorie</a><br><br> ›› <a href="/4/vierte_kategorie">Vierte Kategorie</a> </div> </div> </div> <div id="footer">© 2008 tb - smk | <a href="imprint.php" target="_parent">Impressum</a> • <a href="versand.php" target="_parent">Versand</a></div> </body> </html> |
Sponsored Links |
|
|||
Bitte poste einen Link.
Eine Navigation gehört in eine Liste!
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Oh, hab den Link vergessen - sorry
BSS v1 Joa das ist provisorisch erstmal gedacht...ich arbeite seit einiger Zeit erst mit CSS und wollte erst das Layout komplett haben um mich danach der Programmierung etc. widmen. |
|
|||
Zitat:
Du brauchst zuerst das sinnvolle Markup. Man kann mit CSS nämlich nur das gestalten, was im Quelltext steht. Wirf alle leeren Elemente raus. Für deinen blauen Balken brauchst du kein Element. Leg eine Hintergrundgrafik mit Balken und Verlauf in deine Box. Wirf alle als Abstandhalter missbrauchten <br /> raus. Wirf img-Elemente raus, die nur Ziergrafik sind. Sowas gehört als Hintergrundbild ins Stylesheet. Zeichne deinen Inhalt semantisch aus. Der Seitentitel ist eine h1. Die Navigation ist eine Liste. <div class headline> ist eine Überschrift! (Google: "Div-Suppe", "Divitis"). Dann kann man weitersehen. Für Browserbugs ist später noch Zeit.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (30.09.2008 um 14:31 Uhr) |
|
|||
So...nun funktioniert alles nach der Fehlerbehebung. Hier nochmals das aktuellste:
index.php Code:
<?php $sitetitle = "BSS v1"; $slogan = "Verkaufen - mit Leichtigkeit!"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title><?php echo $sitetitle; ?></title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="top"> <div id="shopname"><?php echo $sitetitle; ?><br><div class="slogan"><?php echo $slogan; ?></div></div> <div id="topnavi"><a href="link1" class="toplinks">Erster Link</a> | <a href="link2" class="toplinks">Zweiter Link</a> | <a href="link3" class="toplinks">Dritter Link</a> | <a href="link4" class="toplinks">Vierter Link</a></div> </div> <div id="container"> <div class="hereuare"><b>Du bist hier:</b> <a href="index.php" target="_parent">Startseite</a></div> <br> <div id="content"> <div class="headline">Angebote</div> <br> <div id="product"> Hier kommt der Text etc. </div> </div> <div id="navigation"> <ul class="navlinks"> <li><a href="/1/erste_kategorie">Erste Kategorie</a></li> <li><a href="/2/zweite_kategorie">Zweite Kategorie</a></li> <li><a href="/3/dritte_kategorie">Dritte Kategorie</a></li> <li><a href="/4/vierte_kategorie">Vierte Kategorie</a></li> </ul> </div> </div> <div id="footer">© 2008 tb - smk | <a href="imprint.php" target="_parent">Impressum</a> • <a href="versand.php" target="_parent">Versand</a></div> </body> </html> style.css Code:
a:link { color:#006CFF; } a:visited { color:#006CFF; } a:hover { background-color:#006CFF; color:#FFFFFF; } a:active { color:#006CFF; } a.toplinks:link { color:#FFFFFF; text-decoration:underline; } a.toplinks:visited { color:#FFFFFF; text-decoration:underline; } a.toplinks:hover { background-color:#006CFF; color:#FFFFFF; text-decoration:none; } a.toplinks:active { color:#FFFFFF; text-decoration:underline; } body { background-color:#FFFFFF; font-family:Arial; font-size:1em; margin:0px; } #container { border:0px #000000 dotted; margin:0 auto; text-align:left; width:900px; } #content { border:0px #000000 dotted; float:right; width:630px; } #footer { clear:both; color:#999999; font-family:Arial; font-size:0.7em; margin:0 auto; padding-top:15px; text-align:center; width:900px; } #navigation { background-image:url(images/navigation.gif); background-repeat:no-repeat; border:1px #000000 dotted; border-top:0px; font-family:Arial; font-size:1em; float:left; width:250px; } #product { background-image:url(images/product.gif); background-repeat:no-repeat; border:1px #000000 dotted; height:90px; padding-left:15px; padding-top:10px; width:615px; } #shopname { color:#FFFFFF; font-family:Arial; font-size:2.5em; margin:0 auto; padding-top:10px; text-align:left; width:900px; } #topnavi { color:#FFFFFF; font-family:Arial; font-size:0.9em; margin:0 auto; padding-top:10px; text-align:left; width:900px; } .headline { border-bottom:1px #000000 dotted; color:#006CFF; font-family:Arial; font-size:1.5em; padding-left:10%; } .hereuare { font-family:Arial; font-size:1em; margin-top:5px; width:100%; } .navlinks { color:#000000; font-family:Arial; font-size:0.9em; line-height:1.5em; list-style-type:square; margin-top:35px; } .slogan { color:#FFFFFF; font-family:Arial; font-size:0.5em; } .top { background-image:url(images/top.gif); background-repeat:repeat-x; height:123px; width:100%; } Hier nun auch: BSS v1 Danke an fricca!! |
|
|||
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Wollte grad meinen Beitrag editieren...ist mir im letzten Moment eingefallen, dass ich den h1 vergessen hab^^
Jetzt aber: style.css Code:
a:link { color:#006CFF; } a:visited { color:#006CFF; } a:hover { background-color:#006CFF; color:#FFFFFF; } a:active { color:#006CFF; } a.toplinks:link { color:#FFFFFF; text-decoration:underline; } a.toplinks:visited { color:#FFFFFF; text-decoration:underline; } a.toplinks:hover { background-color:#006CFF; color:#FFFFFF; text-decoration:none; } a.toplinks:active { color:#FFFFFF; text-decoration:underline; } body { background-color:#FFFFFF; font-family:Arial; font-size:1em; margin:0px; } h1 { border-bottom:1px #000000 dotted; color:#006CFF; font-family:Arial; font-size:1.5em; padding-left:10%; margin-top:-5px; } #container { border:0px #000000 dotted; margin:0 auto; text-align:left; width:900px; } #content { border:0px #000000 dotted; float:right; width:630px; } #footer { clear:both; color:#999999; font-family:Arial; font-size:0.7em; margin:0 auto; padding-top:15px; text-align:center; width:900px; } #navigation { background-image:url(images/navigation.gif); background-repeat:no-repeat; border:1px #000000 dotted; border-top:0px; font-family:Arial; font-size:1em; float:left; width:250px; } #product { background-image:url(images/product.gif); background-repeat:no-repeat; border:1px #000000 dotted; height:90px; padding-left:15px; padding-top:10px; width:615px; } #shopname { color:#FFFFFF; font-family:Arial; font-size:2.5em; margin:0 auto; padding-top:10px; text-align:left; width:900px; } #topnavi { color:#FFFFFF; font-family:Arial; font-size:0.9em; margin:0 auto; padding-top:10px; text-align:left; width:900px; } .hereuare { font-family:Arial; font-size:1em; margin-top:5px; margin-bottom:15px; width:100%; } .navlinks { color:#000000; font-family:Arial; font-size:0.9em; line-height:1.5em; list-style-type:square; margin-top:35px; } .slogan { color:#FFFFFF; font-family:Arial; font-size:0.5em; } .top { background-image:url(images/top.gif); background-repeat:repeat-x; height:123px; width:100%; } index.php Code:
<?php $sitetitle = "BSS v1"; $slogan = "Verkaufen - mit Leichtigkeit!"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title><?php echo $sitetitle; ?></title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="top"> <div id="shopname"><?php echo $sitetitle; ?><br><div class="slogan"><?php echo $slogan; ?></div></div> <div id="topnavi"><a href="link1" class="toplinks">Erster Link</a> | <a href="link2" class="toplinks">Zweiter Link</a> | <a href="link3" class="toplinks">Dritter Link</a> | <a href="link4" class="toplinks">Vierter Link</a></div> </div> <div id="container"> <div class="hereuare"><b>Du bist hier:</b> <a href="index.php" target="_parent">Startseite</a></div> <div id="content"> <h1>Angebote</h1> <div id="product"> Hier kommt der Text etc. </div> </div> <div id="navigation"> <ul class="navlinks"> <li><a href="/1/erste_kategorie">Erste Kategorie</a></li> <li><a href="/2/zweite_kategorie">Zweite Kategorie</a></li> <li><a href="/3/dritte_kategorie">Dritte Kategorie</a></li> <li><a href="/4/vierte_kategorie">Vierte Kategorie</a></li> </ul> </div> </div> <div id="footer">© 2008 tb - smk | <a href="imprint.php" target="_parent">Impressum</a> • <a href="versand.php" target="_parent">Versand</a></div> </body> </html> |
|
|||
Der Shopname ist die H1. Danach entsprechend der Überschriftenhierarchie. Außerdem hast du mehr als eine Navigation auf deiner Seite, aber nur eine Liste.
Du solltest dich dringend über "semantisches Markup" informieren, außerdem zu den bereits genannten Stichworten. Es gibt viel mehr in HTML als nur Divs.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Kleines Problem mit der Startseite!
Im Firefox ist die Navigation auf der gleichen Höhe wie die h2 Überschrift "Angebote". Im IE6 und IE7 schmeißt er die nach unten. Auf allen anderen Seiten (wenn man auf die Links klickt) bleibt die Navi dann doch oben. Wieso nicht auf der Startseite? URL: BSS v1 |
Sponsored Links |
|
|||
Weil es auf der Startseite andere Syntaxfehler gibt, als auf den anderen Seiten.
Validieren!
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Schrift überlappt div (firefox) | fabianbs | CSS | 0 | 07.09.2007 17:35 |
Div Höhe und FireFox | cavebird | CSS | 3 | 09.01.2005 15:06 |
html tabelle in div steht im firefox rechts neben div | Holger (HMR) | CSS | 2 | 08.01.2005 19:45 |
div in div firefox | Holger (HMR) | CSS | 3 | 29.12.2004 22:16 |