Design, Interaction, Code & Teaching

007 Box-Model und Float – Positionieren, Raster & Layouts Part II

Layout Positionieren mit Float-Eigenschaft und CSS-Box-Model

Diese Flipped-Classrooom Serie erklärt das Positionieren von HTML-Elementen mit CSS für Raster und Layouts.

In diesem zweiten Teil stelle ich die CSS-Eigenschaft float vor. Float ist die wichtigste CSS-Eigenschaft, um HTML-Elemente wie DIVs, Überschriften H1, H2 etc. außerhalb des normalen Textflusses zu positionieren. Mit Float lassen sich alle grundlegenden Raster wie mehrspaltige Layouts und Galerien realisieren.

Der erste Artikel Cascading-Styles-Sheets und Selectors erklärt wie HTML-Tags für das Stylen mit CSS selektiert und wie DIVs im normalen Textfluss angeordnet werden.

    Box-Model & Float-Layouts

  1. Box-Model
  2. Safari: Entwicklermenü und Eigenschaftsinspektor
  3. Randeigenschaften: margin, border, padding
  4. Float-Eigenschaft
  5. Float-Boxes Gallery
  6. 2-Spalten – ein DIV float und ein DIV normal
  7. 3-Spalten – ein DIV float:left, ein DIV-float:right und ein DIV normal
  8. Alle Spalten floaten und verschachteltes Float-Layout
  9. Fazit

Box-Model

Eine Webseite oder Application besteht aus einer Vielzahl ineinander verschachtelter Boxen, die einzelne Layout-Elemente wie Texte, Überschriften, Bilder, etc. beinhalten. Um diese Boxen pixelgenau zu positionieren, muss man verstehen, wie die Größe eines HTML-Elementes mit den CSS-Eigenschaften für Innen- und Außenabstände (padding und margin), Ränder (border) und Größen (width und height) genau berechnet wird.

Das Dilemma ist: Die Größe eines HTML-Elements wird nicht nur von der width- und height-Eigenschaft bestimmt, sondern alle Werte der Randeigenschaften addiert, ergeben die Größe des HTML-Elementes bzw. der Box.

  1. margin: der äußere Abstand eines Elementes zum nächsten
  2. border: der Rand eines Elementes
  3. padding: der innere Abstand eines Elementes zum nächsten
  4. width und height: die Höhe und die Breite eines Elementes

Diese Berechnung nennt man das Box-Model und dieses Box-Model kann das Leben manchmal etwas schwer machen. Denn wenn man ein Raster mit CSS umgesetzt hat und im Nachhinein die Werte für border, padding, width oder height verändert, verschieben sich die Boxen und damit das Raster. Da hilft nur mitrechnen! Dieses Beispiel zeigt zwei komplett unterschiedliche DIV-Boxen, die rechnerisch genau gleich groß – 300 Pixel breit und hoch – sind.

HTML:

1
2
3
4
    <br />
    <div class="box-1">BOX 1</div>
    <br />
    <div class="box-2">BOX 2</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    box-1 {
        width: 300px; height: 300px;
        background: black;
           
        margin:   0 auto; /* center box */ 
    }
    .box-2 {
        width: 200px; height: 200px;
        padding: 25px;
        border: 25px solid grey;
        background: black;
           
        margin:   0 auto; /* center box */ 
    }

Und das rechnet sich so:
Breite Box 1: 300px width, keine weitere Randeigenschaft
Breite Box 2: Addition der Breite und aller Randeigenschaften 200px width + 25px padding-left + 25px padding-right + 25px border-left + 25px border-right

Demo 300 Pixel-Boxen

Safari: das Entwicklermenü & der Eigenschaftsinspektor

Zum Glück ist im Browser eine unersetzliche Hilfe für Coder eingebaut: der Eigenschaftsinspektor. Der Eigenschaftsinspektor zeigt nicht nur die CSS-Eigenschaften von Elementen oder das Box-Model an, sondern funktioniert auch wie ein kleiner Editor: HTML und CSS können direkt im Browser editiert und angeschaut werden. Dabei können Werte verändert und komplett neue Eigenschaften, Tags, Attribute oder Texte eingegeben werden. Das ist toll zum Testen und zum Fehler finden – nur Speichern lassen sich die veränderten Werte nicht.

