✔ Layout: IE + FF

  • Themenstarter Themenstarter Comenius
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
C

Comenius

Hallo,

ich benötige wieder einmal eure Hilfe.

Mein Layout habe ich komplett mit CSS erstellt.

Code: 
/* #################### LAYOUT #################### */
BODY          { margin:   0px   0px   0px   0px; padding:  10px  10px  10px  10px; }
#LOGO         { margin:   0px   0px   0px   0px; padding:   5px   5px   5px   5px; width: 987px; height:  60px; background-color: #EEF2F7; border-top: 1px solid #8394B2; border-right: 1px solid #8394B2; border-bottom: 1px solid #8394B2; border-left: 1px solid #8394B2; }
#RAND         { margin:   0px   0px   0px   0px; padding:   0px   0px   0px   0px; width: 985px; height:  auto; background-color: #EEF2F7; border-top: 0px solid #8394B2; border-right: 1px solid #8394B2; border-bottom: 1px solid #8394B2; border-left: 1px solid #8394B2; text-align:;        float:; }
#KOPF         { margin:   0px   0px   0px   0px; padding:   0px   5px   0px   5px; width: 985px; height:  20px; background-color: #D1DCEB; border-top: 0px solid #8394B2; border-right: 0px solid #8394B2; border-bottom: 1px solid #8394B2; border-left: 0px solid #8394B2; text-align:;        float:; }
#LINKS        { margin:  10px   7px  10px   5px; padding:   0px   0px   0px   0px; width: 150px; height:  auto; background-color: #EEF2F7; border-top: 0px solid #8394B2; border-right: 0px solid #8394B2; border-bottom: 0px solid #8394B2; border-left: 0px solid #8394B2; text-align:;        float: left;  }
#RECHTS       { margin:  10px   4px  10px   7px; padding:   0px   0px   0px   0px; width: 150px; height:  auto; background-color: #EEF2F7; border-top: 1px solid #8394B2; border-right: 1px solid #8394B2; border-bottom: 1px solid #8394B2; border-left: 1px solid #8394B2; text-align:;        float: right; }
#UEBERSCHRIFT { margin:  10px   0px   0px   0px; padding:   0px   5px   0px   5px; width: 645px; height:  auto; background-color: #8394B2; border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; text-align: center; float:; }
#MITTE        { margin:   0px   0px  10px   0px; padding:   0px   5px   0px   5px; width: 645px; height:  auto; background-color: #FFFFFF; border-top: 0px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; text-align:;        float:; }
#FUSS         { margin:   0px   0px   0px   0px; padding:   0px   5px   0px   5px; width: 985px; height:  20px; background-color: #D1DCEB; border-top: 1px solid #8394B2; border-right: 0px solid #8394B2; border-bottom: 0px solid #8394B2; border-left: 0px solid #8394B2; text-align:;        float:; }
/* #################### LAYOUT #################### */

Mit folgendem HTML-Code füge ich das Ganze in meine Seite ein:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" />
<HTML>
<HEAD>
<TITLE><?php echo"$TITLE"; ?></TITLE>
<LINK REL="STYLESHEET"   TYPE="TEXT/CSS" HREF="<?php echo "$CSS"; ?>Schrift.css">
<LINK REL="STYLESHEET"   TYPE="TEXT/CSS" HREF="<?php echo "$CSS"; ?><?php echo "$browser"; ?>">
</HEAD>
<BODY>


