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

Jenny · #1 13.11.12, 21:12

Zitat:

Zitat von uwe367

Dort sind -3px deklariert. Bei -4px verschwindet der Streifen im Firefox.

Ja klar!
Aber warum sollte hier überhaupt ein negativer margin nötig sein???
Hier liegen zwei DIVs direkt übereinander, per Star-Selector wurden margin und padding auf 0 gesetzt.
Daher begreife ich nicht einmal die Notwendigkeit der -3px???

**uwe367** · #2 13.11.12, 21:15

Ganz einfach Jenny. Schau dir mal an wo der Wrapper beginnt. Der beginnt unter dem Headbereich, also im Contentbereich. Eigentlich sollte der Wrapper das alles umschließende DIV sein in dem sich die anderen DIV´s befinden. Dann braucht man auch nicht mit negativen margins zu arbeiten. Ich denke daß hier das Hauptproblem liegt da es hier kein alles umschließendens DIV gibt und da können Browser schonmal Probleme machen.

Jenny · #3 13.11.12, 21:21

Zitat:

Zitat von uwe367

Eigentlich sollte der Wrapper das alles umschließende DIV sein in dem sich die anderen DIV´s befinden.

Sicher, das ist mir auch klar! Und mein Hauptverdächtiger ist auch das "position" im #wrapper, aber dennoch: Warum laufen diese beide DIVs 3-4px auseinander?

An alle: Habt ihr eure Ansicht alle auf 100% (Strg+0 in den meisten Browsern)?

**uwe367** · #4 13.11.12, 21: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 · #5 13.11.12, 21: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** · #6 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; }

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Zur Linear-Darstellung wechseln Hybrid-Darstellung Zur Baum-Darstellung wechseln

Ä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)