| Autor |
Nachricht |
DMchen
Threadersteller
Dabei seit: 15.02.2005
Ort: -
Alter: 36
Geschlecht: 
|
Verfasst So 27.04.2008 00:23
Titel [CSS] Anzeigeprobleme in Firefox und IE |
  |
|
Ich übe gerade Anhand eines vorgegebenen Beispiel Webdesigns CSS.
Habe aber etliche probleme damit. Zum einen die Navigation, beim IE
stimmt die Größe der Botton aber es fehlt der abstand dazwischen. Beim
FF ist der Abstand da aber es werden in der Vertikalen nur die hälfte der
Bottons angezeigt. Bei beiden ist das problem das der gelbe Bereich nicht mit
dem Carbonlook abschließt. Ich komme irgendwie mit dem Verschachteln nicht
klar.
Ansicht im IE:
Ansicht im FF:
Hier mal der Source des HTML Doc. :
| Code: |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.metzen-style.de - Home</title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="layInhalt">
<div id="carbonLinks"></div>
<div id="Header" class="Header"><img src="images/Header.jpg" height="117" width="752" align="top"/></div>
<div id="flamesLinks"><img src="images/flamesLinks.jpg" width="50" height="621"/></div>
<div id="flamesRechts"><img src="images/flamesRechts.jpg" height="621" width="50"/></div>
<div id="carbonRechts"></div>
<div id="navigation">
<div id="nav1" onmouseover="navover('nav1');" onmouseout="navout('nav1');" onclick="navclick('nav1','textHome');"> <img src="images/spacer.gif" height="24" width="85"/></div>
<div id="nav2" onmouseover="navover('nav1');" onmouseout="navout('nav1');" onclick="navclick('nav1','textHome');"> <img src="images/spacer.gif" height="24" width="85"/></div>
<div id="nav3" onmouseover="navover('nav1');" onmouseout="navout('nav1');" onclick="navclick('nav1','textHome');"> <img src="images/spacer.gif" height="24" width="85"/></div>
<div id="nav4" onmouseover="navover('nav1');" onmouseout="navout('nav1');" onclick="navclick('nav1','textHome');"> <img src="images/spacer.gif" height="24" width="85"/></div>
<div id="nav5" onmouseover="navover('nav1');" onmouseout="navout('nav1');" onclick="navclick('nav1','textHome');"> <img src="images/spacer.gif" height="24" width="85"/></div>
<div id="nav6" onmouseover="navover('nav1');" onmouseout="navout('nav1');" onclick="navclick('nav1','textHome');"> <img src="images/spacer.gif" height="24" width="85"/></div>
</div>
</div>
</body>
</html>
|
Und hier der Source des CSS Doc. :
| Code: |
/*BODY*/
body { overflow:auto; background: #000000; margin:30px 0px; padding:0px;}
/* Hauptlayer für Positionierung */
.layInhalt { z-index:0; position:absolute; padding:0px; left:50%; margin-left:-512px; width:1024px; height:100%; background-color:#FFFFFF;}
/* Layer für Carboneffekt */
#carbonLinks {z-index:1; position:absolute; padding:0px; left:0px; width:136px; height:100%; margin:0px auto; background-repeat:repeat-y; background:url(images/carbonLinks.jpg);}
#carbonRechts {z-index:1; position:absolute; padding:0px; right:0px; width:136px; height:100%; margin:0px auto; background-repeat:repeat-y; background:url(images/carbonRechts.jpg);}
/* Layer für Header*/
#Header {z-index:1; position:absolute; padding:0px; left:136px; top:0px; width:752px; height:117px; margin:0px auto;}
#flamesLinks {z-index:1; position:absolute; padding:0px; margin:0px 0px; left:136px; top:117px; width:50px; height:100%; background:url(images/flamesBackground.gif);background-repeat:repeat-y;}
#flamesRechts {z-index:1; position:absolute; padding:0px; margin:0px 0px; right:136px; top:117px; width:50px; height:100%; background:url(images/flamesBackground.gif);background-repeat:repeat-y;}
/*Layer der Navigation*/
#navigation { z-index:1; position:absolute; top:125px; left:191px; width:591px; height:24px; margin:0px 0px; padding:0px;}
#nav1 { z-index:1; cursor:pointer; margin:0px; padding:0px; top:0px; left:0px; height:24px; list-style:none; display:inline; overflow:visible; width:85px; background:url(images/home_nav1.jpg); background-position:top; background-repeat:no-repeat;}
#nav2 { z-index:1; cursor:pointer; margin:0px; padding:0px; top:0px; left:90px; height:24px; list-style:none; display:inline; overflow:visible; width:85px; background:url(images/history_nav1.jpg);}
#nav3 { z-index:1; cursor:pointer; margin:0px; padding:0px; top:0px; left:190px; height:24px; list-style:none; display:inline; overflow:visible; width:85px; background:url(images/gallery_nav1.jpg);}
#nav4 { z-index:1; cursor:pointer; margin:0px; padding:0px; top:0px; left:291px; height:24px; list-style:none; display:inline; overflow:visible; width:85px; background:url(images/links_nav1.jpg);}
#nav5 { z-index:1; cursor:pointer; margin:0px; padding:0px; top:0px; left:386px; height:24px; list-style:none; display:inline; overflow:visible; width:85px; background:url(images/kontakt_nav1.jpg);}
#nav6 { z-index:1; cursor:pointer; margin:0px; padding:0px; top:0px; left:486px; height:24px; list-style:none; display:inline; overflow:visible; width:85px; background:url(images/impressum_nav1.jpg);}
|
Ich sage schon mal Danke
|
|
| |
  |
 |
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 27.04.2008 03:45
Titel
|
|
|
Dein Code ist absoluter Mist.
1.) Lerne HTML und dass man nicht nur divs benutzen sollte (google divitis).
2.) Lerne, deinen HTML- und CSS Code vernünftig zu formatieren.
3.) Lerne, Eventhandler-Attribute zu vermeiden. Bzw. lerne Javascript oder lass es raus ausm Code, dann kann man das auch besser lesen.
Alles das kannst du auf www.selfhtml.org machen.
Wenn du damit fertig bist, komm wieder und poste deinen Code, falls du weiterhin Probleme haben solltest. Weil am toten Patienten lohnt das Rumdoktorn einfach nicht.
|
|
| |
|
|
|
Anzeige
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst So 27.04.2008 10:24
Titel
|
|
|
warum löst du die navi nicht mit ner <ul><li>-konstuktion? wär einfacher zu formatieren und du sparst dir ne menge divs.
übrigens: in deinem code hast den content völlig vergessen
|
|
| |
|
|
Need_you
Dabei seit: 02.06.2006
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
FireFox 4...
firefox vs. IE
CSS+Firefox
Browsertest Firefox
Darstellung in Firefox und IE
Browserweiche Firefox
|
|
Willkommen auf dem Portal für Mediengestalter
