1. Trang chủ
  2. » Công Nghệ Thông Tin

Tài liệu Einstieg in CSS- P4 ppt

30 281 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Tài liệu Einstieg in CSS- P4 ppt
Trường học Unknown
Chuyên ngành Unknown
Thể loại lecture notes
Năm xuất bản Unknown
Thành phố Unknown
Định dạng
Số trang 30
Dung lượng 5,57 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

Im Ernst - die wesentlichen Eigenschaften eines Block-Level-Elements sind auf vier Seiten anwendbar: oben, —9%4 Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm

Trang 1

8 Die drei Saulen von CSS: 2 Das Boxmodell

Und hier die unterschiedliche Darstellung:

Boxmodell Test, - Mozilla Firefox

Das Boxmodell erstreckt sich

fuer auf eine cichthare Breite von

240 Pzel und eme tatsachlche Breste des Contamme-Blockes von 280 Piel

Abbildung 8.4 >

Box modell in FF Version 7

zeit dieses Betspiel

Sie können sich also vorstellen, dass diese unterschiedliche Berech-

nung des Boxmodells in heiklen Fallen einiges Kopfzerbrechen ver-

ursachen kann Dieses Problem wird besonders dann deutlich, wenn

solche div-Elemente genau mit Layoutgrafiken passen miissen

Weiter wollen wir uns an dieser Stelle aber mit diesem Problem nicht aufhalten Wie man auch den IE 5 von unseren Absichten

beim Boxmodell Uberzeugt, lesen Sie in Abschnitt 33.5

Verkiirzte Schreibweise von Werten im Boxmodell

Eine Box hat vier Seiten Das hatten Sie allerdings auch ohne dieses Buch gewusst Im Ernst - die wesentlichen Eigenschaften

eines Block-Level-Elements sind auf vier Seiten anwendbar: oben,

—9%4

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

Trang 2

81 Die drei Saulen von CSS: 2 Das Boxmodell

rechts, unten, links Besser merken Sie sich dies gleich auf Englisch, denn nur so findet es in CSS Anwendung: top, right, bottom, left

Obwohl verktirzte Schreibweisen bereits erklart wurden, hier

wendung kommen:

> margin padding border-width border-color border-style

Nachdem einer der Griinde fiir den Einsatz von CSS die Spar- _ Eine Eselsbriicke fiir Top,

touille« auch gefunden:

Twelve Rats Boiling Linguini div#test {margin: 10px 20px 10px 15px;}

Bitte beachten Sie, dass die Reihenfolge an dieser Stelle zwingend

erforderlich ist, namlich eben top, right, bottom, left

Verkiirzung auf drei Werte Neben der Verktirzung auf vier Werte gibt es auch die Option, nur drei Werte zu notieren Dann ist der nicht angeftihrte Wert gleich dem gegentiberliegenden angefthrten Wert:

điv#test (margin: 10px 20px 15px; }

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

95.

Trang 3

8 Die drei Saulenvon CSS: 2 Das Boxmodell

Der hier fehlende vierte Wert (fiir left) entspricht dem gegen-

liberliegendem, namlich dem zweiten Wert mit 20px (flir right)

Diese Verktirzung verwende ich nur auferst selten (wenn tiber- haupt), daich sie fir untibersichtlich halte und die Ersparnis mar- ginal ist

Verkiirzung auf zwei Werte Werden nur zwei Werte angefthrt, so gelten diese jeweils auch ftir die gegentiberliegende Seite Der erste Wert steht also flr top und

bottom, der zweite fiir right und left:

div#test {border-color: #FFFFFF #000000;}

Die Rahmenfarbe ist oben und unten Weil (#FFFFFF), links und

rechts dagegen Schwarz (#000000)

Verkiirzung auf einen Wert Wird nur ein Wert notiert, so gilt dieser ftir alle vier Seiten des Elements:

div#test {border-style: solid;}

Der Linienstil des Rahmens ist auf allen vier Seiten »durchgehend«

(solid)

8.2 display - Element-Anzeige ảndern

Wie schon vorher erwahnt, kann man die Anzeigeart eines Ele-

ments andern, und zwar mit der Eigenschaft display

Immer wieder hére ich die Frage, ob man Element-Typen un- gestraft andern darf Die Antwort ist Jein Die Eigenschaft display

erlaubt es, das Aussehen eines Elements zu andern Sie konnen

also mit der Anweisung

div#menu {display: inline;}

eine Mentibox wie ein Inline-Element aussehen lassen

Ich kann Ihnen nur empfehlen, die Eigenschaft display zum

Andern von Element-Eigenschaften mit Bedacht und auBerst spar- sam anzuwenden Es kénnte Ihnen sonst passieren, dass Sie nicht

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

Trang 4

8.2 display - Element-Anzeige andern

mehr wissen, welche Eigenschaften letztendlich bei den Elemen- ten wirksam sind

Die Ausnahmen

Es ist gingige Praxis, das Element list-item fiir Navigationsleisten

zu verwenden und diese von vertikal auf horizontal zu andern,

indem man den Element-Typ andert:

divé#nav 11 {display: inline;}

Das hat sich durchgesetzt, weil die Verwendung von Listen fur die Navigation viele Vorteile hat und Listen zudem als strukturelle Ele- mente anderen Elementen gegentiber vorzuziehen sind

Auch das Ausblenden bzw das Nichtanzeigen von Elementen ist durchaus gangige Praxis in CSS:

p.en {display: none;}

Diese Anweisung habe ich beispielsweise dafiir verwendet, um die englische Sprachversion einer Seite zu verstecken Beim display- Wert none wird fiir das nicht angezeigte Element kein Platz frei- gehalten

Von solchen Ausnahmen abgesehen, sollten Sie aber wirklich nur im äuÊersten Notfall den Element-Typ ändern Tun Sie dies

zu oft, so werden Sie lhr eigenes Stylesheet am Ende nicht mehr

ủberschauen und sich wundern, warum mitunter width, height, padding oder margin nicht mehr so funktionieren wie erwartet

Jedenfalls sehe ich immer wieder Stylesheets, in denen offensicht- lich genau dies passiert ist

Das div-Element ersetzt Tabellen zum Layouten

In zeitgemaben Webseiten hat das div-Element die Funktion der Layouttabellen tbernommen Sogenannte div-Elemente (von division, Bereich/Aufteilung) bilden Ublicherweise die Haupt-Con- tainer flir unsere Inhalte und sorgen ftir die Raumaufteilung einer

Seite

Ein div-Element ist ein Block-Level-Element und hat per se

weder Funktion, Inhalt noch Bedeutung Es ist somit ein reines Konstrukt, allerdings ein äuŠerst praktisches Als Block-Level-Ele- mente diirfen div-Elemente andere Block-Level-Elemente (somit

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

Ss

Trang 5

8 Die drei Saulenvon CSS: 2 Das Boxmodell

nattirlich auch weitere div-Elemente) und Inline-Elemente bein-

halten Sie entsprechen vollstandig dem Boxmodell

Das span-Element

Gerade das span-Element Das span-Element ist das »Inline-Pendant« zum div-Element und

setzt, wo strukturelle Ele- ee

nesfalls um Block-Level-Elemente »gespannt« werden Dies ist ein

mente besser angebracht ae :

Ein span-Element

> tragt kein eigenes Styling und keine strukturelle Bedeutung,

> bildet keinen Block, sondern »lauft« im Text bzw in einer Zeile,

> verteilt sich auf mehrere Zeilen, wenn es umbricht, darf nur Text und andere Inline-Elemente enthalten und

> wird ũblicherweise mit class versehen

Nachdem es sich also um ein Inline-Element handelt, trifft auch

zu, was vorher bereits angefiihrt wurde:

> width und height sind wirkungslos

> margin funktioniert nur seitlich, nicht vertikal

=

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

Trang 6

9 Die drei Saulen von CSS:

3 Positionierung

en building í nt floats Th ai

a alang with text, adjusting ; xi -evtmuote claSS” AE Sư me 7 or

Nicht alles in CSS ist relativ

Sie werden lernen,

> wie Sie die Positionierung von Elementen beeinflussen,

> wie Sie Elemente schweben lassen und

> wie Sie schwebende Elemente wieder auf den Boden holen

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

Trang 7

9 Die drei Saulen von CSS: 3 Positionierung

Wenn meine Schilerinnen und Schuler gelernt haben, wie man die

Positionierung von Elementen prazise steuern kann, wird diese Moég-

lichkeit auch gerne verwendet

Ich empfehle Ihnen, diese kleinen Ubungen ebenfalls mitzuma- chen, weil sie zum Verstandnis der Positionierung von Elemen- ten beitragen Wie sich verschiedene Optionen der Eigenschaft position auswirken, sorgt bei CSS-Einsteigern erfahrungsgemah immer wieder fiir Fragezeichen

Ich persénlich hatte zu Anfang vor allem ein Problem mit dem

Begriff static, da ich nichtverstand, warum der normale Fluss der

Elemente als statisch bezeichnet wird

Legen Sie sich fiir die Ubungen bitte einen Ordner position und die Dateien normal.htm und normal.css an Falls ich (was manch- mal der Fall ist) nur ein Stylesheet flir eine HTML-Datei bendtige,

so benenne ich diese Dateien gleich (natiirlich von der Endung abgesehen)

9.1 position: static;

Das ist die Standardpositionierung aller Block-Level-Elemente, so- fern nichts anderes angegeben wird Sie wird daher selten explizit zugewiesen und ist somit auch nur dann sinnvoll, wenn wir eine anders lautende Positionierung wieder auf »normal« zurticksetzen wollen

Der HTML-Code Ich habe hier nur den Code zwischen den body-Tags abgebildet und den Text gekiirzt Fligen Sie bitte anstatt der Punkte einige Absatze mit Text ein

Blindtext

Sie konnen fiir diesen Zweck sogenannten Blindtext von der Website Lipsum verwen- den: http://lipsum.org/ <div id="wrapper">

Trang 8

9.2 Normal Flow

<div id="box2">

<h2>Positionierung statisch</h2>

<p>Ut a elit laoreet.</p>

</div><! END #box2 >

</div><! END #wrapper- ->

Ich mache es kurz, Sie sind ja fast schon ein Profi: Ein div#wrapper umhullt zwei div-Elemente mit der id box1 und box2 Darin befin-

den sich jeweils eine Uberschrift sowie Absatze mit Text

Der CSS-Code Ich beschranke mich hier auf das Wesentliche und lasse die Anwei- sungen fiir Schriften u.A weg Es geht hier momentan nur um die Eigenschaften der Positionierung

divé#boxl {background: #FAFAFA; } div#box2 {position: static; background: #FOFOFO;}

Hier gibt es noch nichts Geheimnisvolles Beide div-Elemente be- sitzen eine Hintergrundfarbe Das Element divi#box2 erhalt eine Angabe position: static; wiewohl diese hier nicht notwendig ware, da diese Anweisung ohnehin der Standardpositionierung entspricht

Hier liegt also ein sogenannter Normal Flow vor, wenn man so will, der »normale Fluss« der Elemente Klingt zwar poetisch, ich bleibe in diesem Fall aber doch lieber bei der englischen Bezeich- nung

9.2 Normal Flow

Falls Elemente keine Angaben zu position zugewiesen haben und auch kein float vorliegt, so spricht man vom Normal Flow, wobei die Boxen dann laut Definition ftir Block-Level-Elemente oder Inline-Elemente angeordnet sind In unserem Beispiel hat also die

Anweisung position: static; keine Auswirkung

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

Trang 9

9 Die drei Saulen von CSS: 3 Positionierung

Und so sieht es aus:

CSS BoxMania * Positionierung von Elementen - Mozilla Firefox

sollicitudin 3, feugiat ac, lacus Sed posuere tortor id nulla Sed nec augue ar eros varius mollis Nullam dapbus leo in risus

Pollontesque ut Quam Etiam aliquam, orci atolomontum egestas, capon turpic consequat orci, at aliquam purus augue sod

it Proin justo libero, lobortis sit amet, fermentum vitae, scelersque st amet, mauris

Wwafntz nức #it0fft non arcu scobrisque clementum, Sod oc lectus Mauris id urna ac felis condimentum acasnsan Sed facilisis Vivartus ac velit au diam interdum lobortis Sed sed anta et tellus tretique scelerisque Praasent lobortis congue

quam Fusee velit, Pellentesque dui diam, molestie luctus, imperdiet non, bibendurr et, nsi, Class aptent tacit) socosqu ad

litera terquort per comubla nostra, por inceptos hinenacos Nulam utlibare

div {position: static;}

Ut 6 oh eget gurus viverns yotutpat, Dur non ante Nulla semper dro 2€ nm Maur nec nih, Curabitur sagttes protean

Abbildun £9.1 > mauris Vastibulum tempor consectetuer ast Donec ipsum nisl, posuere ut, tincidunt vitae, porta huctus, diam Class aptant

oe : tacfti scciosqu ad litora torquent per conubia nostra, per mceptos himanaeos, Suspendisse commodo congue nisi Ut

Zwei div-Container im Nor- pellentesque arcu vol mauris Morbi lacrent

mal Flow - einer mit static positioniert, was aber keine

Sie sehen hier also, dass die Angabe position: static; bedeutet,

dass ein Element eigentlich nicht positioniert ist (Kein Wunder, dass ich damit zu Anfang ein Verstandnisproblem hatte.) Statisch positionierte Elemente konnen daher auch nicht mit den Eigen-

schaften top, right, bottom oder left oder einem z-index (fiir

die Stapelreihenfolge) versehen werden

9.3 top, right, bottom, left

Block-Elemente mit einer anderen position als static kénnen

in CSS nach drei Dimensionen ausgerichtet werden: entlang der

x-Achse, also horizontal (nach links und nach rechts), entlang der y-Achse, also vertikal (nach oben und unten) sowie nach einer Sta-

pelreihenfolge in der z-Achse

Die Eigenschaften top, right, bottom und left werden ver- wendet, um Elemente bei Bedarf in eine bestimmte Position zu

bringen bzw zu verschieben Dabei ist es wichtig, welchen Wert

ist sozusagen der Hochstap- ler unter den Eigenschaften

102

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

Trang 10

<span class="rel">Sed nec augue ac eros varius mollis

</span>

Der CSS-Code Erganzen Sie bitte auch den CSS-Code:

divi#tbox2 (position: relative; top: -80px; left: 40px;

background: #FOFOFO;}

span.rel {position: relative; top: 1l0px; left: 20px;

background: #CCCCCC; color: #FFFFFF; font-weight: bold; }

Wir haben nun zweimal position: relative; angewendet und sehen somit deutlich, welche Auswirkung diese CSS-Regel hat

Das Block-Level-Element div#box2 wird den Positionsangaben der Eigenschaften top und left entsprechend gegeniiber der ur- spruinglichen Lage verschoben, wobei wir uns hier eines negativen

Wertes fr margin bedienen, damit die Box nach oben riickt

Sie sehen in der Abbildung deutlich, dass unser Element div#boxl davon völlig unbeeindruckt bleibt und der verschobe- nen boxl auch keinen Platz macht Der Platz der ursprtinglichen

Position bleibt frei, es rticken also keine Elemente nach

Genauso verhalt es sich mit dem Inline-Element span.rel, das wir ebenso verschieben Auch es hinterlasst eine Lticke, da der

urspriingliche Platz freigehalten wird

Sie finden die Ubungsdateien relative.htm und relative.css

im Ordner position

Angaben bei relativer Positionierung Bei der relativen Positionie-

rung werden entweder top

oder bot tom und eventuell

auch left oder right fiir

die abweichende Position

des Elements angegeben

Zusätzlich können width und height definiert werden

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

Trang 11

9 Die drei Saulen von CSS: 3 Positionierung

Und so sieht es aus:

sollicitudin a, feugiat ac, lacus Sed posuere tortorid nulla

Ficus Pellentesque ut quam Etism aliquam, orci at olomentum égocta:, canon augue sed elt Proin justo libero, lobortis sit amet, fermentum vitae, scelerisque st amet, mauns

lam dapibus leo in Contequit ore, at aliquam purus

tacfti soclosqu ad litara torquent per conubla nostra, per mceptos himanaeos Suspendisse commodo congue nisi, Ut

pellentesque arcu val mauris, Morbi laoreet,, Abbildung 9.2 >

Relative Positionierung bei

Bitte andern Sie den CSS-Code wie folgt:

div#box2 {position: absolute; top: 100px; right: 100px; width: 300px; background: #FOFOFO;}

Die Box divitbox2 erhalt eine absolute Positionierung und wird 100px von oben und 100px von rechts platziert Die Angabe von width beschrankt die Breite Bei einem absolut positionierten Ele-

ment kénnen aber auch Werte fiir top und bottom sowie left und

right angegeben werden

— 104

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

Trang 12

9.5 position: absolute;

Und so sieht es aus:

CSS Boxttania * Positionierung von Clementon - Mozilla Firefox

Absolute Positioning

50lliobưér: &, feugrat ac, lacus Sed posuere tortor id nulla Sed net augue ec eros vanus molis, Nulam dapibus leo wm nsus

Pellentesque ut quam Ebam abquarn, orc at elomentum ogestas, sapeen turprs consequat orc, at aiquam purus augue sed

eM, Pron juste bbero, lobortis sit amet, termertum vitee, sceleris

div {position: absolute;}

Vivamus nec icrem men arcu scelerisque elementum Sed aclectu facilisis Vivamus ac velit eu diam interdum lobcrus, Sed sed ante.» 5 pir soot purus viverra volutpat, Duis non ' (00698 Quam, Fusee volit Pellonitasque dui diac, molestie luctus, itferd vo sully semper acu we mi Mauris noo nibh, 044" ad tora torquent per conubia nostra, per inceptos himenaeos Nullin chine sagittis pretium mauris, Vestibulum

tempor consectetuer ost Donec ipsum resi,

posuere 4, Unodurt tee, porte luctus, diam,

Cass actors taciti scaosqu ad litera torquent

per conubia nestra, per inceptos henenaeos

Suspendisse commodo congue nit, Ut

pellentesque acu ve mourns Morb: laoreet,

Probieren Sie aus, wie beim Positionieren vom rechten Rand die

Box beim Verschieben des Fensters immer den gleichen Abstand

Rand ausgeht Und so sieht es ohne width aus:

CSS Boxitania * Positionierung von Clementon - Mozilla Firefox

div {position: absolute; } x bed

fur 9 oft ogot purus viverra volutpat Duis non ante Nulla cemporaccu 3 mi, Mauris nec nibh Curabitur sagittis’ 702

“protium mauris Vestbulure tomper consectetuer est Dones ipsum nisl, posuere ut, tincidurt vitae, porta luctus, 124" ad

Mtiam Class aptent taciti sociosqu ad litera tarquent per cosubla nostra, por ineoptos himanroos Suspendisse

commode congue nisi Ut pellentesque arcu vel mourns Morbi laorpet,

4 Abbildung 9.4

Der absolut positionierte div-Container hat keine as explizite Breitenangabe

Der div#box2-Container verhalt sich so, wie wir es erwarten Die

Box erstreckt sich Uber die ganze Breite der Seite, wobei sie am

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

Trang 13

Der Viewport

ist sozusagen das »Schau-

fenster« im Browser, durch das wir Webseiten sehen

Sind diese grofer als der

Viewport, so erscheinen Scroll-Balken

Die Ubungsdateien

zu float finden Sie im Ordner position

Das bedeutet, dass sie stehenbleiben, falls die Seite gescrollt wird

Internet Explorer 5 und 6 untersttitzen diese Methode nicht

Zu sehen gibt es hier nichts wirklich Aufregendes Im Grun-

de erscheint die fixed positionierte Box genauso wie im vorigen

Beispiel mit position: absolute; mit dem wesentlichen Unter-

schied, dass die Box stehenbleibt, wenn das Fenster gescrollt wird Die Box bleibt also immer im Sichtbereich

9.7 float und clear

Die Eigenschaft float bereitet Einsteigern mitunter Kopfzerbre- chen Sofern man aber ein paar Regeln kennt und beachtet, kann

»Floaten« sehr viel Spa machen und sich als recht nitzlich er- Wweisen

To float or not to float?

Das ist in modernem Webdesign keine Frage, denn oft arbeiten wir mit sogenannten fluid oder liquid Layouts, also mit breitenflexiblen Seitenvorlagen mit mehreren Spalten Die Eigenschaft float hat sich durchgesetzt, um mit CSS stabile Spalten zu erzeugen

Wo landet ein Element mit float?

Ein Element mit float: right; floatet, bis es den rechten Rand des umgebenden Elements (Eltern-Elements) bertihrt oder an ein anderes Element mit float andockt Ein Element mit float: left;

»entschwebt« dementsprechend in die entgegengesetzte Rich- tung Danebenliegende Elemente rutschen unter das schwebende

Element und machen nur dann daftir Platz, wenn man sie mithilfe

von margin oder einer definierten Breite dazu zwingt

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

Trang 14

q7 float und clear

- bó lạ ®\ 4© ///0-/24RvEES v /LÝ kC?Ó€Y (eabzelter/0ss criboymaia Et+ (i -

Box 1

Box 1

Sod posuere tortor id nul

Sed nec auque ac eros varius mols Nullam dapibus leo in risus, Pellentesque ut quam

Etiam aliquam, orci at

Glomenturn egestas, canon turpis comsequat orci, at shouen purus augve sed ebt

Proin justo Wero, lobortis sit amet, fermentum vitae, scolonsque sit amet, mauns

Vivamus neclorem non arcu

sollictudin @ feugist as, lacus Sed powwere tortor Wd null

Sod nec augue ac eros varius mollis Nullam dapibus Wo in

nsus Pellentesque ut quam Ebam aliquam, orc ot

elementurn egestas, sapen turpis comequat ora, at aliquam purus augue sed elt Pron justo libero, lobortis sit arnet,

fermentum vitae, scelerisque sik amet, mauris

Vivamus neclorem non arcu somersaue elomentum, Sed ac lectus Maurs sđ urna ác felis condimentum accumsan Sed fackss Vivanus ac velt eu diam interdum lobortrs, Sed sed

ante et tellus tristique scelerisque, Praesent loborts congue

quam, Fusce velk, Pellentesque dui diam, molestie Uctus, imperdiet non, bibendum at, nisi, Class aptent tacit

sociosqu 4d lRora torquent per conubia nostra, per inceptos henenaeos, Nullam ut ibero,

sollictudin a feugiat as, lacus

sollictudin a, feugist ac, lacus Sed

posuere tortor id naka Sed noc augue

at eros varius mols, Nullam dapibus

leo in resus Pellentesque ut quam

Etiam aliquam, ord at elenentun

egestas, Sapien tumpis consequat orci,

at aliquam purus augue éed elit Proin fermentum vitae, scelerisque s@ amet

Vivamus naclorem non arcu scelersque elementum, Sed ac lectus Mauris id urna ar felis

condimentum accumsan Sed fauilisis, Vivamus a¢ volt ou darn itterdun lobortis Sed sed

Box 2

Ut a alit eget purus viverra volutpat, Ouis nor

nto Nulla somper arcu ac mi, Mauris nec nibh

Curabitur sagittis pretium mauns Vesbulum tempor consectetuer est Donec iosun nisl, posuere ut, tincidunt vitae, porta luctus, dian

Class aptert tacti sodiosqu ad litora torquent pot conubia nostra, por Noeeitos himenaens

Suspendisse commodo congue resi, Ut pellentesque arcu vel mauns Norbi laoreet

Box 2

Ut ¢ elit eget purus viverra volutpat, Quis non ente, Nula semper aru ac ri, consectetuer est Donec ipsum nist, posuere ut, tinciduxt vitae, ports luctus, diam Class aptent tact socesqu ad litore torquent per conubta nostra, per inceptos himenasos Suspendisse commodo congue nisi, Ut pellentesque arcu vel mauris Morb laoreet

Class aptent tacti sociosqu ad litora torquent

er conubia nostra, per incentos himenasos

Suspendisse commodo congue resi, Ut peBentesque arcu vel maurs Morbi laoreet

4 Abbildung 9.5

Box 2 ist mit float: right;

definiert, Box 1 ist nicht

gefloatet

4 Abbildung 9.6 Box 1 wurde mit float:

left; versehen, Box 2 ist

nicht gefloatet

4 Abbildung 9.7 Box 3 und Box 2 sind nach

rechts gefloatet, Box 1 liegt

im Normal Flow

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

107

Trang 15

Abbildung 9.8 >»

Zwei nebeneinander-

liegende div- Container

Der rechte ist mit float: right;

versehen und muss in der HTML-Datei vor der linken

Der HTML-Code Stellen Sie bitte divi#tbox2 vor div#boxl, sonst funktioniert float:

right; nicht Das nach rechts gefloatete Element muss in diesem

Fall zuerst seinen Platz besetzen

Der CSS-Code div#boxl {margin-right: 320px; background: #FAFAFA;} div#box2 {float: right; width: 300px; background:

#FOFOFO; }

Fiir div#box2 wird nun float angeordnet Damit das aber funk- tionieren kann, muss div#box1 fiir das gefloatete Element Platz

machen Und das geschieht mithilfe von mar gin-right, das etwas

breiter ist, als von der rechten Spalte bendtigt

Und so sieht es aus:

C55 BoxMania * Positionierung won Clersenton - Mozills firefox

To float or not to float : 3

div {float: right;}

sclhotudia 4, feugiat ac, lacus Sed potuere tortor id nulla Sed nec

augue aceros varius mallis, Nulam dapibus leo in risus, Pellentesque ut (t a sšt eget purus viverra volutpat Quis non quam Etiam aliquam, orci at elementun egestas, sapien turpis ante Nulla camper arcu at mi Mauns nec nibh consequat orci, at alquam purus augue sed elit Prom justo libero, Curabitur sagittis pretium mauris Vestibulum lobortis st amet, fermentum vitae, se@erisque sit arnat, mauris tempor consectetuer est, Donec ipsum risl,

posuere ut, tincidunt vitae, porta luctus, diam,

Class aptert tacti sociosqu ad Itora torquent

per conubia nostra, per irmeptos hwnenaeos

Suspendisse commodo congue nisi, Ut pellentesque arcu vel mauris Morbi leoreet

Viramus nec lorem non arcu scelerisque elomentum Sed ac lectus Mauns

id uma ac felis Condienentum accumean, Sed facilisis Vivamus ac velit au diam intordum lobortis, Sod sed ante et tollus tristique scolensque:

Praesent loborts congue quam Fusce velt Fellentesque dui đam, tmolestie luctus, mperdiet non, bibendum et, nisi Class aptent taciti s0ci0squ ad liters torquant per conubia nostra, por incaptos himenaeos

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

Ngày đăng: 24/12/2013, 07:17

TỪ KHÓA LIÊN QUAN