Meine Homepage Meine neue Website - Photoshop-Cafe.de :: Dein Photoshop-Forum

**uwe367** · #25 13.11.12, 21:44

Hier mal ein einfaches Beispiel eines zweispaltigen Layouts nach der Faux Columns Regel:

HMTL

Code:

<body>

   <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header"></div>
		 <!-- End Header -->
		 
		 <!-- Begin Navigation -->
         <div id="navigation"></div>
		 <!-- End Navigation -->
		 
         <!-- Begin Faux Columns -->
		 <div id="faux">
		 
		       <!-- Begin Left Column -->
		       <div id="leftcolumn">
		 
		             
		 
		       </div>
		       <!-- End Left Column -->
		 
		       <!-- Begin Right Column -->
		       <div id="rightcolumn">
		      
		       
			   <div class="clear"></div>
			   
		       </div>
		       <!-- End Right Column -->
			   
		   <div class="clear"></div>
			   
         </div>	   
         <!-- End Faux Columns --> 
		 
   </div>
   <!-- End Wrapper -->
</body>

CSS:

Code:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper {
	margin: 0 auto;
	width: 1000px;
}
#faux {
	margin-bottom: 10px;
	overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
	width: 1000px;
	background-image: url();
}
#header {
	color: #333;
	width: 1000px;
	padding: 0px;
	height: 230px;
	margin: 10px 0px 0px 0px;
	background: #D1DBDB;
	background-image: url();
}
#navigation {
	color: #333;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	background: #ABBEBE;
	width: 1000px;
	background-image: url();
}
#leftcolumn {
	display: inline;
	color: #333;
	margin: 10px 0 0 10px;
	padding: 0px;
	width: 170px;
	float: left;
}
#rightcolumn {
	float: right;
	color: #333;
	margin: 10px;
	padding: 0px;
	width: 790px;
	display: inline;
	position: relative;
}
.clear { clear: both; background: none; }

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Website im Vintagestil	gelöschter User	Hilfestellung, Tipps und Tricks	0	06.10.11 13:08
Gewerbliche Website?	tuffenuff	Lounge	4	20.08.09 00:51
Website Hilfe	tuffenuff	Hilfestellung, Tipps und Tricks	4	04.03.09 00:25
Meine Website	Rythem	Lounge	8	30.07.05 17:20

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)