Per Default ist der Eigenschaftsinspektor in Safari nicht aktiviert – einfach Anstellen in Safari > Einstellungen > erweitert > Entwicklermenü anstellen (ganz rechts, ganz unten). Andere Browser wie Firefox und Safari haben ähnlich geniale Tools eingebaut.

Dann kann es losgehen. Ein Rechtsklick auf ein Element im Browser öffnet ein Context-Menü mit dem untersten Menüpunkt Element Informationen. Dieser Menüpunkt blendet ein neues Fenster mit dem HTML-Tree der Webseite ein. Hier kann man jetzt beliebig spielen und testen, CSS-Eigenschaften überprüfen, eingeben, etc.

Rechts ganz oben gibt es noch ein kleines Ikon-Menü. Das letzte Ikon ist so etwas wie eine schräg gestellte Leiter und steht für das Box-Model. Hier lassen sich alle Box-Model-Werte für das ausgewählte Element untersuchen. Sehr praktisch!

Eigenschaften setzen von margin, border, padding

Zurück zum Box Model und CSS. Jede Eigenschaft kann für jede Seite des Elements einzeln gesetzt werden.

1
2
3
4
5
6
    .box {
        padding-top: 5px;
        padding-right: 20px;
        padding-bottom: 15px;
        padding-left: 20px;
    }

Für die vier Zeilen gibt es ein Kurzbefehl über eine Zeile, um sich die Tipparbeit zu ersparen. Die Werte werden im Uhrzeigersinn (oben, rechts, unten, links) hintereinander mit einem Space geschrieben. Dieser Kurzbefehl ist also analog:

1
2
3
    .box {
        padding: 5px 20px 15px 20px;
    }

Wenn oben / unten und links / rechts gleich sind, reichen sogar zwei Werte:

1
2
3
    .box {
        padding: 5px 20px;
    }

Und wenn der Abstand zu allen Seiten gleich ist, reicht ein Wert:

1
2
3
    .box {
        padding: 10px;
    }

Die gleiche Notation von Randeigenschaften findet man bei margin und border:

1
2
3
4
5
    .box {
        padding: 10px;
        margin: 5px;
        border: 10px;
    }

Float-Eigenschaft

Kommen wir endlich zur CSS-Eigenschaft float. HTML-Tags sind entweder block oder inline – also entweder mit Zeilenumbruch am Ende (block) oder fortlaufend (inline). In CSS kann man diese Eigenschaft für jedes Element beliebig setzen und den Textfluss eines Elementes einstellen.

1
2
3
4
5
6
    .box-block{
        display:block
     }
    .box-inline {
        display:inline 
    }

Dieses Verhalten entspricht dem Textfluss eines Word Processor – der Text fließt von links nach rechts und von oben nach unten – damit lassen sich bekanntlich keine großartigen Layouts verwirklichen – und kommt nun float ins Spiel.

Elemente mit der float-Eigenschaft werden an den linken oder rechten Rand gerückt, und die im HTML-Code weiter notierten Elemente umfließen die gefloateten Elemente, sofern Platz vorhanden ist. Damit lassen sich alle grundlegenden Raster verwirklichen! Die float-Eigenschaft hat drei Werte: left, right und none – wobei none die float-Eigenschaft für das Element ignoriert.

Drei Grundregeln für Float-Elemente

sollten man sich unbedingt ganz genau einprägen:

  1. Width setzen: Für ein Float-Element muss die width-Eigenschaft gesetzt werden – sonst kann der Browser den horizontalen Platz für das Float-Element nicht bestimmen.
  2. Platz für Floats: Immer das Box-Model im Kopf behalten, um den benötigten Platz für das Float-Element zu berechnen. Ein Pixel zu viel kann schon das gesamte Layout verhauen, weil ein Float-Element nicht genug Platz hat.
  3. Clear stoppt das Umfließen: Möchte man das Umfließen der nachfolgenden Elemente verhindern, muss das Float gestoppt werden. Dafür gibt es die CSS-Eigenschaft clear. Ein <div style=“clear:both“></div> stoppt das Umfließen aller folgenden Elemente.

