[Suche] Codinghilfe für meine Page

  • Ersteller Ersteller Togul
  • Erstellt am Erstellt am
ich hab heute gerade null zeit, weil ich ne präsentation für übermorgen machen muss, aber vom schnellen überfliegen:

Keine tabellen, wenns geht, also statt:
<table width="780">
<tr>
<td>headerflash</td>
</tr>
</table>

geht auch einfach:

<div style="width:780px;">headerflash</div>


styles sinnvoller:

Wenn du zb sehr viele <span> elemente hast in einem abschnitt vom selben typ (zb 20 menüeinträge sind ein <span class="menustil">), kannst Du ein DIV drumlegen und dann den spans innerhalb des divs automatisch die eigenschaften von menustil geben. dadurch steht im code dann statt:

<span class="menustil">menu1</span> <span class="menustil">menu2</span>
<span class="menustil">menu3</span> <span class="menustil">menu4</span>
<span class="menustil">menu5</span> <span class="menustil">menu6</span>
<span class="menustil">menu7</span> <span class="menustil">menu8</span>
<span class="menustil">menu9</span>

nur noch

<div id="menu">
<span>menu1</span> <span>menu2</span> <span>menu3</span>
<span>menu4</span> <span>menu5</span> <span>menu6</span>
<span>menu7</span> <span>menu8</span> <span>menu9</span>
</div>

im grunde muss einfach jegliche formatierung raus aus dem code und auch sowenig classen wie möglich (wenn 8 von 10 tags die selbe klasse haben, setzt man die werte als standard für das tag und benutzt dann nur eine xtraklasse für die 2 aussreißer). Dann hast Du am Ende einen sehr schlanken Code. Ich schätze, man könnte deinen html-code locker halbieren, ohne das sich das design ändern würde.
Auf Deiner Seite sind jedenfalls vielzuviele tabellen und classen + zuviele veraltete html-formatierungen (background= align= width= valign= usw)

Übrigens läuft die seite im quirks-mode zur Zeit. Dann wird das Div-positionieren etwas mühsamer.
 
quirks? noch nie gehört o_O

Aber danke schonmal, ich schaus nochmal durch :O

€dit: gerade gegoogeld und herausgefunden was es ist :P was fürn doctype hab ich im prinzip? html 4.01?
 
Der Quirks Mode ist nicht von grund aus schlecht, er bringt halt nur den ein oder anderen Nachteil (manche Dinge funktionieren anders, manche gar nicht, manche nur damit). Ein großes Problem ist halt das falsche Box-Modell, dass ein modernes DIV-Design zu pain-in-the-ass macht.

http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch

Der Mode ist halt für alte Seiten gemacht, aber wenn man neue Designs macht, sollte man im eigenen Interesse den Standard-compliant Modus nehmen. Da Du keine DIVs positionierst im moment, ist das weitgehend irrelevant, denke ich.

Was für einen DOCTyp Du nun wählst, wenn Du denn einen wählen willst, hängt davon ab. strict fällt wohl aus, weil du sehr viele veraltete attribute benutzt (background etc), also eher transitional. Bei einem redesign ist halt strict prima, um ein sauberes CSS Design zu zaubern. im Moment wäre glaub auch HTML 4.01 besser.

Bei was neuem ist XHTML zu bevorzugen (schneller, kann für allerlei zeug verwendet werden), aber man muss dabei viele regeln beachten. zum Beispiel muss man Tags immer schließen oder bei tags <img /> eben das / ans ende und grosskleinschreibung ist wichtig, man muss immer checked="checked" statt checked schreiben und attributwerte immer in anführungszeichen. Im allgemeinen benutzt man hier immer nur strict, weils eben state of the art ist.

also im moment bist du mit html 4.01 transitional gut beraten, wenn Du denn einen wählen willst. Und das ist eben ratsam, wenn Du die tabellen durch DIVs ersetzen willst, denn sonst ist eine Box {width: 700px; border:2px; padding:4px;} im IE 700pixel breit und im FF 712pixel. Das nervt dann natürlich tierisch, wenn man damit positionieren will.
 
