Curabaur Apfel hendrerit telbst Phavellas eu lectus Sedrutrumn venus leo Nedlaen welt Diss vel delor ext Benes tapett panda peetnen Abqaar red pusar quer gu gen đến trế@o Praerent aquet
Trang 141.2 Meni vertikal
Und so sieht es aus:
Loren iprum dolor sit amet, cossectetuer adipering elt Fusce grvada wrerra nibh Cum Obst focus natoque penatbus et magus des partuneet monies, aascetur ndicubns mas Curabaur Apfel
hendrerit telbst Phavellas eu lectus Sedrutrumn venus leo Nedlaen welt Diss vel delor ext Benes tapett panda peetnen Abqaar red pusar quer gu gen đến trế@o( Praerent aquet Egrehes
augue sẻ ametreque hh erm Morbs semper, magna mi pharetra pretum, sapien ipram Geeuase egestas est, nc rutrum neque neque id wague Nullaen fans condimentun kgula Curabetur tOcw+
ry | a ey ray ae ree ye ee ey ey ee ae ae Ø-¬- a VTR(€Z:_vWk£T6 fesnfar-emee cznotariaeernatxrgsaatesn vao zees BÃ | 49} | —— De
eke) Une arparsen.art
| bbnboi0/01401012140000000a06100/400) wcodcr
Lorem ipsum dolor st amet, consectetuer adipuscing it Fusce pranide vivern adh Cum
oc Raloqte penatbes et mages dé parturest mones, maxctur ridicubss mes, Curate hencherdt telber Phatefbrs eu lectus Seed ruteten warns leo Nelleen welt Due vet doko on Sagem gorcide pretin Abeqaum sed purws quis augur interchen tempor Pracsent aliquet gugus sk meat neque Ip enis Mors semper, magna in pharetra pretum, sapen ipsum epreas ext, son ners ceqe neque ij augue Nudes facdish condenennan ligula Cushing
div#footer auch unter das div#menu
Die Lésung scheint einfach zu sein Wir versehen den
div#footer mit einem clear:right; worauf dieser Container mit
seiner Oberkante an die Unterkante des gefloateten Elements auf- schliebt
125_— Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 2fesse team ache exe hosts
Loren iprum dolor st amet, cossectetuer adipercing ebt Fuse greada wesra nibh Cum Obs 20cHs natoque penatibus et magus cet partnent monies, sascetur idkcubis mut gabdur Apétt hendrent telbat Pharellat eu lectus Sedrutrum varws leo Nedlaenvelt, Dus vel delor ea Benes
tapers prada peetnen Abqaan ted puna quar augue wttrdas tempor Practent abquet Rgtchen augue sẻ aetbeque hh eram Morb semper, magna m sharetra pretam, iapien ippam Geessase
egestas est, ncn rutrum neque neque id sague Nullaen fakes condimentun kgula Curabitur Gutkes
Ø - ao VIRŒP% vC(&CT©€ (bsetarsss craesearaseom vatargasteen va =e bể [4a | 3X} ph
-Ư% ÿ` Lr#i rowrsen.gl
header
Lerten guu†n do sẻ me, (cóomssxclues =Íymsieng sẾ Tusce ganIa vvesse sebie Coss eee
$0GH mafoqgue penathen ct mages do partieiet mootes, stxctur ridicudes met Coro hendrerit tells Phasethes eu lectus Sed rutran varints leo, Nullam velt Duis vel dolor ex sapien pravida pret, Abpea sed purus quis smupst iterchen temper Pracient abquet augue sk mact oeque Io ens Morbi semper, magna in pharttra pret, sapen pram egesas est, 00 rutman peque neque dd augue Nulla fackws coodentum bpda Cush hot
Trang 341.2 Meni vertikal
nicht Das hier nicht sichtbare Problem ist, dass der Container
div#wrapcontent, der eigentlich div#maintext und divi#menu umhillen sollte, dies nicht tut Die zwei gefloateten Elemente be- eindrucken ihn Gberhaupt nicht, ja er ignoriert sie praktisch
Damit Sie sehen, wo die problematische Stelle ist, habe ich den CSS-Code ein klein wenig modifiziert, sodass Sie deutlich den
Container div#wrapcontent (nunmehr mit schwarzem Hinter-
grund) ausmachen kỏnnen
Der Container div#wrapcontent ist also nur so hoch wie div#maintext Das ist durchaus einleuchtend, wenn Sie sich an das Kapitel ber Positionierung erinnern Der Container div#maintext
ist jedenfalls nicht gefloatet, also ist auch das Eltern-Element div#wrapcontent so hoch wie div#maintext div#menu hingegen ist sehr wohl gefloatet und beeinflusst daher nicht die Hohe seines Eltern-Elements
bee team prodkkte sevice fontakt
Loreen gpm dolor af amet, contecteteer afipscang elt Foece gavcda veer Oba nibh Cum socies mtoque penativas et magus dis perturient monies, nascetur Apfel
sidicrdhon mam Cuasbiir hendrerlt tolkee Plhiselbis on lected Sed rutnen varies boo Banco
Gemase Gakes
Tomarcn Spear
Ein Container nimmt nicht automatisch die Höhe von
darin enthaltenen gefloa-
teten Elementen an
4 Abbildung 11.9
Ubung 05e (FF)
4 Abbildung 11.10
Ubung 05e (IE)
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark
127
Trang 411 Die Navigation
mbt Cam scat nateque penitbas et magni 4s partucent mortes, nascetur Ant |
nh côn tát Curabeur heedeert teu: Phasebus eu lector Sed rutrum varzat leo Benen
Euecken Gemuse
Tommutes Set
Abbildung 11.11
Ùbung 05f (FF) im IE weit-
Nun gibt es auch zu diesem heiklen Thema wieder eine Reihe von
Lésungen, Hacks, Diskussionsrunden bis hin zu »Glaubenskrie-
gen«, wie man dieses Problem beseitigen darf, soll oder muss Ich halte mich wieder einmal raus und wahle einen pragmatischen, aber daftir browserkompatiblen Weg
Platzieren Sie vor dem Ende-Tag des Containers div#wrap- content ein Element div der Klasse »def loat« (der Name ist will-
kiirlich gewahlt)
Der HTML-Code
</div><! END #maintext >
<div class="defloat"></div>
</div><! END #wrapcontent >
Und auch im Stylesheet wird eine winzige Anderung vorgenom- men
Der CSS-Code
.defloat ({clear: both; ]
Im Container div#footer kann die Angabe clear entfernt wer- den Das clear wird hier deshalb auf both gesetzt, damit die Klas-
se mehrfach verwendet werden kann In den meisten Fallen reicht
es, wenn beide float-Seiten angesprochen werden
128
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 511.2 Meni vertikal
Und nun passiert Erfreuliches:
nibh Cum socas natoque penabbus et magus chs partunent moates, narcetur Atel
home tem produkic service kQgdAMST
Lorem igium dolor st amet, consectetuer adipiscing eft Fince gravida viverra Obst nbb Cun sock: natoque penatibus ef magni dis patturient montes, nascetur Apfel thhcvÖu: quai Curabite hoxkoit tele Phases cu leon Sed neuen vehi hex Rarer
Kirsches
Garken Tomaten Spinat
Ja ist denn das erlaubt? Nun kann man nattirlich trefflich darủ-
ber diskutieren, ob das Einfiigen eines nicht strukturellen, ja sogar z2 ủberflủssigen Elements im HTAL-Code vertretbar ist — Meine Meinung ist: Ja! Bevor ich den CSS-Code mit unzumut- — baren Hack-Lỏsungen unủbersichtlich mache, ist es meiner An-
sicht nach doch besser, ein gủltiges, wenn auch leeres Element im HTML-Code einzuftigen Da dieser Trick nur selten erforderlich ist,
besteht auch keine Gefahr, ihn allzu oft einzusetzen
129 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 6Wer dies als nicht XHTML-konform ansieht, kann ja behaupten, er
wủrde am Ende des Containers div#wrapcontent unbedingt eine geheime Botschaft in Form eines h6 bendtigen
<h6 class="defloat*>End of Content Area</h6>
diese dann hinterhaltig ebenfalls mit einer Klasse »defloat« verbramen und im CSS-Code Folgendes hinterlassen:
h6.defloat { clear: both;
ket team prodhkte sevice kebhi
Lœen gan ok» t4 amet, contecteteer afpncey cht Poece geaucds wreera Oba
ib Cum socks mitoque penatioas et magss dis perturient monies, nascetu Apfel hes een Curshaur hearer teh: Phesclies os lect Sed rutesn varies le Raren
Trang 711.2 Meni vertikal
Vom strukturellen bzw semantischen Standpunkt aus kann man
nichts daran aussetzen, dass nach zwei Content-Elementen ein
Hinweis auf das Ende des Content-Bereichs folgt SchlieBlich ist auch nicht zu beftirchten, dass zukiinftige Browserversionen mit dieser Losung ein Problem haben werden Dennoch bevorzuge ich die erste Losung Daher wird diese auch in den weiteren Ubungen
eingesetzt
Hier die Seite noch einmal, so wie sie aussehen sollte: Der
schwarze Hintergrund von div#wrapcontent wurde entfernt, und die Breiten der beiden Inhalts-Boxen wurden wieder auf ihren ur- spriinglichen Wert gesetzt
Und so war es gedacht:
Trang 8Aber jetzt:
home team produkte geruce kontakt
Lerem sprum dolor sit umet, consectetuer adipiscing ebt Fuse gravida neerranbh Cum
socus natoque prnatbus et magnis dis partunent montes, sascetur ndeculus mus Curabitur
hendrent tellus Phatelis eu lectus, Sed rutrum varias leo,
Lorem ipsum dolor si amet, consectetuer adipiscing ct Fuse gravida viverra nibh Cun
Sociis natoque penatibus et magnis dis pesturient montes, nascetar ridicuhs mus, Curabhur hendrerit tellus Phasellus eu lectus Sed rutrum varius ko
Trang 911.3 font - Schriften benutzerfreundlich voreinstellen
html {height: 100.1%; font-size: 62.5%;}
body { text-align: center;
font-family: Verdana, sans-serif;
1 SchriftgröBen erscheinen unterschiedlich groB Und zwar un-
terschiedlich auf verschiedenen Bildschirmen, unter verschie-
denen Betriebssystemen sowie in verschiedenen Browsern
2 Schrifteigenschaften werden vererbt Definieren Sie also in einem Eltern-Element beispielsweise eine SchriftgroRe von 90%, so wird diese Eigenschaft auf ein darinliegendes Element vererbt Wird nun die SchriftgréRe im Kind-Element wiederum
mit 90% definiert, erhalt man tatsachlich eine Schrift, die 81%
(90% von 90%) der urspriinglichen Grobe entspricht
Pixelzahler wie ich kénnen bestens nachvollziehen, dass speziell die Tatsache der inkonsistenten Schriftgroken irgendwann einmal einen CSS-Designer an den Rand der Verzweiflung getrieben hat
Der bekannte Webentwickler Rich Rutter wollte es gar nicht so-
weit kommen lassen und verbrachte viel Zeit damit, fir das Pro-
blem eine akzeptable Losung zu finden
Als er das Ergebnis seinen staunenden Kollegen prasentierte, glaubten diese, ihren Augen nicht zu trauen: Eine Schriftgroke von
Persönlicher Schreibstil
Wie Sie bereits gelernt ha- ben, sind nicht nur einige Dinge beim Schreiben von CSS verboten, es sind auch viele erlaubt Ich empfeh-
le Einsteigern generell, lie-
ber etwas umstandlicher zu schreiben, als sich durch all-
zu viele Verkiirzungen, Grup- pierungen oder Ahnlichem das Nachvollziehen des eige- nen Codes zu erschweren
Wenn Sie CSS bald »blind«
schreiben kénnen, diirfen Sie
verkiirzen, soviel Sie wollen,
und Sie werden auch sicher ihren eigenen Schreibstil fiir CSS entwickeln
138.—- Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 10Schriften vergröRern
Mit den Tastenkombinatio-
nen [stra]-[+] únđ [Stra]-[-]
werden in den gảngigen Browsern die Schriften gré- Ker bzw kleiner dargestellt
Mit der Tastenkombina
tion [Strg]-[0) wird die Dar-
stellung wieder auf die ur- spriingliche Schriftgrébe gesetzt
Diese Voreinstellung wird in nun in das html-Element plat-
ziert
Das html-Element Das html-Element gilt als das oberste hierarchische Element einer Seite Es wird daher oft auch als Root-Element bezeichnet Ande-
re CSS-Experten widersprechen dem entschieden und lassen erst das body-Element als oberstes Element gelten
An dieser Stelle gibt es allerdings nicht viel zu diskutieren Denn laut den Webstandards ist html das Root-Element Zudem ist die Verwendung des html-Elements praktisch und erdffnet uns noch eine Ebene tiber dem body-Element Es erlaubt uns beispielsweise,
in diesem Fall Richards 62.5-Kniff dem html-Element zuzuweisen und die Schriftgrébe damit allen anderen Elementen der Seite zu vererben, denn diese befinden sich ja allesamt innerhalb des html- Elements
So weit, so gut, aber wer wird schon mit einer Schriftgrobe von etwa 10 px glticklich? Und vor allem, wer soll das entziffern? Nun, dieser Kniff ist ja nur daftir gedacht, dass Sie danach Schriftgréhen als ein Vielfaches von 10 px kalkulieren können Und das erfolgt auch gleich im body-Element
font-size, SchriftgréRen in em definieren Das W3C empfiehit eindringlich und im Sinne der Barrierefreiheit,
die Makeinheit em zu verwenden, um skalierbare Schriften zu er-
lauben Die Einheit em ist urspriinglich eine alte typographische MaBeinheit, deren Bedeutung sich allerdings geandert hat Heut- zutage entspricht em der Hohe einer Schrift
Der Wert lem ist also die Hohe einer Schrift, wie sie im Eltern-
Element definiert ist Ist keine Schriftgrobe festgelegt, so wird diejenige Schriftgréke herangezogen, die ftir den Browser des Be- nutzers voreingestellt ist Somit verhalt sich em immer relativ zu einer Voreinstellung, die entweder der Benutzer oder Sie in Ihrem Stylesheet definiert haben
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 1111.3 font - Schriften benutzerfreundlich voreinstellen
Im Fall lhres Stylesheets haben Sie so nun eine Voreinstellung im html-Element vorgenommen Wenn Sie jetzt ftir das body-Element die SchriftgröŠe auf 1.2em setzen (nicht vergessen: Punkt ftir die
Dezimalstelle!), so bedeutet dies, dass Sie 12 Pixel als Grobe aller
Schriften im body Ihres XHTML-Dokuments festlegen Gleichzeitig Ia erlauben Sie aber Ihren Benutzern, bei Bedarf die SchriftgréRen
in deren Browser gréber oder kleiner einzustellen, was beispiels- a weise ftir Menschen mit Sehschwachen unerlasslich ist Mehr zur
Anwendung von Mafeinheiten finden Sie in Kapitel 35
font-family Fir den Anfang gentigt es zu wissen, dass speziell ftir den Ein- Als Serifen (aus dem Fran- —
ren, meist sind diese serifenlos (sans-serif) Die gebrauchlichsten ae
Schriftfamilien sind dabei Verdana, Trebuchet MS, Tahoma und _ gtabenstriche
Georgia Mehr zum Einsatz von Schriften lesen Sie in Abschnitt — Serife Schriften werden
Lorem mit Serifen sit non amet
Trang 12Besteht der Name der Schriftfamilie aus mehr als einem Wort, so muss der
Name in Anfiihrungszeichen geschrieben werden
Beispiel:
font-family: “Trebuchet MS", sans-serif;
weist den Browser an, die Schrift Verdana zu wahlen, sofern diese
auf dem System des Benutzers vorhanden ist, andernfalls eine an-
dere serifenlose Schrift zu verwenden
line-height Somit ist es nur logisch, dass Sie auch die Zeilenhỏhe lhrer Texte
in der Einheit em definieren In diesem Fall entspricht die Anga-
be 2.0em etwa 20 Pixeln Das hat den Vorteil, dass sich auch die
Zeilenhohe relativ vergrofert, falls Besucher Ihrer Seite gröÊere Schrifteinstellungen verwenden Und so sieht es aus:
hone team pidukte sence kentabt
Lorem ipsum dolor sit amet, consectetuer adipiscing ol Fusce gravida viverra nibh, Cum Qbet
#9902 Natoque penatibus ot mognis de partunent montes, nescotur ridiulus mus, Apt!
Curabrur nendrert tellis Phasellus eu lectus Sed rutrum varius eo Birnen
Kirschen Gemuse Gusken Tomaten Sonat
home (sim produite serves kontakt
Lorem ipsum dolor st amet, consectetuer adipiscing alt, Fusce gravida viverra nh, Cum Quạt
3008 naloque peratibus et magnis dis partunent mortes, nascetur ndculus mus
Curabitur hendrert tellus Phasellus eu lectus Sed ruta vanus ino
doles Benen kráeheo Geran Gucken Tomaten Sonat
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 1311.4 background - Farben und Bilder als Hintergrund
Sie werden bemerken, dass sich hier durch die ersten Schriftein-
stellungen die Unterschiede in der Browserdarstellung etwas ver- ringert haben
Hintergrund
Wesentliches Gestaltungselement eines Internetauftritts sind Far- ben und Hintergrtinde Grundsatzlich gilt hierbei, dass fast jedes Element die Eigenschaften Hintergrundfarbe und Hintergrundbild ——
consectetuer adipisong elt Nem im mauris at mibh mols lodertis
Vestibulum ante osum primis in fauoDus ora luctus et ultnces posuere aby Curae; Sed tortor neque, matte quis, detum
vesbbulum, egestas ac, lous
Duis eget felis at ipcurn facilisis vestibuurn Curabitur urna augue POrttor Quis, Oncidunt vel, NonwMwny eu, Magna Suspendsse fringila Su£pefxó‹£:e freso8a metuc ut lectus Morbi collictudin
Qravida metus Curabitur vitae justo
Đallarreenue habitant morhi tristique saneehw et nghi et
malesuada lames ac turpr egestas Cras ullamcorper auctor mr
lai 0 Ủbung 07a (FF)
~-.— *~.-—<~ i es ee
one,
lhr erster Einsatz von Hintergrundbildern soll Ihre Webseite mit Vermeiden Sie allzu deutlich
einem eleganten Touch versehen Obwohl dies nun nach einer 8emusterte Hintergriinde
dramatischen Anderung aussieht, werden Sie bemerken, dass es unter Schriften! Auch fein = =» —
nur einiger weniger Anderungen im Stylesheet bedarf, um einer tesbarkeit von Schriften = bisher eher spartanischen Seite ein richtiges Design zuverleihen _ stark beeintrachtigen —
Der HTML-Code
Es sind keine Anderungen erforderlich Die dazugehdrige Ubungs- datei uebungO7a.htm finden Sie im Ordner uebung_07 und ist eine Kopie von uebung06c.htm
N3ÿ—- Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 1411 Die Navigation
Der CSS-Code Nachfolgend sind nur die geanderten Anweisungen bzw Passagen aufgezeigt Sind nur einzelne Deklarationen geandert, erscheinen diese fett
body { text-align: center;
font-family: Verdana, sans-serif;
font-size: 1.2em;
line-height: 1.8em;
color: #333333;
background: #9A0312 url(images/bg_leather.jpg);
Das body-Element erhalt eine passende Hintergrundfarbe zum Hintergrundbild Es sind keine weiteren Einstellungen notwendig; das Hintergrundbild wiederholt sich ber die gesamte Seite (Stan- dardeinstellung)
h1, h2, h3, h4, h5, hồ { font-family: "Century Gothic", sans-serif;
Beachten Sie bitte, dass die Werte fiir border-style von un-
terschiedlichen Browsern bzw Browser-Versionen oft sehr unter- schiedlich interpretiert werden
_— 138
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Trang 1511.4 background - Farben und Bilder als Hintergrund
Hier Beispiele flir die Werte dotted und dashed:
ORO ae H1341111)137 1/17) 2 J1 2121/12111</T 5 ual 1 r LÝ</ 22
N1
LISBMRNDOSIOOooocoo TĩHHNNERRBRBNẶNRBRBNẶRBSRSẶNNRNRBBRBRBNRNNẶNNNẶRNNĂNNĂBNRR
' : ii : : Wt a elit eget purus viverra volutpat Duis non ante Nulla semper arcu ac a
bi Peeters ti Mauris nec nibh Curabitur sagiths pretium mauns Vestibulum tempor a
` Ja ee fonsectetuer est Donec ipsum nisl, posuere ut, tincidunt vitae, porta luctus,
diam Class aptert taciti sociosqu ad litora torquent per conubia nostra, per incaptos himanaeos Suspendisse commodo congue nisi, Ut pellentesque "
a
BỊ
risus, Pellentesque ut quam, Ebam aliquam, ora at slementum egestas, sapien
' turpis consequat ora, at
aliquam purus augue sed elit
ù #4 | (ACs bowers > Parttemerurg ver Eementen
pellentesque arcu vel mauris, Morbi laoreet
| dementum egestas, sapien
| turpis consequat ora, at aliquam purus augue sed elit
\ : 4 tin trơng vn Ut 2 elit eget purus viverrs volutpat Duis non ante Nulla semper arcu ac e
| ee can mi, Mauris nec nibh Curabitur sagittis pretium mauris Vestibulum tempor
' ae : eat consectetuer est, Donec ipsum nisl, posuere ut, bncidunt vitae, porta e ' = Tin, s a mn luctus, diam, Class aptent taciti sociosqu ad litora torquent per conubia e [enna Ti nostra, per inceptos himenaeos Suspendisse commodo congue nisi, Ut
e
e tø@eeooeedede°doedeedeeeedeedeedeoeeedeee°e°e
sofgtuốn s, ae we Fac, Box 2 purus viverra yolutpat Duis non ante Nulla semper arcu ac
`" mi, Mauris nec nibh Curabitur sagittis pretium mauris, Vestioulum tempor ]
ee Ee ee tonsectetuer est Donec ipsum nisl, posuere ut, tincidunt vitae, porta luctus,
TH no diam Class aptert tacfti sœosqL! ad litora torquerit per cũnLihia nústrậ, her I Fisus: Pelentesque ut quam, incapbos himenasos Suspendisse commodo congue nisi, Ut pellentesque
Etam aliquam, ord at : jorcu vel mauris Morbi lacreet
slementum egestas, sapien '
aliquam purus augue sed elit