Beispiel 1: Float-Boxes im Fließtext

In einem Fließtext sollen zwei Boxen links und rechts angeordnet, das könnten zum Beispiel Bilder zum Text, Zitate oder andere Verweise ein. Zwischen den Boxen und unter den Boxen fließt der Text ganz normal weiter.

Im HTML-Gerüst werden als Erstes die Boxen für die Float-Elemente angelegt und dann die Box für den Fließtext:

1
2
3
4
5
6
7
    <body>
        <div class="box flt-left"></div>
        <div class="box flt-right"></div>
        <div class="article">
             Lorem ipsum dolor sit amet, ...
        </div>
    </body>

CSS: Das BODY-Element wird direkt genutzt, um das Layout mit fester Breite zu zentrieren. Die height der Box DIV.article wird von der Textlänge bestimmt. Eine Grundregel im CSS heißt: Niemals die Höhe von Elementen angeben, wenn es sich irgendwie vermeiden lässt. Die Floated-Boxes sind beide gleich groß, bekommen also eine Klasse box und eine zweite Klasse flt-left oder flt-right, die bestimmt, ob die Boxen links oder rechts eingerückt werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    body {
        /* center body tag */
        width: 960px;
        margin: 0 auto;  
        /* font ... */
        color: white;
        font-size:16px;
        font-family: Helvetica;
    }
    .article {
        padding: 20px;         
        background:black;
     }
    /* box are equal */
    .box {
        width: 120px; height: 60px;
        margin:20px;
        padding: 20px;
        border: 20px solid grey;
        background: white;
     }
     /* floats */
     .flt-left { float: left; }
     .flt-right { float: right; }
     .flt-clear{ clear: both; }

Das Layout ist 960 Pixel breit, so breit wie der BODY. Die Box DIV.article übernimmt diese Breite von 960 Pixeln automatisch. Die zwei Boxen DIV.box sind jeweils 200 * 120 Pixel:

200 = 120 width + 20 margin-left + 20 margin-right + 20 padding-left + 20 padding-right
120 = 60 height + 20 margin-left + 20 margin-right + 20 padding-left + 20 padding-right

Float clearing

Wenn nach den beiden Boxes mit der float-Eigenschaft ein DIV mit der CSS-Eigenschaft clear zugefügt wird, umfließt der Text die Boxen nicht mehr, sondern fängt erst unter den Boxen an. Die Boxen sitzen links und rechts aligniert zum Rand des BODY

1
2
3
4
5
6
7
8
    <div class="box flt-left"></div>
    <div class="box flt-right"></div>

    <div class="flt-clear"></div>

    <div class="article">
         Lorem ipsum dolor sit amet, ...
    </div>

Demo Float-Boxes in Fließtext

Eine Galerie sind mehrere gleich große Boxen mit der float-Eigenschaft, die gleichmäßig in einem Raster positioniert werden. Damit die DIVs bzw. Gallery-Images richtig im Raster sitzen, müssen diese ein Vielfaches der Breite des Eltern-Elements sein. Hier wird klar, wie schnell sich das Layout wegen des Box-Models verschieben kann. Es muss nur mal der border der Gallery-Images geändert werden, schon berechnet sich die Größe des Rasters neu und es kann die Galerie zerhauen.

Beispielrechnung einer 960 Pixel breiten Webseite:

3-Gallery: 960px / 3 = 320px pro Gallery-Image

4-Gallery: 960px / 4 = 240px pro Gallery-Image

5-Gallery: 960px / 4 = 192px pro Gallery-Image

usw.

