Tài liệu Einstieg in CSS- P9 doc

divé#nav a:hover, body#home li.navhome a, body#team li.navteam a, body#produkte li.navprodukte a, body#service li.navservice a, body#kontakt li.navkontakt a { background: urlimages/ta

Trang 1

22.2 Einfache Tab-Leiste mit Verlauf und Rollover

Bitte beachten Sie, dass bei dieser Losung, die rechtsbtindig an- geordnet sein soll, mit einem float nach rechts gearbeitet wird

Daher miissen Sie die Reihenfolge der Navigationspunkte umkeh- ren,

display: inline; list-style-type: none;

Die Textausrichtung nach rechts fallt bei dieser Variante weg, da —_ die Tabs mittels float rechtsbiindig ausgerichtet werden

weg und laBt so Platz ftir die iberstehende linke abgerundete Ecke des Tabs Der Wert flir margin-left legt die Abstande zwischen den Navigationspunkten fest Die Werte werden in em angegeben, damit die Navigationsleiste auch bei vergréRerter Schrift noch an-

Das Hintergrundbild ist ein sehr breites und hohes Kästchen — mit Verlauf und abgerundeten Ecken an der linken und rechten oberen Seite Da das Bild hier left und top angesetzt wird, ist die

abgerundete Ecke links sichtbar Durch die ibermabige Breite des Hintergrundbildes ist die abgerundete rechte Ecke nicht zu sehen

249 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 2

22 Navigieren mit Tabs

div#nav a span { display: block;

padding: 0.3em 1.4em 0.3em 0.5em;

background: url(images/tab_normal.gif) no-repeat right top;

Bitte beachten Sie, dass bei Inline-Elementen das padding nach oben und unten nicht funktioniert

Abnlich funktioniert die Ge- Die span-Elemente liegen innerhalb der Link-Elemente Bei die- staltung von abgerundeten ser Variante bilden erst die span-Elemente die eigentlichen Tabs BENGE CS CICTORUASCNSE: ype Anzeigeart wird daher auf block gesetzt, damit ein padding an

allen vier Seiten méglich ist Das Hintergrundbild (das gleiche wie

in den a-Elementen) wird nun rechts und oben angesetzt, um die rechte abgerundete Ecke sichtbar zu machen

divé#nav a:hover,

body#home li.navhome a, body#team li.navteam a,

body#produkte li.navprodukte a, body#service li.navservice a, body#kontakt li.navkontakt a {

background: url(images/tab_over.gif) no-repeat left top;

color: #FFFFFF;

font-weight: bold;

}

div#nav a:hover span,

body#home li.navhome a span, body#team li.navteam a span, body#produkte li.navprodukte a span, body#service li.navservice a span, body#kontakt li.navkontakt a span {

background: url(images/tab_over.gif) no-repeat right top;

color: #FFFFFF;

Ì

div#nav a:hover {font-weight: normal;}

Nun sollten auch die Einstellungen fiir aktive Navigationspunkte leicht nachzuvolliziehen sein: Die entsprechenden a-Elemente er-

_ 250

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 3

22.2 Einfache Tab-Leiste mit Verlauf und Rollover

halten das over-Bild links oben angelegt, die span-Elemente das gleiche Bild rechts oben Die Schrift wird fiir eine bessere Lesbar- keit beim Rollover-Effekt auf fett eingestellt Bei a:hover wird die Schriftstarke allerdings auf normale Schriftstarke festgelegt, damit die Navigationspunkte beim Rollover nicht »htipfen«

Unter der Lupe Auch diese Tab-Leiste eignet sich gut ftir den Fall, dass Schriften eroker dargestellt werden Hier der Beweis

Consectetuer adipiscing elit Sed gravida jaculis risus, Maecenas lectus eros,

eleifend bibendum, lobortis eget, consequat quis, tortor, Quisque lacinia

euismod nunc Suspendisse lobortis, massa a sollicitudin ultricies, eros felis eleifend risus, imperdiet vulputate est ligula at augue Duis vitae massa Duis vehicula purus Id lacus Morbi nibh Sed dolor felis, accumsan nec, luctus vitae,

