Willkommen in der Webstatt
User-1 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 xyz-49[/COLOR]: stickied :) macht was draus.

netcup.de Warum gibt es hier Werbung?
User-1 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.

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

User-3 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;)

User-4 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

User-5 am 09.01.07 22:26

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

~> xHTML - Eine kleine Einführung

User-1 am 03.02.07 12:56

[SIZE=20]Validatoren[/SIZE]
lasst euer html und css beim xyz-231 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