SlideShare ist ein Scribd-Unternehmen logo
1 von 3
CSS mehrspaltige Layouts
links width : 14%; float : left; mitte float : left; width : 66%; margin-left : 3%; rechts width : 14%; float : right; Alle Breiten in Prozent css: #left, #right { width:14%; line-height:18px; background-color : silver; } #left { float:left; } #right { float:right; } #content { float:left; width:66%; margin-left:3%; } html: <div id=&quot;left&quot;> Linkes Menü </div> <div id=&quot;content&quot;> bla</div> <div id=&quot;right&quot;> Rechtes Menü </div>
Vorlagen http://intensivstation.ch/templates/ http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm http://www.glish.com/css/7.asp  (Spalten haben unterschiedliche Höhe) http://lists.econsultant.com/top-css-layouts-downloads-hacks-galleries-tricks.html http://blog.html.it/layoutgala/ http://www.positioniseverything.net/

Weitere ähnliche Inhalte

Mehr von lehrerfreund

CSS - Externes Stylesheet
CSS - Externes StylesheetCSS - Externes Stylesheet
CSS - Externes Stylesheetlehrerfreund
 
PHP: Variablen entschaerfen
PHP: Variablen entschaerfenPHP: Variablen entschaerfen
PHP: Variablen entschaerfenlehrerfreund
 
PHP: Indiziertes Array
PHP: Indiziertes ArrayPHP: Indiziertes Array
PHP: Indiziertes Arraylehrerfreund
 
PHP: Assoziative Arrays
PHP: Assoziative ArraysPHP: Assoziative Arrays
PHP: Assoziative Arrayslehrerfreund
 
PHP: Rechnen mit PHP
PHP: Rechnen mit PHPPHP: Rechnen mit PHP
PHP: Rechnen mit PHPlehrerfreund
 
PHP: br und n (new line)
PHP: br und n (new line)PHP: br und n (new line)
PHP: br und n (new line)lehrerfreund
 
PHP: Variablen und Datentypen
PHP: Variablen und DatentypenPHP: Variablen und Datentypen
PHP: Variablen und Datentypenlehrerfreund
 
PHP: echo, kommentare
PHP: echo, kommentarePHP: echo, kommentare
PHP: echo, kommentarelehrerfreund
 
CSS: Eigene Stilklassen
CSS: Eigene StilklassenCSS: Eigene Stilklassen
CSS: Eigene Stilklassenlehrerfreund
 
CSS: Rahmen und Hintergründe
CSS: Rahmen und HintergründeCSS: Rahmen und Hintergründe
CSS: Rahmen und Hintergründelehrerfreund
 
CSS: Listen formatieren
CSS: Listen formatierenCSS: Listen formatieren
CSS: Listen formatierenlehrerfreund
 
CSS: Stildeklaration im head-Bereich
CSS: Stildeklaration im head-BereichCSS: Stildeklaration im head-Bereich
CSS: Stildeklaration im head-Bereichlehrerfreund
 
CSS: Text horizontal ausrichten
CSS: Text horizontal ausrichtenCSS: Text horizontal ausrichten
CSS: Text horizontal ausrichtenlehrerfreund
 
CSS: Schrift formatieren
CSS: Schrift formatierenCSS: Schrift formatieren
CSS: Schrift formatierenlehrerfreund
 

Mehr von lehrerfreund (20)

CSS - Externes Stylesheet
CSS - Externes StylesheetCSS - Externes Stylesheet
CSS - Externes Stylesheet
 
PHP: foreach
PHP: foreachPHP: foreach
PHP: foreach
 
PHP: Switch
PHP: SwitchPHP: Switch
PHP: Switch
 
PHP: Variablen entschaerfen
PHP: Variablen entschaerfenPHP: Variablen entschaerfen
PHP: Variablen entschaerfen
 
PHP: exit
PHP: exitPHP: exit
PHP: exit
 
PHP: isset
PHP: issetPHP: isset
PHP: isset
 
PHP: if-else
PHP: if-elsePHP: if-else
PHP: if-else
 
PHP: Indiziertes Array
PHP: Indiziertes ArrayPHP: Indiziertes Array
PHP: Indiziertes Array
 
PHP: Assoziative Arrays
PHP: Assoziative ArraysPHP: Assoziative Arrays
PHP: Assoziative Arrays
 
PHP: Rechnen mit PHP
PHP: Rechnen mit PHPPHP: Rechnen mit PHP
PHP: Rechnen mit PHP
 
PHP: br und n (new line)
PHP: br und n (new line)PHP: br und n (new line)
PHP: br und n (new line)
 
PHP: Variablen und Datentypen
PHP: Variablen und DatentypenPHP: Variablen und Datentypen
PHP: Variablen und Datentypen
 
PHP: echo, kommentare
PHP: echo, kommentarePHP: echo, kommentare
PHP: echo, kommentare
 
CSS: div und span
CSS: div und spanCSS: div und span
CSS: div und span
 
CSS: Eigene Stilklassen
CSS: Eigene StilklassenCSS: Eigene Stilklassen
CSS: Eigene Stilklassen
 
CSS: Rahmen und Hintergründe
CSS: Rahmen und HintergründeCSS: Rahmen und Hintergründe
CSS: Rahmen und Hintergründe
 
CSS: Listen formatieren
CSS: Listen formatierenCSS: Listen formatieren
CSS: Listen formatieren
 
CSS: Stildeklaration im head-Bereich
CSS: Stildeklaration im head-BereichCSS: Stildeklaration im head-Bereich
CSS: Stildeklaration im head-Bereich
 
CSS: Text horizontal ausrichten
CSS: Text horizontal ausrichtenCSS: Text horizontal ausrichten
CSS: Text horizontal ausrichten
 
CSS: Schrift formatieren
CSS: Schrift formatierenCSS: Schrift formatieren
CSS: Schrift formatieren
 

CSS: Mehrspaltige Layouts

  • 2. links width : 14%; float : left; mitte float : left; width : 66%; margin-left : 3%; rechts width : 14%; float : right; Alle Breiten in Prozent css: #left, #right { width:14%; line-height:18px; background-color : silver; } #left { float:left; } #right { float:right; } #content { float:left; width:66%; margin-left:3%; } html: <div id=&quot;left&quot;> Linkes Menü </div> <div id=&quot;content&quot;> bla</div> <div id=&quot;right&quot;> Rechtes Menü </div>
  • 3. Vorlagen http://intensivstation.ch/templates/ http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm http://www.glish.com/css/7.asp (Spalten haben unterschiedliche Höhe) http://lists.econsultant.com/top-css-layouts-downloads-hacks-galleries-tricks.html http://blog.html.it/layoutgala/ http://www.positioniseverything.net/