CSSMenu&Abstände werden (im Firefox) nicht richtig angezeigt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
arbeit
art
ausdruck
auto
code
copyright
ende
expression
fehler
http
image
index
inhalt
internet
layout
logo position
tabelle
text
url
-
nabend,
das css menu wird bei mir im internet explorer und im firefox nicht richtig angezeigt. farben fehlen und die schrift sollte auch anders aussehen. ich habe alles von dieser vorlage umdesigned: http://www.easy-vorlagen.de/v/hp08/index.html
auch werden die textabstände im firefox anders zum teil grösser dargestellt als im internet explorer!
danke für eure rasche und kompetente hilfe!
hier der html-code meiner startseite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="robots" content="INDEX,FOLLOW"> <meta name="expires" content="15 days"> <meta name="revisit" content="after 20 days"> <meta name="webdesign, raphael, musik" content="Webseite von Raphael aka Art of Expression"> <meta name="Webdesign und Audio" content="Webseite von Raphael aka Art of Expression"> <title>Webseite von Raphael aka Art of Expression</title> <!-- Der Copyright-Hinweis ist nicht zu löschen. Ein Entfernen des Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen --> <!-- (c)Copyright by S.I.S.Papenburg / www.easy-vorlagen.de Lesen Sie auf der genannten Webseite bitte die Nutzungsbedingungen nach. --> <img id="hintergrund" src="images/Bild3.jpg" border="1" alt="Hintergrundbild"> <div id="content"> <script> <!-- function BlurLinks(){ lnks=document.getElementsByTagName('a'); for(i=0;i<lnks.length;i++){ lnks[i].onfocus=new Function("if(this.blur)this.blur()"); } } onload=BlurLinks; --> </script> <link rel="stylesheet" href="format.css" type="text/css"> <SCRIPT LANGUAGE="JavaScript"> function uhr () { var jahr; var monat; var tag; var stunden; var minuten; var sekunden; var AktuellesDatum=new Date(); jahr=AktuellesDatum.getFullYear (); monat=AktuellesDatum.getMonth ()+1; tag=AktuellesDatum.getDate (); stunden=AktuellesDatum.getHours (); minuten=AktuellesDatum.getMinutes (); sekunden=AktuellesDatum.getSeconds (); if (stunden<10) { stunden="0"+String(stunden); } if (minuten<10) { minuten="0"+String(minuten); } if (sekunden<10) { sekunden="0"+String(sekunden); } if (tag<10) { tag="0"+String(tag); } if (monat<10) { monat="0"+String(monat); } window.document.Datum.Date.value=tag+"."+monat+"."+jahr; window.document.zeit.Time.value=stunden+":"+minuten+":"+sekunden; window.setTimeout ('uhr()',1000); } </SCRIPT> <div align="center"><font size="1" color="#3399FF" face="Verdana"><b> <SCRIPT LANGUAGE="JavaScript"> Datum = new Date(document.lastModified); Jahr = Datum.getYear(); if (Jahr < 2000) Jahr+=1900 Monat = Datum.getMonth() + 1; Tag = Datum.getDate(); document.write("Die Seite wurde am " + Tag + "." + Monat + "." + Jahr + " aktualisiert"); </SCRIPT></b></font> </div> <table align="center" bgcolor="#000000" cellspacing="0" cellpadding="0" border="0" width="728" > <tr> <td width="728" style="border:solid 1px #CCE5FF;" ><table cellspacing="0" cellpadding="0" border="0" > <tr> <td bgcolor="#89A9B8" style="border-top:solid 1px #CCE5FF;border-left:solid 1px #CCE5FF;border-right:solid 1px #CCE5FF;border-bottom:solid 1px #CCE5FF" align="right" valign="bottom" width="100%" height="10"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="right" width="100%"><FORM style="margin-bottom:0px;padding-top:3px;" NAME="Datum"><INPUT SIZE=10 NAME="Date" style="height:20px;font-size:9pt;background-color:#89A9B8;color:#FFFFFF;padding:2px;border:0px"></FORM></td><td > </td><td valign="top" ><FORM NAME="zeit" style="margin-bottom:0px;padding-top:3px;"><INPUT SIZE=10 NAME="Time" style="height:20px;font-size:9pt;background-color:#89A9B8;color:#FFFFFF;padding:2px;border:0px" ></FORM></td> </tr> </table> </td> </tr> <tr> <td bgcolor="#CCE5FF" style="border-top:solid 1px #CCE5FF;border-left:solid 1px #CCE5FF;border-right:solid 1px #CCE5FF;border-bottom:solid 1px #CCE5FF;" align="center" align="middle" height="80"> <span style="color:blue;font-size:9pt;letter-spacing:4px"> </span> <!--logo --> <img id="logo" src="images/logo.jpg" width="732" height="250" border="0" alt="Logo"> <div id="content2"> </div><!--Ende #content--> <!--ende logo--> <br> <br> </td> </tr> <tr> <td bgcolor="#CCE5FF" valign="middle" width="100%" height="18" align="center"> <!-- menü oben --> <table bgcolor="#B2CCE5" width="726" border="0" cellpadding="0" cellspacing="0"> <tr> <td><ul width="726" border="0" cellpadding="0" cellspacing="1" id="menu" > <tr> <td width="121" align="center" ><a href="http://www.aoe123.lima-city.de/web08/startseite.html" >Startseite</a></td> <td width="121" align="center" ><a href="http://www.aoe123.lima-city.de/web08/audio.html" >Audio</a></td> <td width="121" align="center" ><a href="http://www.aoe123.lima-city.de/web08/webdesign.html" >Webdesign</a></td> <td width="121" align="center" ><a href="http://www.aoe123.lima-city.de/web08/about.html" >About</a></td> <td width="121" align="center" ><a href="http://www.aoe123.lima-city.de/web08/konditionen.html" >Konditionen</a></td> <td align="center" width="121" ><a href="http://www.aoe123.lima-city.de/web08/empfehlungen.html" >Empfehlungen</a></td> </tr> </ul> </td> </tr> </table> <!-- ende menü oben--> </td> </tr> <tr> <td valign="top" bgcolor="#CCE5FF" width="100%" height="450" style="border-top:solid 1px #CCE5FF;border-left:solid 1px #CCE5FF;border-right:solid 1px #CCE5FF;border-bottom:solid 1px #CCE5FF" > <br> <table height="100%" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="top" ><!-- beginn hauptinhaltstabelle--><table border="0" cellpadding="0" cellspacing="0" width="100%" > <tr> <!-- abstand links vom inhalt--> <td width="30" ><img src="images/space.gif" width="30" height="1" border="0" alt=""></td><!-- ende abstand links vom inhalt--> <td valign="top" width="100%"> <br> <br> <ul> <p align="left"><span style="color:#3399FF" style="font-family:Verdana" style="font-size:10pt"><h4>Herzlich willkommen bei Art of Expression</span></h4> <span style="color:#3399FF" style="font-family:Verdana" style="font-size:10pt"><b></span></b> </div> <div id="box2" style="float: center; margin-center: 10px; border: 0px solid #89A9B8; "> <p align="left"></div> <span style="color:#3399FF" style="font-family:Verdana" style="font-size:10pt"> Heutzutage ist es wichtig auch im Internet mit einer attraktiven Webseite vertreten zu sein.<br> Mit einer klar strukturierten Webseite gewinnen Sie das Interesse und Vertrauen von vielen neuen potenziellen Kunden und sprechen damit ein breiteres Zielpublikum an.<br> Die Investition in eine Webseite macht sich daher also bezahlt.<br> Als Freelancer stelle ich meine Kenntnisse in Audio & Webdesign zur Verfügung und wir realisieren gemeinsam Ihren Internetauftritt.<br><br><br> <b>Warum der Name "Art of Expression"?</b><br><br> Nun wortwörtlich übersetzt heisst es Ausdruckskunst.<br> Achten Sie sich einmal und Sie werden feststellen, dass es sich überall um die Kunst des Ausdrucks dreht:<br><br> Wie drücke ich mich aus, damit ein Text oder meine Sprache klar und verständlich rüber kommt?<br><br> Wie verleiht man visueller oder zwischenmenschlicher Kommunikation Ausdruck, damit sie dementsprechend wirkt?<br><br> Wie lässt man Elemente einfliessen und welche, damit sich das Gewünschte realisieren lässt und den entsprechenden Ausdruck trägt und den Eindruck prägt?<br> <br><br> Letzten Endes spreche hier von der Schöpferkraft, die meiner Ansicht nach der Kreativität, die ihren Ausdruck sucht, zugrunde liegt.<br> Alles ist möglich. Diese Möglichkeiten, frei von Grenzen und Richtlinien finden sich in der Kreativität wieder und suchen ihren Weg sich auszudrücken. Beispielsweise umsetzbar in Bild und Ton via Webdesign und/oder im Produzieren von Musik und Audiofiles.<br> Gerne realisiere ich auch Ihre Wünsche bezüglich Webdesign und/oder Audio mit dem entsprechenden Know How.<br>Wie wollen Sie Ihrem Webauftritt Ausdruck verleihen?</br></span> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <script language="JavaScript">; <!-- function click(evt) { if (navigator.appName.indexOf("Microsoft") != -1){ if (event.button==2) { alert('Rechtsklicksperre'); return false }; }; if (navigator.appName.indexOf("Netscape") != -1) { if ( evt.which == 3 ) { alert('Rechtsklicksperre'); return false }; }; }; if (navigator.appName.indexOf("Netscape") != -1) { document.captureEvents( Event.MOUSEDOWN ) }; document.onmousedown = click; // --> </script> <div><center><a href="http://www.aoe123.lima-city.de/web08/startseite.html"><img src="http://www.xcounter.ch/counter.php?ID=28252" alt="Besucherzähler" border="0"></a></center></br> </p> </div> <a href="http://www.aoe123.lima-city.de/web08/startseite.html">nach oben</a><form><a href="javascript:window.print()"><img src="images/print.gif" align="right" width="20" height="16" border="0" alt=""></a></form> <!-- ende inhalt--> <!-- abstand nach unten - mehr oder weniger <br>--> <br> <!-- ende abstand nach unten--> </td><!-- abstand rechts vom inhalt--> <td width="30" ><img src="images/space.gif" width="30" height="1" border="0" alt=""></td><!-- ende abstand rechts vom inhalt--> </tr> </table><!--ende hauptinhaltstabelle--> </td> </tr> <tr> <td height="30" valign="bottom" align="center" ><table height="30" cellspacing="0" cellpadding="0" border="0" id="menu2" > <tr> <td>|<a href="http://www.aoe123.lima-city.de/web08/kontakt.html">Kontakt</a></td> <td>|<a href="http://www.aoe123.lima-city.de/web08/gb.html">Gästebuch</a></td> <td>|<a href="http://www.aoe123.lima-city.de/web08/impressum.html">Impressum</a></td> <td>|<a href="http://www.aoe123.lima-city.de/web08/dank.html">Danksagung</a></td> </tr> </table> <!-- ende menü --><br> </td> </tr> </table> </td> </tr> <tr> <td bgcolor="#89A9B8" height="30" align="center" style="border-top:solid 1px #89A9B8;border-left:solid 1px #89A9B8;border-right:solid 1px #89A9B8;border-bottom:solid 1px #89A9B8" > <span style="font-size:8pt;color:#FFFFFF;" >©2010 Art of Expression, R. Wüthrich - www.artofexpression.ch.vu</span></td> </tr> </table></td> </tr> </table> </div><!--Ende #content--> </body> </html>
und hier der css-code:
/* schriftstil,abstände */ body {margin-top: 10px; margin-left:6px; margin-right:6px;margin-bottom:10px; color: #000000; background-color:#ffffff; font-family: verdana,arial; font-size: 10pt;} html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #hintergrund { width: 100%; height: 100%; position: relative; z-index: 1; } #content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: auto; } #content2 { position: absolute; top: 0; left: 0; width: 0%; height: 0%; z-index: 3; overflow: absolute; } table,tr,td { color: #000000;font: normal 13px/18px helvetica,verdana, times, serif;} /* scrolleiste internet explorer ab vers.5.5 */ body {scrollbar-arrow-color: #CCE5FF; scrollbar-base-color: #B2CCE5; scrollbar-highlight-color : #7F7F7F; scrollbar-shadow-color : #7F7F7F; SCROLLBAR-TRACK-COLOR: #7F7F7F;} .logo {color:#FFFFFF; logo-position: center; height:0px; background: #CCE5FF url("images/logo.jpg") ; .hpname{ color:#FFFFFF; letter-spacing:0px } /* allgemeine links im text */ a:link{ color: #3399FF; text-decoration:underline; ;font-family: verdana; font-size: 10pt;} a:visited{color:#3399FF;text-decoration:underline;font-family: verdana; font-size: 10pt;} a:active{ color:#3399FF;text-decoration:underline;font-family: verdana; font-size: 10pt; } a:hover{ color: #89A9B8;background-color:white; text-decoration:none;font-family: verdana; font-size: 10pt; } /* menue oben */ #menu a {display: block; line-height:18px; background-color:#89A9B8; color:#ffffff; text-decoration:none ;font-family:verdana, sans-serif; font-size: 9pt; width:121px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;margin: 0px auto; } #menu a:visited{ line-height:18px; color:#ffffff; background-color:#89A9B8; text-decoration:none ;font-family:verdana, sans-serif; font-size:9pt; width:121px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;margin: 0px auto; } #menu a:active{ background-color:#89A9B8; color:#ffffff; text-decoration:none ;font-family:verdana, sans-serif; font-size: 9pt; width:121px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;margin: 0px auto; } #menu a:hover { background-color:#5E879B; color:white; text-decoration:none ;font-family:verdana, sans-serif; font-size: 9pt; width:121px; padding-left: 2px; padding-bottom: 2px; padding-top: 2px;margin: 0px auto; } /* menue ûnten */ #menu2 a { background-color:#89A9B8; color:#FFFFFF ; text-decoration:none ;font-family:verdana, sans-serif; font-size: 8pt; } #menu2 a:visited{background-color:#89A9B8; color:#FFFFFF;text-decoration:none;font-family:verdana, sans-serif; font-size: 8pt; } #menu2 a:active{background-color:#89A9B8; color:#FFFFFF;text-decoration:none;font-family:verdana, sans-serif; font-size: 8pt; } #menu2 a:hover {background-color:#7F7F7F;color:#ffffff;text-decoration:none ;font-family:verdana, sans-serif; font-size:8pt; }
Beitrag zuletzt geändert: 5.4.2010 22:44:53 von aoe123 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo Ketzer
Sorry, ich persönlich finde dieses Template (aus technischer Sicht) grauenhaft.
Für so ein Template sind keine Tabellen notwendig, außerdem stehen da sehr viele Formatierungen direkt im Quelltext.
Die müssten alle von Hand geändert werden wenn du eine andere Darstellung willst (z.B. wenn die Überschriften eine andere Farbe oder Schriftgröße haben sollen). Das ist also viel Arbeit.
Ich würde dir Raten dir ein Layout zu basteln, oder zu suchen das auf CSS beruht und Inhalt und Design ordentlich trennt.
Dann kannst du das Design deiner Seite Global steuern, hast einen übersichtlicheren Quelltext, und kürzere Ladezeiten.
Unter dem Strich hast du viel weniger Arbeit, weil du nur ein mal (im externen StyleSheet) festlegen musst wie deine Elemente (z.B. Überschrift) aussieht, und die Änderungen für alle Unterseiten übernommen werden.
Überlege dir das bevor du viel Arbeit in dieses Template steckst, da es auch weiterhin Aufwendige Wartungsarbeiten benötigen wird. In der selben Zeit in der man die Formatierungen dieses Templates sinnvoll auslagert, kann man auch ein neues Barrierefreies bauen
-
werktags schrieb:
Du erwartest sicherlich nicht, dass man den kompletten Code durchsucht?! Es wäre folglich besser einen Link zu der Fehlerseite zu posten mit einem Screenshot, wo die Fehler sichtbar sind.
Kannst also deinen Beitrag editieren…
@werktags:
http://www.aoe123.lima-city.de/gut.jpg <-> so wird es im internet explorer angezeigt und so sollte es in jedem gängigen browser angezeigt werden.
http://www.aoe123.lima-city.de/Bild2.jpg <-> so wird es im firefox angezeigt und so sollte es nicht angezeigt werden, da unvollständig, siehe menu und schrift davon.
@mich78:
wo finde ich solche templates oder wie bastle ich so eins (grundstruktur)? ich bin noch nicht soo fit in css.
-
Der Fehler liegt einfach in der Syntax:
Es gibt kein "logo-position" und es fehlt "}" und Null braucht keine Einheit….logo {color:#FFFFFF; logo-position: center; height:0px; background: #CCE5FF url("images/logo.jpg") ; -
Moin,
werktags hätte wohl gern, genau wie ich, deine Seite live gesehen. Mit entsprechenden Werkzeugen lassen sich Fehler online leichter finden. ;)
Laß deine Seite mal von W3C-Validatos prüfen. Das Ergebnis zeigt diverse, durchaus gravierende Fehler. Diese zu beseitigen solltest Du als erstes angehen. Wenn es danach noch immer Darstellungsfehler gibt, schauen wir weiter.
FF -
werktags schrieb:
Der Fehler liegt einfach in der Syntax:
Es gibt kein "logo-position" und es fehlt "}" und Null braucht keine Einheit….logo {color:#FFFFFF; logo-position: center; height:0px; background: #CCE5FF url("images/logo.jpg") ;
@werktags:
vielen dank für deine zeit, das hat geholfen! :-) -
aoe123 schrieb:
... ich bin noch nicht soo fit in css.
...
o ja, man merkt es
... hier => http://www.aoe123.lima-city.de/web08/startseite.html liegt noch 'ne Menge im Argen ...
der body-tag fehlt gänzlich, ist aber in diesem Fall wirklich zwingend notwendig, wegen Time- und Date-Script laden <body onload="window.setTimeout ('uhr()',1000);"> ... also da sind schon noch viele, viele Fehler ... wenn Du Dir beim Bearbeiten dieser gegebenen Grundlage wieder ein oder zwei weitere Fehler leistest, dann ist 's mit der Seiten-Interpreation gleich wieder dahin ... das Logo-Bild ist viel zu groß ... es geht auch anders
ich habe dieses (ohnehin schon fehlerhaft angebotene) Tabellen-Layout (wenn 's das sein soll) fix mal eben überarbeitet ... also die Tabellenstruktur insoweit beibehalten (Platzhalter-Zellen mittels spacer.gif entfernt, denn mit padding läßt sich der Content-Text genauso gut einrücken ^^) ... table, td mit Klassenzuweisung, was sehr hilfreich sein dürfte, denn in dem Fall lassen sich z.B. per table_format.css die Tabellen aller Seiten in einem Ruck anpassen / verändern ... die JavaScripts (sind ja einige) am besten auch auslagern
jo, und so schaut die Seite überarbeitet aus => http://ecollage.bplaced.net/test/startseite.html (auf bplaced gibt es z.Z. allerdings schon wieder Lade-Probleme ^^)
Beitrag zuletzt geändert: 6.4.2010 20:59:04 von abakus -
@mich78:
wo finde ich solche templates oder wie bastle ich so eins (grundstruktur)? ich bin noch nicht soo fit in css.
Eine gute Adresse für Templates ist z.B. http://www.freecsstemplates.org/.
Um ein handwerkich gutes Template von einem schlechtem zu unterscheiden muss man sich natürlich ein wenig in HTML und CSS auskennen.
Auf jeden Fall benötigt ein gut gemachtes Template keine Layout-Tabellen, und sollte den W3C-Test bestehen.
Zur Testseite: http://validator.w3.org/ (also valide sein)
Wenn du selbst Templates erstellen willst, dann musst du lernen mit HTML und CSS um zu gehen. Zu dem Thema gibt es tausende Seiten. Ich schicke dir mal ein bischen was per PN.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