adipiscing eu, nibh, Cras mi sem, tempor et, congue eget, tristique a, arcu Sed

mattis dul id mauris, Donec non elit ac metus congue commodo, Aenean nec

4 Abbildung 22.5 Layout 01 mit Nav2 (FF)

Suspendisse lobortis, massa 8 sollicitudin ultricies, eros felis eleifend risus, Imperdiet

vulputate est ligula at augue Duis vitae massa, Duis vehicula purus id lacus Morbi

nibh Sed dolor fells, accumsan nec, luctus vitae, adipiscing eu, nibh Cras mi sem,

tempor et, congue eget, tristique a, arcu, Sed mattis dui id mauris Donec non elit ac

metus congue commodo, Aenean nec mi Sed elit Vestibulum dul, 3 +4 Abbildung 226

Trang 4

22 Navigieren mit Tabs

22.3 Tab-Leiste mit Pfeil fiir Rollover

In dieser Variante erscheint beim Rollover ein kleiner Pfeil jeweils unter den aktiven Mentpunkt

Und so wird es aussehen:

Sed dolor felis, accumsan nec, luctus vitae, adipiscing eu, nibh Cras mi sem, tempor ot, congue eget, trestique a, aru Sed mattis dui id mauris, Donec non elk ac metus congue commodo, Aenean mec mi Sed elt Vestibulum dui

beliebige grafische Elemente

Trang 5

22.3 Tab-Leiste mit Pfeil fiir Rollover

Der CSS-Code Auch der CSS-Code ftir diese Variante ist sehr einfach nachzuvoll-

die Hohe der Grafikelemente

body#home li.navhome a,

body#service li.navservice a, body#kontakt li.navkontakt a { background: url(images/arrow_bottom.gif) no-repeat center bottom;

——

kleinen Bild in Form eines Pfeils hervorgehoben Damit dieser eine _—

content noch einen kleinen Abstand border-top in der Farbe des Pfeils

div#wrap_content {border-top: 2px solid #E3004F;}

253.—- Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 6

Abbildung 22.8 Layout 01 mit Nav3 (FF)

Abbildung 22.9 Layout 01 mit Nav3 (IE)

vehicula purus id lacus Morbi nibh Sed dolor felis, accumsan nec, luctus vitae, adipiscing eu, nibh Cras mi sem, tempor et, congue eget, tristique a, arcu Sed

mattis dui id mauris, Donec non elit ac metus congue commodo Aenean nec

Consectetuer adipiscing elit Sed gravida laculis risus Maecenas lectus eros, eleifend

bibendum, lovortis eget, consequat quis, tortor Quisque lacinia euismod nunc

Suspendisse lobortis, massa a sollicitudin ultricies, aros felis eleifend risus, imperdiet vulputate est ligula at augue Duls vitae massa Duis vehicula purus Id lacus Morbi nibh, Sed dolor felis, accumsan nec, luctus vitae, adipiscing eu, nibh Cras mi sem,

tempor et, congue eget, tristique a, arcu Sed mattis dui id mauris Donec non elit ac

metus congue commodo Aenean nec mi Sed elit Vestibulum dul

Trang 7

22.4 Anwendungsbeispiele fiir Tab-Navigation

macrabbit.com hat die Navi-

Get the latest Macka bbit Icons versehen

4 Abbildung 22.11

elegant erscheint die Naviga-

tionsleiste von cssvault

Trang 8

2 3 Vorlage #2: Zwei Spalten

Blogs Browse | 55 Tricks Joomla maw | Rowoblt TD:

: css Top Links h fe 1y

ae mambots —_

Der Klassiker unter den Weblayouts

Sie werden lernen,

>» wie Sie Meniis links oder rechts anordnen,

> wie Sie Menilisten gestalten konnen und

> wie Sie Ihren Besuchern erlauben, Stylesheets auszuwahlen

Trang 9

23 Vorlage #2: Zwei Spalten

Die tiberwiegende Zahl der Internetauftritte benutzt diesen Klassiker Besonders bei einfachen Content-Management-Systemen ist diese Lö- sung beliebt Aber auch hier gilt, dass ein schlichter Aufbau raffiniertes Design nicht ausschlieft