<!-- [#################### LOGO #####################] //-->
<DIV ID="LOGO">
</DIV>
<!-- [#################### LOGO #####################] //-->


<!-- [#################### RAND #####################] //-->
<DIV ID="RAND">


<!-- [#################### KOPF #####################] //-->
<DIV ID="KOPF">
</DIV>
<!-- [#################### KOPF #####################] //-->


<!-- [#################### LINKS ####################] //-->
<DIV ID="LINKS">
</DIV>
<!-- [#################### LINKS ####################] //-->


<!-- [#################### RECHTS ###################] //-->
<DIV ID="RECHTS">
</DIV>
<!-- [#################### RECHTS ###################] //-->


<!-- [#################### UEBERSCHRIFT #############] //-->
<DIV ID="UEBERSCHRIFT">
</DIV>
<!-- [#################### UEBERSCHRIFT #############] //-->


<!-- [#################### MITTE ####################] //-->
<DIV ID="MITTE">
</DIV>
<!-- [#################### MITTE ####################] //-->


<!-- [#################### FUSS #####################] //-->
<DIV ID="FUSS">
</DIV>
<!-- [#################### FUSS #####################] //-->


</DIV>
<!-- [#################### RAND #####################] //-->

Erweitere ich nun die Linke und Rechte Spalte, bekomme ich Unterschiede in den Browsern.

Das erste Bild zeigt den Internet Explorer und das Zweite den Firefox.
Netscape und Opera zeigen genau das Gleiche wie der Firefox an, deswegen spare ich mir Screenshots von diesen beiden.

Könnte mir da vielleicht wer helfen :confused:

Gruss
Commi


:confused: :confused:
 

Anhänge

  • Internet Explorer.JPG
    Internet Explorer.JPG
    80,8 KB · Aufrufe: 100
  • Firefox.JPG
    Firefox.JPG
    69,7 KB · Aufrufe: 95
? 1: Fasse gleichartige Regeln zusammen und gruppiere sie:
Code: 
body {
	margin:			0;
	padding:		10px;
}
#logo {
	padding:		5px;
	width:			987px;
	height:			60px;
	background-color:	#EEF2F7;
	border:			1px solid #8394B2;
}
#rand {
	width:			985px;
	height:			auto;
	background-color:	#EEF2F7;
	border:			solid #8394B2;
	border-width:		0 1px 1px 1px;
}
#kopf {
	padding:		0 5px;
	width:			985px;
	height:			20px;
	background-color:	#D1DCEB;
	border-bottom:		1px solid #8394B2;
}
#links {
	margin:			10px 7px 10px 5px;
	width:			150px;
	height:			auto;
	background-color:	#EEF2F7;
}
#rechts {
	margin:			10px 4px 10px 7px;
	width:			150px;
	height:			auto;
	background-color:	#EEF2F7;
	border:			1px solid #8394B2;
}
#ueberschrift {
	margin:			10px 0 0 0;
	padding:		0 5px;
	width:			645px;
	height:			auto;
	background-color:	#8394B2;
	border:			1px solid #000;
	text-align: center;
}
#mitte {
	margin:			0 0 10px 0;
	padding:		0 5px;
	width:			645px;
	height:			auto;
	background-color:	#FFF;
	border:			solid #000;
	border-width:		0 1px 1px 1px;
}
#fuss {
	padding:		0 5px;
	width:			985px;
	height:			20px;
	background-color:	#D1DCEB;
	border-top:		1px solid #8394B2;
}
 
Vielen Dank Gumbo.
Du hast mir meinen CSS-Code wunderschön in Form gebracht.
Leider habe ich diese Schreibweise - auch wenn sie besser ist,
weil Websiten dann schneller geladen werden - von Anfang an abgelehnt,
da ich sie nicht so übersichtlich wie meine finde.

Das mag auch Geschmackssache sein, aber mir gefällt es so besser.

Nur eines stört mich an deinem Posting: es bringt mich leider kein Stück weiter.

:confused:

Gruss
Commi
 
Leider habe ich diese Schreibweise […] von Anfang an abgelehnt, da ich sie nicht so übersichtlich wie meine finde.
Zum Vergrößern anklicken....
Du findest deine Schreibweise tatsächlich übersichtlicher? Tut mir leid, aber den Trick musst du mir unbedingt verraten. Ich finde deine einzeilige Schreibweise für ungeheuerlich unübersichtlich.

Um deine Frage beziehungsweise dein eigentliches Anliegen zu beantworten, werden die Elemente durch die float-Eigenschaft aus ihrem normalen Textfluss gerissen. So kommt es auch dazu, dass in diesem Fall die Höhe des Eltern-Elements nur noch von dem Kind-Element abhängig ist, welches sich im normalen Textfluss befindet. Siehe dazu auch das Kapitel über „Floats“.
 
Lassen wir die Sache mit der Schreibweise - ist ja jetzt auch egal.

Zum Problem:

Ich weiss dass "float" das betreffende Objekt aus dem Textfluss nimmt.
Nur wenn ich meine Boxen beim Firefox ohne float, also mit margin auf den Platz setze, habe ich das gleiche Ergebnis. (s. Bild 2)

Nur leider weiss ich nicht, wie man so eine Box ohne float und margin sonst noch auf den gewünschten Platz bekommen kann.

Gruss
Commi
 
Ich habe den Rand jetzt mit "position: absolute;" bestückt.
Nun funktioniert das mit der linken und rechten Spalte.

Danke trotzdem.

Gruss
Commi
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück