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 18 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 281 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 38 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 48.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 58 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 69 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 79 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 89.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 99 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 119 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 129.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 13Der 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 14q7 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 15Abbildung 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.