Willkommen in der Webstatt Zum Webstatt Blog und Stories
fish fish am 07.01.07 14: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.

[COLOR=red]edit by danieL[/COLOR]: stickied :) macht was draus.

netcup.de Warum gibt es hier Werbung?
fish fish am 07.01.07 14:54

[SIZE=20]Youtube Videos valide einbinden[/SIZE]
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.

Al3x0r Al3x0r am 07.01.07 15:24

[SIZE=20]Globale Definitionen[/SIZE]

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;
}

der_nic der_nic am 07.01.07 18:54

[SIZE=16]Flashmovies bei IE7 einbinden[/SIZE]

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 damit;)

Chrisber am 09.01.07 14:02

[SIZE=16]Wieso font-family anstatt font?[/SIZE]

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

Franky Franky am 09.01.07 22:26

Zwar nicht wirklich ein "Codeschnipsel", sollte aber trotzdem jeder mal gelesen haben:

~> xHTML - Eine kleine Einführung

fish fish am 03.02.07 12:56

[SIZE=20]Validatoren[/SIZE]
lasst euer html und css beim w3c prüfen.
prüft euere seite auf zugänglichkeit
prüft euere links.
lasst die inhaltliche gliederung eurer seite überprüfen



[SIZE=20]Schrift[/SIZE]
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;



[SIZE=20]Hintergrund[/SIZE]
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;

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt