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

**uwe367** · #1 13.11.12, 20:28

Zitat:

Warum laufen diese beide DIVs 3-4px auseinander?

Und genau an diesem Punkt sind Browser sehr empfindlich, das ist jedenfalls meine Erfahrung. Hat man kein umschließendes DIV, so interpretieren die Browser teilweise was sie wollen, nur nicht das was man will. Der eine stellts richtig dar, der andere haut dir einen Abstand rein obwohl keiner deklariert ist.

Ich denke das liegt an den unterschiedlichen Standarts der Browser, es gibt ja, meines Wissens nach, keine "Norm" wie die Darstellung zu erfolgen hat.

Jenny · #2 13.11.12, 20:37

Zitat:

Zitat von uwe367

es gibt ja, meines Wissens nach, keine "Norm" wie die Darstellung zu erfolgen hat.

Korrekt! Deshalb ist hier ja das +*Hacken auch offiziell erlaubt!

@goliath:
Also versuch mal, einen Aussenrum-Wrapper zu etablieren.
MMn kannst du die Breite auch auf 980px erhöhen, denn unter 1024px fährt heutzutage kein Mensch mehr!
(Und wer's dennoch tut, der hat eine gewisse Strafe verdient...

)

**uwe367** · #3 13.11.12, 20: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 12:08
Gewerbliche Website?	tuffenuff	Lounge	4	19.08.09 23:51
Website Hilfe	tuffenuff	Hilfestellung, Tipps und Tricks	4	03.03.09 23:25
Meine Website	Rythem	Lounge	8	30.07.05 16:20

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