Menii links oder rechts?

Dass sich Mentis so hartnackig am linken Seitenrand behaupten, kommt meiner Ansicht nach daher, dass es in den ersten Jahren des Webdesigns (oder was wir damals darunter verstanden) tech- nisch gar keine andere Méglichkeit gab, als Mentis an der linken Seite anzuordnen Bis es dann andere Lésungen gab, existierten bereits so viele »linkslastige« Seiten im Web, dass viele meinten, das mlisse so sein und diese Tatsache nicht in Frage stellten Benutzerfreundlichkeit Prinzipiell kommen sich bei dieser Frage zwei sehr gegensätz-

Tp nhi it Aussagekraft von Studien nicht anzweifeln, andererseits die Grup-

pe jener, die lieber eigenen Erfahrungen glauben Erstere Gruppe stiitzt sich auf unzahlige Studien, die besagen, dass der neugierige Blick von Menschen im Allgemeinen und von Webbesuchern im Besonderen links oben an einer Seite verweilt, und ignoriert dabei geflissentlich die vielen Studien, die genau das Gegenteil festge- stellt haben wollen

Die zweite Gruppe hat bemerkt, dass die Handhabung von Meni etwas mit Ergonomie zu tun hat und verteidigt die Ansprủ- che von Rechts- und Linkshandern vehement

Ich lasse mich auf solche Diskussionen gar nicht erst ein Studi-

en hin, Erfahrung her- klar ist, dass ein Menii an der rechten Seite fiir Rechtshander praktischer ist Und wer damit nicht einverstan- den ist, der kann ja mithilfe von CSS seine Benutzer wahlen lassen,

wo das Ment erscheinen soll Womit sich also dieser »Glaubens- krieg« in Zeiten von CSS eriibrigt hat

Die hier vorgestellte Seitenvorlage werden Sie daher in zwei Varianten gestalten: Ment links und Ment rechts Nichts ist einfacher, als dies mittels CSS zu realisieren

_ 258

Trang 10

231 Meni rechts

23.1 Meni rechts

Und so wird es aussehen:

Consectetuer adipisorg elt Sed gravide Laculli ripus Maecenar lectus eros, elefend tebendurn, lobortis eovt, consequat aus, tortor Quetque leona euamod nunc Suspendese a

foborta, massa 2 colketudin utniaes, eros felis aletand nsus, inparcet vuloutae est beta Gemise

aw augue Outs yRae massa, Deis vehicula purus id lacus, Morbi nibh Sed dolor 4983, Tonaten —

accumsan nes, luctus vitae, adpiscing eu, nibh, Cras im som, tempor et, congue eget, Guten

