Einfache 2 Spalte CSS-Layout, CSS, Design, CSS-Layout |

Einfache 2 Spalte CSS-Layout

Dies ist ein Tutorial über die Verwendung von CSS, um eine einfache zwei Spalten-Layout.

Das Layout besteht aus einer Kopfzeile, einer wesentlichen Inhalt Spalte, eine Sidebar, und eine Fußzeile. Eine ziemlich grundlegende Layout, und gar nicht schwer zu schaffen, mit CSS, wenn Sie wissen, wie man mit der unvermeidlichen Internet Explorer Bugs.

1. Grundstruktur

Zunächst erstellen wir die einfache HTML-Struktur:


 > <div id = "header" > </div> <div id = "sidebar" > </div> <div id = "main" > </div> <div id = "footer" > </div> </div> <div id = "page"> <div id = "header"> </ div> <div id = "sidebar"> </ div> <div id = "main"> </ div> <div id = "footer "> </ div> </ div> 
  Danach haben wir einige Inhalte in den verschiedenen Sektionen:  > <div id = "header" > <h1> Company Name </h1> <h4> Type your slogan </h4> </div> <div id = "sidebar" > <h2> Navigation </h2> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Srevices </a> </li> <li> <a href = "#" > Contact </a> </li> <li> <a href = "#" > Sitemap </a> </li> </ul> </div> <div id = "main" > <h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing  elit. <div id = "page"> <div id = "header"> <h1> Firma </ h1> <h4> Geben Sie Ihr Slogan </ h4> </ div> <div id = "sidebar"> <h2> Navigation </ h2> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Über uns </ a> </ li> < li> <a href = "#"> Srevices </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> </ ul> </ div> <div id = "main"> <h2> Content </ h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing elit.  Cum dis parturient Montes, nascetur ridiculus mus.  1. Januar 2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Cum dis parturient Montes, nascetur ridiculus mus.  > <h2> Footer </h2> </div> </div> 1. Januar 2002 </ p> </ div> <div id = "footer"> <h2> Fußzeile </ h2> </ div> </ div>

2. CSS-Code

Jetzt erstellen wir CSS-Code:


 margin : 0 ; padding : 0 ; } body { font-size : 100 %; font-weight :normal ; font-family :Arial , Helvetica, sans-serif ; } * html, body { height : 100 %; min-height : 100 % /*firefox*/ ; } / * Style zwei Spalten-Layout * / * (margin: 0; padding: 0;) body (font-size: 100%; font-weight: normal; font-family: Arial, Helvetica, sans-serif;) * html, body (height: 100%; min-height: 100% / * Firefox * /;) 
 margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } html, # page (margin: 0; padding: 0; height: 100%;) # page (margin: 0 auto; padding: 0; width: 1009px; height: 100%;) 
 ; } a :hover { text-decoration :underline } ul,ol,li { margin : 0 ; padding : 0 ; } h1,h2,h3,h4,h5,h6 { margin : 0 ; padding : 10px 0 0 20px ; } h1 { font-size : 28px ; } h2 { font-size : 24px ; } h3 { font-size : 18px ; } h4 { font-size : 12px ; } h5 { font-size : 10px ; } p { margin : 0 ; line-height : 18px ; padding : 0 0 10px 20px ; font-size : 12px ; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } #header { margin : 0 ; padding : 0 ; width : 100 %; height : 151px ; display :block ; background-color : #eeeeee ; } #sidebar { float :left ; margin : 0 ; padding : 0 ; display :inline /*internet explorer*/ ; width : 200px ; height : 100 %; background-color : #cccccc ; } #sidebar ul { list-style-type :none ; } #sidebar ul li { display : inline /*internet explore*/ ; } #sidebar ul li a { padding : 3px 4px ; display :block ; margin : 0px 0 0 16px ; text-decoration :none ; color : #0000E8 } #sidebar ul li a :hover { color : #CC0000 } #main { margin : 0 ; padding : 0 ; float :left ; display :block ; width : 809px ; height : 100 %; background : #dddddd } #footer { margin : 0 ; padding : 0 ; display :block ; width : 100 %; height : 50px ; background : #eeeeee ; overflow :hidden ; } a (text-decoration: none;) a: hover (text-decoration: underline) ul, ol, li (margin: 0; padding: 0;) H1, H2, H3, H4, H5, H6 (margin: 0; padding: 10px 0 0 20px;) h1 (font-size: 28px;) h2 (font-size: 24px;) h3 (font-size: 18px;) h4 (font-size: 12px;) h5 (font-size: 10px;) p (margin: 0; line-height: 18px; padding: 0 0 10px 20px; font-size: 12px;) # page (margin: 0 auto; padding: 0; width: 1009px; height: 100%; ) # header (margin: 0; padding: 0; width: 100%; height: 151px; display: block; background-color: # eeeeee;) # sidebar (float: left; margin: 0; padding: 0; Anzeige: Inline / * Internet Explorer * /; width: 200px; height: 100%; background-color: # CCCCCC;) # sidebar ul (list-style-type: none;) # sidebar ul li (display: inline / * Internet Explorer * /;) # sidebar ul li a (padding: 3px 4px; display: block; margin: 0px 0 0 16px; text-decoration: none; Farbe: # 0000E8) # sidebar ul li a: hover (color: # CC0000) # main (margin: 0; padding: 0; float: left; display: block; width: 809px; height: 100%; background: # dddddd) # footer (margin: 0; padding: 0; display: block; Breite: 100%; height: 50px; background: # eeeeee; overflow: hidden;)