Im HTML sin drei Galerien mit jeweils sechs Boxen angelegt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
     <body>
    <!-- Gallery I -->
    <div class="box box-320">1</div>
    <div class="box box-320">2</div>
    <div class="box box-320">3</div>
    <div class="box box-320">4</div>
    <div class="box box-320">5</div>
    <div class="box box-320">6</div>
   
    <div class="flt-clr "></div>
   
    <!-- Gallery II -->
    <div class="box box-240">1</div>
    <div class="box box-240">2</div>
    <div class="box box-240">3</div>
    <div class="box box-240">4</div>
    <div class="box box-240">5</div>
    <div class="box box-240">6</div>

        <div class="flt-clr "></div>

    <!-- Gallery III -->
    <div class="box box-192">1</div>
    <div class="box box-192">2</div>
    <div class="box box-192">3</div>
    <div class="box box-192">4</div>
    <div class="box box-192">5</div>
    <div class="box box-192">6</div>

        <div class="flt-clr "></div>
    </body

CSS: Der BODY wird wie im vorigen Beispiel zentriert und mit einer festen width von 960px definiert. Die Klasse box beschreibt alle Eigenschaften für die Galerie-Bilder außer die Höhe und Breite. Die Höhe und Breite werden pro Galerie jeweils in einer speziellen Klasse definiert werden – natürlich da sich diese Werte für jede Galerie unterscheiden und nach dem Box-Model ausgerechnet werden müssen. Unter jede Galerie wird ein DIV mit CSS-Eigenschaft clear:both gesetzt, damit die nächste Galerie wieder am Zeilenanfang beginnt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    body {
        width: 960px;
        margin: 0 auto;
        color: white;
        font-size:20px;
        font-family: Helvetica;
    }      
    .box {
        float: left;
        margin: 10px;
        padding: 10px;
        border: 10px solid grey;
        background: black;
     }
    .box-320 {
        width: 260px; height:140px;        
    }
    .box-240 {
        width:180px; height:120px
    }
    .box-192 {
        width:132px; height:80px;
    }      
    .flt-clr { clear: both; }

Demo Float-Boxes Gallery

Beispiel 3: Spalten-Layouts mit Float-Boxes

Mehrspaltige Layouts werden mit Boxen konstruiert, die an der rechten oder linken Seite floaten. Die einfachste Form ist ein Layout mit zwei Kolumnen.

2-Spalten – ein DIV float und ein DIV normal

Wichtig ist hier wieder die genaue Reihenfolge der HTML-Elemente zu beachten. Zuerst kommt das Element mit der Float-Eigenschaft – die Box DIV.sidebar – und dann das zu umfließende Element – die Box DIV.article.

  1. Elemente einschließen in ein Wrapper-DIV, das die Gesamtbreite des Layouts festlegt.
  2. Sidebar DIV.sidebar anlegen mit float- und width-Eigenschaft.
  3. Artikel DIV.article anlegen ohne width-, aber mit margin-Eigenschaft, um Platz für die Sidebar zu schaffen.

Der dritte Punkt ist der Trick: Ein HTML-Element ist genau so breit wie das Elternelement (width: 100%) außer die width-Eigenschaft wird für ein Element explizit gesetzt. Deswegen braucht für die Box DIV.article keine Breite bestimmt werden. Die Box DIV.article wird aber mit margin-left oder margin-right dort vom Rand abgerückt, wo die Sidebar platziert werden soll. Dieses Einrücken mit der Margin-Eigenschaft der Box DIV.article garantiert, dass diese Box niemals die Sidebar umfließen kann. So bleiben die zwei Kolumnen immer erhalten, auch wenn die Sidebar kürzer als der Artikel ist.

HTML:

1
2
3
4
5
6
    <body>
    <div class="box sidebar">sidebar</div>
    <div class="box article">article</div>
    <div class="flt-clear"></div>
    <div class="box footer">footer</div>
    </body>

