Unabhängig von der Programmierung sind die hinterlegten Grafiken sehr unsauber (Ränder usw.). Die Button sind ebenfalls selbst als Grafik zu stark komprimiert, so das die Artefakte sehr deutlich zu sehen sind. Auch da solltest Du noch etwas nachbessern.
Beiträge von yeti66
-
-
Probiere es mal so
Code
Alles anzeigen................... <div id="navigation"> <ul> <li> <a class="aktiv" href="#Beispiel">Dream-Night</a> <ul> <li><span class="aktiv">10. Dream-Night</span></li> <li><a href="#Beispiel">9. Dream-Night</a></li> </ul> </li> <li> <a href="#Beispiel">Auftritt/Kurse</a> </li>...........................statt <span class="aktiv">Dream-Night</span> in Deinem Code einfach durch <a class="aktiv" href="#Beispiel">Dream-Night</a> ersetzen und im css das span in span.aktiv löschen. Dann bist Du nach wie vor in der Lage die "aktiv"- Button zu formatieren.
-
Immer Liste ohne <p>.;)
-
Ich bin eben ein alter Sack, da hat man es lieber genauer!:D:D:D
-
Zitat
.....denn selbst ein generelles <span> in jedem Listenelement anstelle des Absatzes macht keinen Sinn, denn die Listenelemente selbst können ja mit CSS formatiert werden.
Das ist natürlich auch wieder wahr. Ich würde es ja auch nicht als Königsweg bezeichnen. Der direkte Weg über die Listenformatierung spart mit Sicherheit am Code und ist effektiver als alles anderen. Dafür war <p> in <li> auch eher als eine schnelle Lösung (Schnellschuß wie ich immer sage) zu sehen und am einfachsten anzuwenden. Ich würde auch eher annehmen das <p> in <li> in die Zukunft nicht mehr erlaubt ist. Die Gründe hast Du ja schon genannt und sind ja absolut stichhaltig. -
OK, warum nicht:
[9/10] Punkten
Positiv:
+ optisch sicher eine Augenweide
+ ...Negativ:
- eigentlich nichts
- ...Ausserdem wollte ich noch sagen dass...
Im Zusammenhang mit Angel und Himmel würde ich die "Lichtsäule" zum Himmel hin öffen (Wolken darüber entfernen). So als ob er gerade in der Säule herabsteigt (Engel/Lichtgestalt usw. würde ich hier wörtlich umsetzen).
-
Was verstehst Du unter "fertige Designs"? Hast Du ein grafisches Layout (Screen) und willst es in HTML umsetzen oder ein Template anzupassen und hochzuladen?
-
In einem muß ich Elvis ja zustimmen: innerlich sträubt man sich dagegen. Selber würde ich das auch anders umsetzen (etwa über <span></span> und über eine Klasse anständig je nach Bedarf formatieren). Aber hier ging es ja darum ob der Syntax generell falsch ist.
-
Ach ja? Wenn unter dem Link zu lesen ist: (p)
Zitat -
Ein Absatz innerhalb einer Liste ist absolut falsch!
OK, was ist absolut falsch? Laut http://www.onscreen.at/selfhtml/html/referenz/elemente.htm#p
darf p in li vorkommen,valide ist es auch
??? -
..mach`es nicht komplizert sondern einfach :
Code[COLOR=#000080]<ul>[/COLOR] [COLOR=#000080]<li><p>[/COLOR]Eins[COLOR=#000080]</p>[/COLOR][COLOR=#000080]</li>[/COLOR] [COLOR=#000080]<li>[/COLOR][COLOR=#000080]<p>[/COLOR]Zwei[COLOR=#000080]</p>[/COLOR][COLOR=#000080]</li>[/COLOR] [COLOR=#000080]<li>[/COLOR][COLOR=#000080]<p>[/COLOR]Drei[COLOR=#000080]</p>[/COLOR][COLOR=#000080]</li>[/COLOR] [COLOR=#000080]</ul>[/COLOR] -
Ich würde sagen Dir fehlt ein grundsätzliches Layout in Sachen Container.
Wrapper(Rahmen)
Kopf
Navigation
Inhalt
Footer
z.B. http://www.andreas-kalt.de/webdesign/tuto…ayout-erstellen
Wenn Du Deiner Navigation einen Container verpasst und Breite / Höhe / Position festlegst kannst Du Deine Navigation auch mittig anordnen.http://www.cssplay.co.uk/menus/simple_vertical_centered.html.
Diese Klappmenues sind nicht einfach für IE5.5 und IE6 umzusetzen und wenn ich mir Deinen Code ansehe bist Du auch noch nicht soweit. Für den Anfang würde ich sagen bedienst Du Dich bei Stu Nicholls und erfüllst seine Bedingungen (in der Regel eine Danksagung / Link o.ä. )Zitat1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a donation to the 'Support CSSplay' fund is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.. Das sollte man auch respektieren.
-
Das Problem ist und bleibt dem Browser etwas zum rechnen anzubieten. Das heißt die Tabelle vollständig zu formatieren (hier mit: line-height:1.5em;height:1.5em;). Das schränkt zwar etwas ein, mit der Formatierumg in em Werten sollte man aber damit leben können. Die <h1> Formatierung habe ich rausgenommen. Die Überschrift läßt sich aber wieder herstellen, in dem man die Zeile mit line-height:Xem;height:Xem; als Klasse festsetzt und die Überschrift entsprechend anpasst.
Das war übrigens auch der Sinn des "Style.Resets" erinnerst Du Dich (alles auf einen Standart setzen und dann akribisch alles formatieren)? -
Ok und hier nochmal für IE7/IE8,FF,Opera,Chrome und Safari:
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title>Stu Nicholls | CSSplay | CSS scrolling tables</title> <meta name="Author" content="Stu Nicholls"> <meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, table, scrolling, information, cells"> <meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS"> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="cache-control" content="no-cache"> <style type="text/css"> * {border: 0;margin: 0;padding: 0;} table tr {text-align: center;line-height:1.5em;height:1.5em;} html, body {background: #eee url(img/menu.png) no-repeat fixed 5px -230px;/*url(img/all.png)*/top: 0;left: 0;width: 100%;height: 100%;margin: 0;padding: 0;font-family: Arial, Helvetica;font-size: 12px;color: #000;overflow: hidden;} #inhalt {xborder: 1px solid red;position: absolute;top: 120px;left: 17em;right: 0;bottom: 25px;margin: 0;padding: 0;overflow: hidden;} thead {margin: 0;padding: 0;} .tableone {margin: 0;padding: 0;width: 100%;background: #697210;color: #fff;} .tabletwo {xborder: 3px solid green;margin: 0;width:100%;padding: 0 0 3em 0;} .tableone td, .tableone thead th {color: #fff;line-height:1.5em;height:1.5em;} .tableone tbody {color: #000;} .tabletwo td {background: #eee;color: #000;line-height:1.5em;height:1.5em;} .tabletwo tr.dk td {background: #ddd;color: #000;line-height:1.5em;height:1.5em;} #gebaeude_bauen {display: block;position: absolute;top: 7em;left:0;bottom: 0;width: 100%;overflow: auto;margin: 0;padding: 0;} thead {white-space:nowrap;} </style> </head> <body> <div id="inhalt"> <table class="tableone"> <thead> <tr class="kategorie"> <th>Arbeiter</th> <th>verfügbare Arbeitskräfte</th> <th>Energie</th> <th>Eisen</th> <th>Silizium</th> <th>Kohlenstoff</th> <th>Wasser</th> <th>Sauerstoff</th> <th>Wasserstoff</th> <th>Lagerstand</th> </tr> <tr> <td>30.000</td> <td>261</td> <td>35.587</td> <td>17.548.000.000</td> <td>19.824</td> <td>6.540</td> <td>654</td> <td>987</td> <td>98.785</td> <td>67 %</td> </tr> <tr> <td colspan="10">Gebäude errichten auf Planet "Kolonie 1" (555:555:A)</td> </tr> </thead> <tbody> <tr> <td colspan="10"><div id="gebaeude_bauen"> <table class="tabletwo"> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td><span class="fehler_res">300</span></td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie haben leider nicht genügend Rohstoffe um dieses Gebäude auszubauen.</td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9" class="fehler_bauauftrag">Sie können dieses Gebäude nicht ausbauen, da Sie nach dem Ausbau nicht mehr ausreichend Energie für ein Wohngebäude und nicht mehr ausreichend freie Bevölkerung für einen Solarpark haben.</td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> <tr class="kategorie"> <th colspan="9">Gebäude</th> </tr> <tr> <td>Bauzeit</td> <td>Bevölkerung</td> <td>Energie</td> <td>Eisen</td> <td>Silizium</td> <td>Kohlenstoff</td> <td>Wasser</td> <td>Sauerstoff</td> <td>Wasserstoff</td> </tr> <tr> <td>11:11:11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> </tr> <tr class="bau_auftrag"> <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td> </tr> </table> </div></td> </tr> </tbody> </table> </div> </body> </html> -
tja für FF,Opera und Co. würde
Code.tabletwo { xborder: 3px solid green; [COLOR=Red]width:100%;[/COLOR] margin: 0; padding: 0 0 3em 0; }reichen. Das zerschießt aber im IE das Layout. P.S. Die zweite Tabelle/2.Tabellencode siehe oben.
-
zu Tobse: Das mit den 3e war auch eher ironisch gemeint. Hast Du schon mal die Feuerzangenbowle gesehen? Sicher doch mit "Pfeiffer mit 3f".
zu Darknesss: Klar wenn man lange genug sucht findet man auch was bei mir
! Und das mit der Rechtschreibung ist immer so eine Sache, leider geht es im Forum schon bis zur Unkenntlichkeit. Besser wäre es man hätte sich mit Kryptologie befasst dann könnte man einige Beiträge besser lesen. -
Oje #Darknesss mit 3s. Wenn ich mir so deine Rechtschreibung ansehe wäre es vielleicht besser etwas zeitiger zu Bett zu gehen und in der Schule munter zuhören was die Tante Leherin da vorne zu sagen hat.
-
Wenn Du Dir den Code ansiehst erkennst Du auch den Grund. Die Tabelle, die ich Dir angepasst habe ist etwas anders codiert. Lass das mit dem overflow in #inhalt und setz einfach die Tabelle rein. Noch ein paar Anpassungen mit Deinen Klassen und dann kann man na die Höhe durch JS denken, wenn es auch zu als Dreingabe zu sehen ist. Ich schtze 90% aller User habe eh´JS eingeschaltet. Die wenigsten kümmern sich darum.
-
Nein darauf vertrauen kann man nicht, das ist wahr. War ja auch nur ´ne Möglichkeit. Ich würde an Deiner Stelle von einer "Durchschnittsfensterhöhe" ausgehen. Bei einer Annahme der Bildschirmgröße von 1024x768 ist man da doch gut bedient.
-
Ja um das Lernen von HTML und Co. kommst Du nicht herum. Da hat #bandit600 recht. Sonst wird das hier ein Fulltimejob dir zu sagen was Du tun sollst. Das ist ja auch nicht der Sinn eines Forums. Erst selber nachlesen und wenn dann Zusammenhänge nicht klar sind kann man fragen.
