HTML and CSS Reference
In-Depth Information
Alternativ: doppelte CSS-Verweise im HTML-Code
Es gibt einen Trick, mit dem es sich am Anfang besser arbeiten lässt, vor allem dann,
wenn Sie nicht zwei komplett unterschiedliche CSS-Varianten pflegen und dazu noch
unterschiedliche Dateien in den jeweiligen Ansichten verwenden wollen.
Auch bei diesem Alternativvorschlag verwenden wir die oben genannten Verweise auf
die beiden CSS-Dateien. Allerdings sieht deren Inhalt nun anders aus. Für die Datei
portrait-style.css
verwenden Sie jetzt folgende Definitionen:
body { color: black;
background color: #ffffff;
font family: Arial;
font size: 12px;
}
#landscape {display:none}
Führen Sie hier die ID-Zuweisung
#landscape
ein, und definieren Sie im CSS, dass,
wenn diese ID im HTML-Code verwendet wird, dieser HTML-Code nicht angezeigt
werden soll. Genau das Gleiche, aber umgekehrt, machen Sie für die Datei
landscape-
style.css
:
body { color: white;
background color: #000000;
font family: Arial;
font size: 12px;
}
#portrait {display:none}
Dreht der Benutzer sein Telefon in die horizontale Richtung und wird die Datei
landscape-style.css
für die Darstellung benutzt, werden alle mit der ID
portrait
versehenen Elemente im HTML-Code nicht angezeigt. Auch der HTML-Code muss
etwas angepasst werden:
<html>
<head>
<title>Rotationsbeispiel</title>
...
</head>
<body>
<img id "portrait" src "stairs small.jpg" height "240" width "320"
alt "Hochformatbild" />
<img id "landscape" src "stairs normal.jpg" height "267" width "400"
alt "Querformatbild" />
</body>
</html>
Verwenden Sie einfach zwei
img
-Tags auf einer Seite. Ein Tag wird mit Sicherheit igno-
riert, da Sie das ja in den CSS-Definitionen festgeschrieben haben. Der Vorteil bei dieser
Variante liegt darin, dass Sie genau steuern können, welche HTML-Elemente in der
jeweiligen Ansicht sichtbar sein sollen und welche nicht.