UÍSUQ19 @, afc, SU Mats JỰ lỢ (ý CONES NON OR a metus (0/309 COMME, Aenean Sonn nec m Sed elt Vestibsum dui

4 Abbildung 23.1 Vorlage 02 mit Meni rechts

dig (FF)

Der HTML-Code Erstellen Sie bitte wieder eine Kopie des Ordners basislayout und nennen Sie diese layout2_2col Loschen Sie im HTML-Code die Container div#coll und divi#col2, da diese nicht bendtigt werden a Die einzige Anderung im HTML-Code, die Sie ftir diese Seitenvor-

lage vornehmen, ist eine Erweiterung des body um eine Klasse, um das Hervorheben von aktiven Meniipunkten testen zu können

Fiir die Navigation wird vorlaufig die Losung aus dem Basismodell — beibehalten Daher sind diesbeziiglich auch keine Anderungen im

CSS-Code vorgesehen

Der CSS-Code

Das div#menu wird zuerst mittels float an den rechten Rand posi- tioniert f loat verlangt width, daher erhalt div auch eine passen-

de Breite Die Listenpunkte werden entfernt Die zweite Ebene der Ment wird mittels text-indent noch weiter eingertickt

Trang 11

body#home.birnen div#menu 1i.birnen {

border-left: 8px solid #E3004F;

padding-left: 4px;

margin-left: -12px;

Die zusatzliche Klasse des body erlaubt nun die Hervorhebung des aktiven Mentipunktes ohne weitere Arbeit am Code Damit die Markierung auBerhalb der Liste liegt, wird hier ein negativer mar -

Urbshander | Pecttshander | Nav border | Menu setect

Obst Motel ((i(«Ceapa pep nese Seitenvorlage #02 ae aera a snap terete cb pumas gauss test aniats

| sm= Cong@ctstuee aóp(song sÉt Sed gravida inculis fous, Mavoenas hetus eros, eliifend Kwsen pbendn, lobortis eget, consequat ques, tortor, Quique laorma eussmod nunc Suipendisie | Gemáre nbortis, matea a toctedin utrises, aro: fobs eltand neut, meerdiot vulnutate act ous Tomaten + sugut Duss wie massa, Ourt veticule purus i lacus, Morbi nbh, Sed dolor fets,

Guiken keCud g nức, lCtuý vità9, ađipØ/10 @u, nibh, C/ 03 (9/ 32/7, tê@f00V 6, C0f5Qu0 636%,

Sa WsUQue @, a0, Sed Mantis Oui Nd Maura, Done? NOM GIR aC metus CONguE CONMNOIO Aarne

noc mi Sed elit Vestibulum dul

Trang 12

23.3 Ein einfacher Style-Switcher

Der HTML-Code Wieder werden die Vorteile von XHTML und CSS deutlich: Am HTML-Code muss gar nichts geandert werden, um das Layout

»umzudrehen« Es sind nur kleine Anderungen im CSS-Code er- forderlich

Der CSS-Code Der Container divitnav wird wieder linksbtindig ausgerichtet, das hei&t, text-align: right; wird entfernt und erhalt dementspre- chend einen Abstand padding-left Dies schaffen Sie nun bereits ohne Vorlage

div#menu { float: left;

width: 100px;

padding: 20px;

} div#maintext { margin: Opx Opx Opx 140px;

padding: 20px;

background: #FOFOFQ;

Wie Sie sehen, sind nur marginale Anderungen notwendig, um das Menii von rechts nach links zu versetzen Der Container div#menu wird anstatt right nunmehr left gefloatet, und dementspre- chend muss der Container divé#maintext an der linken Seite Platz | mitallzwiel Designauswahl

Nun ware es natiirlich eine feine Sache, kénnten Sie-wie ich | ine hohe Wiedererkennbar-

es schon angedeutet habe - Ihre Besucher zwischen diesen beiden _| keit erreichen Dem wider- Ausrichtungen der Seite wahlen lassen, ohne dartiber hinaus am | Spricht es, verschiedene De-

Vorsicht

23.3 Ein einfacher Style-Switcher

Die gute Nachricht: Sie muissen JavaScript nicht verstehen, um vier Zeilen Code zu kopieren Hier ausnahmsweise eine kurze Anleihe bei dieser einfachen Sprache

Trang 13

Der HTML-Code Ersetzen Sie bitte das 1ink-Tag zum Stylesheet styles.css im head Ihrer HTML-Datei durch den folgenden Code:

var StyleFile = "styles" + document.cookie.charAt(6) +

e css"s document writeln( "<link rel="stylesheet” type="text/css" href="" + StyleFile + '">');

</script>

Fiigen Sie vor dem Container div#nav einen Container div#switch

ein:

<a href="javascript: document cookie='style=l'; window

location reload();">Linksh&auml ;nder</a> |

<a href="javascript: document cookie="style=2'; window

</div>

Der CSS-Code Diesen einfachen Stylee Nun benennen Sie noch die CSS-Datei fiir Linkshander auf styles7

Switcher konnen Sie — css Um, erstellen eine Kopie und nennen diese styles2 css und an-

natch general Carve” der letztaresso ab, dass das Meni jetzt rechts liegt

wenden, unterschiedliche

Stylesheets, z.B fiir unter- In beiden Stylesheets fligen Sie noch eine kleine Erganzung flr schiedliche Monitorbreiten, den Container div#tswitch ein:

anzubieten

div#switch {text-align: right; padding-right: 20px;}

Fertig ist Ihr Style-Switcher!

262

Trang 14

23.4 Variante mit Navigation

J amen Censectaruer adipiscing obt Sed gravida iaculs risus Manconas lectus eros, eleifend

Kirschon bdendum, lobortis eget, consequat quis, tortor Quisque lacinia euismed nunc Suspendisse

Goniise lodortis, massa a solictudin ultnoes, eros fels elefend nius, enoerdiet vulputate est hgula |

Tomaten ST OUAUE, Duis wae Mosse OU veroule purus id lacus Morbi miDh Sed dolor felis, — Gurkon (2/1122 tục, ludtUz vka6, adipiscing eu, MDM, Cres ine com, SempOr et, congue eget

Seinat tristique a, arcu Sed mattis dul id mauns Donec non elit ac metus congue commodo _

4 Abbildung 23.3

eine Linkleiste, mit der andere Stylesheets gewahlt

Apnean tec mi Sed lt Vestibulum dui

23.4 Variante mit Navigation

Eine weitere, ganz einfache Variante fiir die Navigationsleiste be- dient sich der Eigenschaft border, um den aktiven Punkt hervor-

> 0m “gi, + ( ”

`

CSS BoxMania

a HOME TEAM PRODUKTE SURTICL KONTAKT

Obst Webhome Modell #02b

— 1M ốc

Benen Consectetuar adpiscny elt Sed gravida lacuhs msus, Maacenas lectus eros, eleterc —

Kirschen bbendum, lobortis eget, consequat quis, tortor Quisque lacinia euicmed nunc Suspendisse

Genise lobortis, Massa 4 Sollictudin ultricies, eros felis elefend risus, inperdiet vulputate est liguia —

Tomaten at augue Duis ntae massa, Ours yebvcula purus id lacus Morbi nvh Sed dolo: felis, Gurken 3(2/23% fxệc, lUŒQJ2 vka6, 340(2002 @u, NOH Cres Mme 220", tôf@of ot, congue eget, Seinat (retiaue 9, arou Sed mattis dui id mauris, Cones non elit ae metus CONgUE commodo

Apnean rac mi Sed elt, Vestiouium dul

4 Abbildung 23.4

Es gibt wohl so viele ldeen wie Designer, um das Problem mit der Navigation optisch zu lösen - selbst dann, wenn man hierzu nur CSS einsetzt

Trang 15

font-weight: bold;

text-transform: uppercase;

padding: 0.2em 0.4em Oem 0.6em;

border-left: 1.2em solid #FOFOFO;

} divé#nav a:hover, body#home li.navhome a, body#team li.navteam a,

body#produkte li.navprodukte a, body#service li.navservice a,

body#kontakt li.navkontakt a { border-left: 1.2em solid #E3004F;

Ein simpler Rand border-left erzeugt hier sowohl im normalen Status als auch bei a:hover und fiir den aktiven Navigationspunkt die Hervorhebung

Bom TEAM PRODUKTE SERVICE KONTAKT

"" ỒỒỒ Ốc

B ma Cạnsectetuer adpisong elt Sed gravida jacuks nsus, Maacenas lectus eros, eletencl Kirgehen bbendum, lobortis eget, consequat quis, tortor Quisque lacnia euicmed nunc Suspendisse Genise lobortis, massa a Sollictudn Ultnces, eros felis elefend risus, #T1perdiet vulputate est liguia

Tornaten at augue, Durs wtae massa Dues vebvoule purus lacus Morbi nibh Sed dolor felis,

Surken 3(2Un23% fxộ€, lUCQJ2 x29, 2dWIS0N2 GU, MDH Cres ny som, LompOr ot, congue eget, Spinat (rietaue 9, arcu Sed mattis dui id mauris Cones nan elit ac metas CONgUe commodo

AgN@an fac mi Sed elt, Vestioulum dul

Tiêu đề	Tài liệu Einstieg in CSS- P9 doc
Trường học	Unknown
Thể loại	tài liệu

Định dạng
Số trang	30
Dung lượng	5,35 MB