CSS: Der Wrapper zum Zentrieren ist wieder der BODY. Alle Layout-Elemente bekommen die gleichen Eigenschaften für Farbe, Rand und Innenabstand mit der Klasse box. Die speziellen Klassen sidebar und article definieren die Größe, den float für die Sidebar und den margin für den article. Vor dem Footer wird das Float wieder mit einem DIV gecleart. Dann läuft der Footer im normalen Textfluss weiter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    body {
        width: 960px;
        margin: 0 auto;
        color: white;
        font-size:20px;
        font-family: Helvetica;
    }
    .box {
        padding: 20px;
        border: 20px solid grey;
        background:black;
    }
    .article {
        margin-right: 260px;
        height: 600px;
    }
    .sidebar {
        float: right;
        width: 180px;
        height: 600px;

    }
    .footer {
        height:10px;
    }
    .flt-clear {
        clear: both;
    }

Der graue Innenbalken zwischen Artikel / Sidebar und Footer ist jeweils doppelt so groß, weil die Ränder der Boxen (border: 20px) Pixel genau aufeinandertreffen – zwei Border mit jeweils 20 Pixel!

Demo 2-Kolumnen mit Float

3-Spalten – ein DIV float:left, ein DIV-float:right und ein DIV normal

Das System bleibt das gleiche wie beim 2-Spalten-Layout. Im HTML-Gerüst werden die Boxen für die Sidebars vor dem Artikel positioniert. Die Boxen für die Sidebars bekommen die float-Eigenschaft right und left. Die Box DIV.Article läuft im Textfluss, wird aber links und rechts mit margin-left und margin-right eingerückt, damit ein längerer Artikel die Sidebars nicht umfließen kann.

HTML:

1
2
3
4
5
6
     <body>
        <div class="box sidebar-left">sidebar left</div>
        <div class="box sidebar-right">sidebar right</div>
        <div class="box article">article</div>
        <div class="flt-clear"></div>
        <div class="box footer">footer</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    body {
        width: 960px;
        margin: 0 auto;
        color: white;
        font-size:20px;
        font-family: Helvetica;
    }      
    .box {
        padding: 20px;
        border: 20px solid grey;
        background:black;
    }
    .article {
        margin-right: 180px;
        margin-left: 180px;
        height: 600px;
    }
    .sidebar-right {
        float: right;
        width: 100px;
        height: 600px;
    }
    .sidebar-left {
        float: left;
        width: 100px;
        height: 600px;
    }
    .footer {
        height: 10px;
    }
    .flt-clear {
        clear: both;
    }

Die grauen Balken sind wieder dort doppelt so groß, wo die Seitenränder der Boxen aufeinandertreffen. Zum Verständnis noch Mal eine Rechnung, wie das Layout angelegt ist:

  1. Body: width 960 Pixel zentriert
  2. Artikel: width wird vom BODY übernommen, margin links und rechts 180 Pixel
  3. Sidebars: Breite muss so groß sein wie die margin des Artikels – 180px = width 100px + padding-left 20px + padding-right 20px + border-left 20px + border-right 20px
  4. DIV vor dem Footer cleared die Float-Eigenschaft der Sidebars
  5. Footer: width wird vom BODY übernommen

Demo 3-Kolumnen mit float

Alle Spalten floaten und verschachtelte Float-Layouts

Float-Layouts lassen sich perfekt nach diesem Muster um weitere Spalten erweitern. Achtet darauf, dass für die Spalten genug Platz vorhanden ist. Das Galerien-Beispiel zeigt, wie man Layouts nur mit Float-Elementen erstellt und die Breite der Spalten berechnet.

Das System lässt sich natürlich auch ineinander verschachteln, um komplexe Raster zu konstruieren oder um das HTML-Gerüst zu vereinfachen. Zum Beispiel kann man ein 3-spaltiges Layout sehr einfach aus zwei ineinander verschachtelten 2-Spaltern erstellen.

HTML:

1
2
3
4
5
6
7
8
9
    <body>
        <div class="box sidebar-right">sidebar right</div>
    <div class="box main">
             <div class="sidebar-left">article sidebar left</div>
             <div class="article">article</div>
    </div>
    <div class="flt-clear"></div>
    <div class="box footer">footer</div>
    <body>