ich glaub, da muss ich mir hilfe suchen :D

kenne mich mit div's garnicht aus, ehrlich gesagt gegen 0 :P

ich arbeite meist nur mit Codeschnippseln + Dreamviewer Designer Mode :D
 
Mir ist gerade aufgefallen, dass ich seit dem Div mit der Shoutbox keinen Scrollleiste der normalen Seite im IE habe. Sie ist sozusagen im IE unbrauchbar.

Außerdem schiebt der IE die Shoutbox hinter das Flash. Nur der Firefox Browser macht alles richtig. Wie kriegt ich das kompatibel?
 
für den IE musst Du noch das content DIV einbauen.


<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div align="center">
<div id="content">
<table width="786" border="0" align="center" bordercolor="#999999">


</table>
</center> <--- das wird nirgends geöffnet, oder?
</div>
</div>

zwischen Seitencode und Shoutbox sind übrigens schließende html/body tags.


was das DIV über dem flash angeht, das ist auch so ne sache mit dem IE. Das kann man fixen, wenn ich mich recht erinnere, indem man den objectcode anpasst... like this:
zusützliches param tag neben den existierenden <param name="wmode" value="transparent">
im EMBED Tag den Parameter wmode="transparent" hinzufügen.


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="143">
<param name="movie" value="http://www.meibaum.net/2.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="http://www.meibaum.net/2.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="143"></embed>
</object>
 
ok, da ich zum glück erst spät vorlesung hab und nicht arbeiten muss, hab ich die letzte stunde mal zum test dein design etwas entrümpelt. Wollte mal sehen, ob der code wirklich merklich schrumpt. Tut er. Die originalversion gespeichert ist 29kb groß, meine 13kb inklusive alle stylesheets (2kb). Eine 1zu1 Nachbildung wäre nicht sehr viel größer - also die Halbierung des codes war realistisch geschätzt.

http://www.mc.cirikovic.de/ie7/togul_x.htm

Ist nicht gerade berauschender Code, weil ich das schnell hingeschludert hab, aber vieleicht hilft dir das ja, um den unterschied zu verstehen. 2 tabellen sind auch noch drin (keine zeit jetzt für positionierung und die eine ist für news halt wohl notwendig).


Davon abgesehen ist das aber sowieso nicht mein Spezialgebiet. Weiss auch nur, was so hängenbleibt, wenn ich zb für ne dicke Application eine UI-Integration in ein Portal mache. Da schöpft man bei weitem nicht die Tricks aus, die echte Webdesigner drauf haben. Interessantes Thema aber allemal ;)
 
super danke :)

jetzt muss ich sozusagen nurnoch den content den ich dynamisch drin hatte (z.B. das Newsscript - damit ich halt nichtnur von zu hause schreiben kann) includen, oder? So wie du das geschrieben hast, sehe ich in DW aber "nur" Divs ohne Inhalt, bzw. schon mit inhalt aber ohne Bilder etc. verknüfpungen.
 
Togul schrieb:
jetzt muss ich sozusagen nurnoch den content den ich dynamisch drin hatte (z.B. das Newsscript - damit ich halt nichtnur von zu hause schreiben kann) includen, oder?
Zum Vergrößern anklicken....
naja... theoretisch ja. ich weiss nicht, wie die scripte funktionieren. Ich geh mal davon aus, dass Dein Newsscript diese Newstabelle komplett erzeugt, dann muss man dessen Ausgabe optimieren/anpassen. Aber wie gesagt, das war nur schnell hingeschludert und scheint mir nicht wirklich robust. Wollte nur zeigen, dass man den Code deutlich schlanker basteln kann.

So wie du das geschrieben hast, sehe ich in DW aber "nur" Divs ohne Inhalt, bzw. schon mit inhalt aber ohne Bilder etc. verknüfpungen.
Zum Vergrößern anklicken....

mein DW zeigt die seite normal an. Die Pfade müssen halt stimmen, also im stylesheet teil die urls anpassen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben