Webstatt.org - Community seit 2006 - 2012 (2024?)

XHTML/CSS Tricks und Tipps Fibel

Avatar user-180
07.01.2007 13:45
Nachdem die Fibel für PHP recht erfolgreich läuft, lade ich euch ein ähnliches auch zum Thema XHTML/CSS zu sammeln.

In diesem Thread werden alle Tipps und Tricks zum Thema XHTML/CSS gesammelt. Jeder darf sich daran beteiligen.

Dazu jedoch einige Regeln:

[list=1]
  • Nur ein Tipp pro Beitrag
  • Genaue Erklärung zur Funktionsweise
  • Effekt / Vorteil des Tipps / Tricks nennen
  • Übersichlich schreiben
  • Code hervorheben
    • [/list=1]

    Sollten Beiträge nicht wie gewünscht aussehen, so wird der Autor per PN angeschrieben. So wird er PN auf den Fehler (etc) hingewiesen.
    Der Autor sollte dann seinen Beitrag ändern oder ihn löschen lassen.

    edit by user-159: stickied lächeln macht was draus.
    may the force be with you. but mostly with me.
    Avatar user-180
    07.01.2007 13:54
    Youtube Videos valide einbinden
    youtube bietet an, die dort gefundenen videos in die eigene Webseite einzubinden. Problem: zum einbinden wird ein invalider code angeboten. wers "richtig" machen will, der bindet die videos so ein:

    
<object  type="application/x-shockwave-flash" 
    
  style="width:425px; height:350px" 
    
  data="http://www.youtube.com/v/YOUTUB_ID">
    
  <param name="movie" 
    
    value="http://www.youtube.com/v/YOUTUBE_ID" />
    
</object>


    man kann die videos auch kleiner oder größer darstellen, dazu einfach die breite und die höhe verändern. um das video nicht zu verzerren, am besten bede werte um den gleichen faktor verändern. funtioniert allerdings mit dem ie7 nicht richtig.
    may the force be with you. but mostly with me.
    Avatar user-118
    07.01.2007 14:24
    Globale Definitionen

    Es ist zu empfehlen sämtliche browserseitigen Defaultwerte (padding und margin) global auf einen Einheitswert (0) zu setzen:

    * { padding:0; margin:0; }


    Mit diesem Code verhinderst du das Fragen auftauchen wie Wieso ist der Abstand im IE größer als im FF ?.

    Mein CSS Prolog sieht bspw.: so aus:

    * { 
    
		padding: 0; 
    
		margin: 0; 
    
		border: 0; 
    
} 
    

    
html, body { 
    
		height:100%;
    
		color :#000; 
    
		background: #FFF; 
    
		line-height: 1.45; 
    
}
    

    
body { 
    
		font: 0.8em/150% "Lucida Grande", verdana, arial, helvetica, sans-serif; 
    
}
    Ich brauche keine Signatur
    Avatar user-162
    07.01.2007 17:54
    Flashmovies bei IE7 einbinden

    Bei IE7 (und FF2 glaube ich auch ?!) werden Flashmovies nicht direkt aktiv, sondern der User muss zuerst einmal auf die Filmfläche klicken, damit der laufen kann. Das kann u.U. Verwirrungen beim User hervorrufen, wenn man zB. bei der Navigation 2mal klicken muss bis die gewünschte Seite erscheint.

    Die (bis jetzt) beste Lösung dafür ist mittels Javascript den Film nachträglich einzubinden. Der Nachteil: der User muss JS aktivieren. Dafür ist das Ganze valides XHTML strict.
    Langer Rede kurzer Sinn: wenn man Flashmovies einbinden will nimmt man am besten swfObject.

    Hier der Link zum Original auf Englisch

    und hier der Link zur deutschen Übersetzung

    viel Spass damitzwinkern
    Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
    user-149
    09.01.2007 13:02
    Wieso font-family anstatt font?

    Warum sollte ich beim CSS nicht den font-Tag benutzen, sondern das font-familiy?
    Ganz einfach: Es gibt einige Leute, die nicht alle Schriftarten auf dem PC haben wie du.
    Wenn du z.B. auf einer FontSeite einen Font gedownloadet hast, der selten ist, wird dieser im Browser nicht angezeigt und stattdessen die Standardschrift; meistens Times New Roman.

    Deshalb immer font-family benutzen, hier ein kleines Beispiel:

    
body {
    
 color: #000000;
    
 font-family: NeuropolXFree, Neuropol, Pricedown, Arial, Verdana, Georgie, sans-serif, Times New Roman;
    
 font-size: 12px;
    
}


    EDIT:
    Da es einigen nicht klar ist, wovon ich spreche, hier ein Beispiel:
    <font face="NeuropolXFree">Text</font>

    Bei diesem unsauberen Code würde in jedem Fall, wenn es diese Schriftart auf dem PC nicht gibt, die Standardschriftart aus dem Browser genommen werden.

    Hoffe es ist jetzt klar :O
    Avatar user-182
    09.01.2007 21:26
    Zwar nicht wirklich ein "Codeschnipsel", sollte aber trotzdem jeder mal gelesen haben:

    ~> xHTML - Eine kleine Einführung
    Seid ihr auch schon wix'r? xD
    Avatar user-180
    03.02.2007 11:56
    Validatoren
    lasst euer html und css beim user-341 prüfen.
    prüft euere seite auf zugänglichkeit
    prüft euere links.
    lasst die inhaltliche gliederung eurer seite überprüfen



    Schrift
    in css gibt kann man font-family und font-size zusammenlegen. schriftarten, deren namen aus mehr als einem wort bestehen sollten in anführungszeichen geschrieben und durch kommata getrennt werden.
    font: 12px Georgia, "Times New Roman", "Courier New", Verdana;




    Hintergrund
    oft gesehen, aber nicht mehr notwendig: background-image und background-color. lässt sich beides mit background erledigen. auch hintergrundbild und eine hintergrundfarbe gleichzeitig sind möglich.
    background: url(images/bg.gif) top left repeat-x #000;
    may the force be with you. but mostly with me.