CSS: Die Boxen DIV.main und DIV.sidebar-right sind das äußere Paar für ein 2-spaltiges Layout. In die Box DIV.main wird mit den beiden Boxen DIV.article und DIV.sidebar-left ein weiterer 2-Spalter angelegt. Dieser innere 2-Spalter ist weiß mit schwarzer Schrift. Fertig ist ein verschachtelter 3-Spalter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    body {
        width: 960px;
        margin: 0 auto;
        color: white;
        font-size:20px;
        font-family: Helvetica;
   }       
   .box {
        padding: 20px;
        border: 20px solid grey;
        background:black;
    }
    .sidebar-right {
        float: right;
        width: 120px;
        height: 600px;
    }
    .main {
        margin-right: 200px;
    }
    .main .article {
        height: 560px;
        margin-left: 140px;
        padding:20px;
        background:white;
        color:black;
    }
    .main .sidebar-left {
        float: left;
        width: 80px;
        height: 560px;
        padding: 20px;;
        background:white;
        color: black;
        }
    .footer {
        height: 10px;
    }
    .flt-clear {
        clear: both;
}

Demo verschachteltes Layout

Fazit

Damit sind wir auf der Zielgeraden: Mit dem Box-Model im Kopf und der CSS-Eigenschaft float können HTML-Layouts wie Mehrspalter oder Galerien realisiert werden.

Das Box-Model beschreibt wie die Größen von Boxen mit allen Randeigenschaften (margin, border, padding, width und height) berechnet werden. Mit dem Wissen können pixelgenaue Layouts umgesetzt werden.

Die float-Eigenschaft ordnet Elemente links oder rechts außerhalb des Textflusses an. Bei der Float-Eigenschaft gilt es an drei Regeln zu denken: 1. Immer die width-Eigenschaft angeben, damit klar ist, worum die nachfolgenden Elemente fließen sollen. 2. Im Layout den freien Platz für die Floats mit dem Box-Model genau berechnen – schon ein Pixel kann das ganze Layout verhauen. 3. Das Umfließen kann mit der CSS-Eigenschaft clear gestoppt werden.

Im dritten Teil der Serie positionieren wir Elemente komplett außerhalb des Textflows – einmal absolute in Pixeln wie aus Designprogrammen gewohnt und fixed immer an der gleichen Stelle klebend.

Artikel dieser Serie Positionieren, Raster Layouts mit CSS

Part I: CSS-Selectors und Styles
Part II: Box-Model und CSS-Float-Eigenschaft
Part III: CSS-Position: relative, absolute und fixed
Part IV: Raster und CSS-Raster-Systeme
Part V: alltägliche CSS-Probleme beim Positionieren von Elementen


Über den Autor


Prof. Pepe Jürgens konzipiert, gestaltet und programmiert seit 20 Jahren digitale Medien. Er gründete das interdisziplinäre Design-Studio Weltformat und ist Co-Founder von lernox mit dem Ziel, freie Lehr- und Lernmaterialien aus dem Internet zu kuratieren. Seit 2013 doziert Pepe Jürgens Interaction Design an der Hochschule der populären Künste in Berlin


3 Kommentare

  1. Posted 26. November 2013 at 19:46 | Permalink

    Eine erstklassige Anleitung zu dem Thema, gute Illustrationen und verständlicher als bei allen Anderen.
    Ich bin sehr dankbar!

  2. rai
    Posted 18. Februar 2014 at 11:21 | Permalink

    Super Artikel, hätte evtl. noch erwähnt, das man das Box-Model umstellen kann und somit lästige Rechnerei entfällt.

    • admin
      Posted 19. Februar 2014 at 11:21 | Permalink

      Den Hinweis ist gut und das Stichwort ist die CSS-Eigenschaft box-sizing. Elemente, die box-sizing:border box zugewiesen bekommen, berechnen das Box-Model intuitiver: Die width und height sind die Referenzgrößen und margin, padding und border werden auf der Innenseite des Elementes abgezogen. Toll! Funktioniert allerdings erst ab IE8.

      Bei Paul Irish gibt es ein nützliches Stück CSS-Code, dass allen Elementen im DOM die Eigenschaft box-sizing zuweist. Sehr praktisch: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Ein Trackback

  1. By CSS-Boxmodell: float – LCS on 26. April 2017 at 21:04

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>