HTML+CSS: Problem mit Positionierung

Beffo38 · 29.09.2005

Hallo zusammen

Ich hab da ein kleines Problem mit HTML. Und zwar geht es darum, dass ich zwei Spalten (jeweils in DIV-Boxen) haben möchte, die nebeneinander stehen. Diese sollen wiederum in einer weiteren Box sein, die beide umschließt und zentriert in der Mitte ist.

Der vereinfachte Code sieht so aus:

PHP:

<html>
<head><title>test</title>
<style type="text/css">
<!--									
	#inhalt { width: 250px; border: dashed 1px red;
                     text-align: left; vertical-align: top;}
	#links  { position: relative; top: 0px; left: 10px; width: 100px;
                     border: dashed 1px blue; }
	#rechts { position: relative; top: 0px; left: 120px; width: 100px;
                      border: dashed 1px green; }
//-->
</style>
<body>

<div align="center">
	<div id="inhalt">
		<div id="links">
			Das<br />hier<br />steht<br />links.
		</div>
		<div id="rechts">
			Und<br />das<br />hier<br />steht<br />rechts.
		</div>
	</div>
</div>

</body>
</html>

Hier seht ihr wie es aussehen soll

und wie es leider im Moment aussieht

Joa... hat jemand ne Ahnung, wie ich's hinbiegen kann?

PS: Einen negativen Wert beim top-Attribut des rechten Kästchens einzutragen gilt nicht. Denn die Texte in den Boxen können ja auch mal länger sein, und dann passt's wieder nicht.

PPS: Hoffe, das ist das richtige Unterforum ^^

Pilli · 29.09.2005

hilft dir float?
z.B. hier unter Lösung 2:
http://www.kaipahl.de/brain/web_cssfloat.html

Phil S. · 29.09.2005

Hallo,

jup, float wäre wohl das beste in dem Fall. Müsste so sein:

HTML:

<style type="text/css">
<!--                                    

#inhalt 
{
	width: 240px; 
	border: dashed 1px red;
	text-align: left; 
	vertical-align: top;
	padding-left: 10px;
}

#links  
{ 
	width: 100px;
	border: dashed 1px blue; 
	float: left;
}

#rechts 
{ 
	margin-left: 20px;
	left: 120px; 
	width: 100px;
        border: dashed 1px green;
}
//-->
</style>

Bye
PS

Beffo38 · 29.09.2005

Jup, das war die zündende Idee, danke für den Tipp.

Ich hab dann noch ein bisserl gebastelt und eine dritte Spalte in der Mitte eingefügt. Jetzt isses ein richtig schönes Layout

.

PHP:

<html>
<head><title>test</title>

<style type="text/css">
<!--


#inhalt 
{
	width: 340px; 
	background-color: red;
	text-align: left; 
	vertical-align: top;
}

#kopf
{	height: 40px;
	width: 100%;
	background-color: aliceblue;
}

#links  
{ 
	width: 100px;
	background-color: blue; 
	float: left;
}

#rechts 
{ 

	left: 210px;
	width: 100px;
        background-color: green;
	float: right;
}

#mitte
{
	margin-left: 110px;
	width: 120px;
	background-color: orange;
}

#fuss
{
	height: 20px;
	width: 100%;
	background-color: antiquewhite;
}


//-->
</style> 


<body>

<div align="center">

	<div id="inhalt">

		<div id="kopf">
			Kopf.
		</div>

		<div id="links">
			Das<br />hier<br />steht<br />links.
		</div>

		<div id="rechts">
			Und<br />das<br />hier<br />steht<br />rechts.
		</div>

		<div id="mitte">
			Lalalala<br />das<br />hier<br />sollte<br />mittig<br />zwischen<br />beiden<br />stehen.
		</div>

		<div id="fuss">
			Fu&szlig;zeile.
		</div>



	</div>

</div>

</body>
</html>

Phil S. · 29.09.2005

Hi,

jep, sieht gut aus. *great*

Nur wenn du schon Design und Struktur versuchst zu trennen, würde ich noch das "align=center" beim ersten div rausnehmen und ins CSS einbauen.

Bye
PS

Beffo38 · 29.09.2005

Da gibt es ein Problem: Opera kann mit text-align:center nicht umgehen, bzw. er zentriert den Bereich nicht. Ich habe irgendwo den Tipp bekommen, dass ich es mit margin-left/right:auto versuchen soll, aber das haut bei keinem der drei Browser (Firefox, IE, Opera) hin.

Zudem nervt ein wenig, dass der Internet Explorer die mittlere Box ein wenig weiter rechts darstellt, als die anderen beiden Browser.

Aber gut, unterm Strich passt's ja

.

Pilli · 29.09.2005

ja, das ist leider ein Problem.
Auch mit den Rändern mußt du aufpassen, weil die leider von Browsern teilweise unterschiedlich interpretiert werden

Phil S. · 29.09.2005

Heyho,

Beffo38 schrieb:
Da gibt es ein Problem: Opera kann mit text-align:center nicht umgehen, bzw. er zentriert den Bereich nicht.

Sollte er auch nicht. Wie der Name schon sagt, bezieht sich text-align auf den text.

Ich habe irgendwo den Tipp bekommen, dass ich es mit margin-left/right:auto versuchen soll, aber das haut bei keinem der drei Browser (Firefox, IE, Opera) hin.

"margin: auto", finde ich ist eh eine ziemlich zwiespältige Methode. Ich würde das so lösen:

HTML:

<html>
<head><title>test</title>

<style type="text/css">
<!--


#inhalt 
{
    width: 340px; 
    background-color: red;
    text-align: left; 
    vertical-align: top;
    position: absolute;
    left: 50%;
    margin-left: -170px; /* 50% of width */ 
}

#kopf
{    height: 40px;
    width: 100%;
    background-color: aliceblue;
}

#links  
{ 
    width: 100px;
    background-color: blue; 
    float: left;
}

#rechts 
{ 

    width: 100px;
        background-color: green;
    float: right;
}

#mitte
{
    margin-left: 107px; /* for IE */
    width: 120px;
    background-color: orange;
}

html>body #mitte
{
    margin-left: 110px; /* for real browsers */
}

#fuss
{
    height: 20px;
    width: 100%;
    background-color: antiquewhite;
}


//-->
</style> 


<body>

<div>

    <div id="inhalt">

        <div id="kopf">
            Kopf.
        </div>

        <div id="links">
            Das<br />hier<br />steht<br />links.
        </div>

        <div id="rechts">
            Und<br />das<br />hier<br />steht<br />rechts.
        </div>
        
        <div id="mitte">
            Lalalala<br />das<br />hier<br />sollte<br />mittig<br />zwischen<br />beiden<br />stehen.
        </div>

        <div id="fuss">
            Fu&szlig;zeile.
        </div>



    </div>

</div>

</body>
</html>

Geht zu 100% in jedem Grafik-Browser, sogar im IE.

Beffo38 schrieb:
Zudem nervt ein wenig, dass der Internet Explorer die mittlere Box ein wenig weiter rechts darstellt, als die anderen beiden Browser.

Du hast recht. Tja, IE halt.

Hab aber mal nen Hack reingemacht, so dass es in allen Browsern passt.
Zur Erklärung:
Das "html>body" versteht der IE nicht. Deshalb setzt man mit margin-left in #mitte erstmal die werte fürn IE und überschreibt sie dann mit "html>body #mitte".

Willkommen in der wunderbaren Welt des CSS.

Bye
PS

Beffo38 · 29.09.2005

Danke für den Tipp. Wie ich auch noch zufällig gesehen habe, kann man auch so tricksen:

irgendwas: 100px;
irgendwas: 200 px; //Mit Leerzeichen, wird vom Firefox ignoriert und gilt deshalb nur beim IE

Zu dem Tipp mit der Minus-Verschiebung und den 50%: Sobald man das Browserfenster verkleinert, verschwindet dabei aber ein Teil des Inhalts links, und lässt sich auch nicht herscrollen. Soweit war ich leider auch schon :/.

A propos: Ganz behämmert ist noch was anderes, und zwar die Geschichte mit einer Hintergrundgrafik für den content-Bereich. Diese Grafik soll hinter dem ganzen content stehen, und falls er zu kurz ist, soll die Grafik trotzdem bis ganz unten weitergehn.

Problem:

"Halbvolle" Seiten:
- IE stellt Hintergrundgrafik nicht bis zum unteren Fensterrand dar
- Firefox arbeitet korrekt

Seiten, bei denen gescrollt werden muss:
- IE stellt Hintergrundgrafik korrekt hinter dem gesamten Content dar
- Beim Firefox ist die Grafik nur auf der ersten Seite zu sehen, beim runterscrollen kommt auf einmal nix mehr.

content hat Höhe 100% verpasst bekommen und ein Background-Image.

Zu sehen ist das ganze unter www.kfv-info.de/index.php - wer mag kann sich ja mal die "Startseite" und "Geschützter Bereich" sowohl im IE und im Firefox ankucken... und dabei so wie ich durchdrehen *buck*

feelx · 29.09.2005

Phil S. schrieb:
"margin: auto", finde ich ist eh eine ziemlich zwiespältige Methode.

Hi
Trotzdem wäre "margin: auto;" der korrekte Weg. Auf "text-align" muss ja nur ausgewichen werden, weil der IE Probleme macht. Siehe auch hier:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

Quelle: CSS 2.1 Spezifikation des W3C

@Beffo38
Ohne dass ich das Beispiel genau nachvollzogen habe - aber vielleicht kannst du bei den Hintergrundgrafik, bzw. Scrollseiten etwas erreichen, wenn du <html>, bzw <body> ebenfalls eine "height: 100%;" gibst... ist aber nur so ein Verdacht, hatte mal ein ähnliches Problem.

OBrian · 29.09.2005

Beffo38 schrieb:
...
content hat Höhe 100% verpasst bekommen und ein Background-Image.

Zu sehen ist das ganze unter www.kfv-info.de/index.php ...

Deine Seite? Wenn man das "height:100%" ersatzlos streicht, ist beim FF auf Scroll-Seiten erstmal alles in Butter

Das nicht ganz so haarsträubende Problem des IE mit der unausgefüllten Seite ist etwas schwieriger zu lösen (min-height wird nicht interpretiert); da es eine php-Seite ist, könnte man sich die Bildschirmhöhe in eine Variable auslesen und in einen zweiten, dahinterliegenden Div-Bereich mit gleichem Hintergrundbild als absolute Höhe einfügen. Gut, das ist getrickst, aber das muß man sowieso immer irgendwie.

Beffo38 · 29.09.2005

Ich bin im Moment wirklich sehr stark am überlegen, ob ich nicht wieder Tabellen einsetze. Das Stretching is einfach nur zum kotzen *grml*.

Ajo: Hier noch ein Bild von der ganzen Sache. Für diejenigen, die es nicht ausprobieren wollen

.

OBrian · 30.09.2005

Klar, da der Firefox das "height:100%" als volle Browserfensterhöhe interpretiert, der IE aber als volle Inhaltshöhe. Probier doch wenigstens mal aus, was ich geschrieben habe!

Hier, kopier das doch mal spaßeshalber in eine leere Datei mit html-Endung (ich hab gerade keinen Webspace zur Hand):

<html>
<head>
<style type="text/css">

</style>
<script type="text/javascript">
function ie() {
document.getElementById("b").style.height = document.body.offsetHeight-120;
}
function ff() {
document.getElementById("b").style.height = innerHeight-120;
}
</script>
</head>
<body>
<br>
<a href="javascript:ie()">- für IE</a><br>
<a href="javascript:ff()">- für FF</a><br>
in Opera geht beides<br>

<div id="a">dies ist ein fließtext, der aber nicht die gesamte seite bedeckt... dies ist ein fließtext, der aber nicht die gesamte seite bedeckt... dies ist ein fließtext, der aber nicht die gesamte seite bedeckt... </div>

<div id="b">dieser bereich deckt die ganze seite ab .... dieser bereich deckt die ganze seite ab .... dieser bereich deckt die ganze seite ab .... dieser bereich deckt die ganze seite ab .... dieser bereich deckt die ganze seite ab .... dieser bereich deckt die ganze seite ab .... dieser bereich deckt die ganze seite ab .... dieser bereich deckt die ganze seite ab .... dieser bereich deckt die ganze seite ab .... </div>
</body></html>

Beffo38 · 30.09.2005

Wow, nicht schlecht Commander, cooler Hack *yeah*

. Danke für die Mühe

.

Bloß widerstrebt es mir persönlich etwas, JavaScript (clientseitige Anwendungslogik) für das Design einzusetzen. Und. LEIDER ist das Problem mit den überlangen Seiten auch beim Firefox noch gegeben. Sprich: Dort reißt der Hintergrund beim scrollen ab :/.

Ich werd noch was anderes ausprobieren: Ein zweiter Layer, der 100% hoch ist, das Hintergrundbild trägt, eine fixe Position hat und hinter dem Content-Layer liegt. Klingt übel, könnte aber funktionieren

.

feelx · 30.09.2005

Aber O'Brian hat recht - warum nimmst im Style-Sheet beim div#content das
height: 100%; nicht raus - dann bricht firefox auch nicht mehr ab...
und BTW: warum //border: dashed 1px;. Mit dem Doppelslash verhinderst du, dass der FF den Rahmen "dotted" - ist das Absicht?

Beffo38 · 30.09.2005

Der Border war nur zum debuggen da. Er kommt wieder raus.

Jo, was passiert, wenn ich das height: 100% rausnehme? Dann wird der Hintergrund bei einer halbleeren Seite wieder nicht gestreckt, wobei das beim IE eh nicht geklappt hat (siehe Bild 2).

Der Punkt ist einfach, dass es so aussehen soll wie auf den Bilder 1 + 4 - und das hat bisher mit keiner einzigen Variante, die ich ausprobiert habe, geklappt. Auch mit dem an sich cewlen Script von O'Brien nicht (siehe mein letzter Post).

OBrian · 30.09.2005

Nein, das sag ich ja, das "100%" wirkt nicht gegen die halbleeren Seiten. Trotzdem würde ich auf Prozentangaben verzichten, das bringt nichts, da es unterschiedlich interpretiert wird, und haut einem höchstens das Layout auseinander. Ich würde erstmal versuchen, eine Lösung zu finden, die auf allen Browsern läuft und dann nur im Notfall eine Browserweiche einzubauen, da man damit immer doppelt und dreifach arbeitet.

Beiß Dich nicht an bestimmten Programmierstrategien ("100%", oder "kein Javascript") fest, bei Webseiten muß man leider öfter mal "unsauber" schreiben, dafür sind die Webstandards zu ungenau unterstützt.

Übrigens funktioniert das document.body.offsetHeight imho erst nach Aufbau des body-Elements, mußt die Javascript-Funktion also mit dem onload-Handler auslösen.

PS: Der Rand wäre nochmal ne Herausforderung gewesen (da hätte man mit Zusatzgrafik arbeiten müssen), aber wenn keiner hin soll, ist die Sache doch relativ einfach.

feelx · 01.10.2005

OBrian schrieb:
Beiß Dich nicht an bestimmten Programmierstrategien ("100%", oder "kein Javascript") fest, bei Webseiten muß man leider öfter mal "unsauber" schreiben, dafür sind die Webstandards zu ungenau unterstützt.

Da stimme ich zu - das dürfte auch der Grund sein, weshalb immer noch soviele Tabellen-designs neu ins Web gestellt werden.
JavaScript hat halt u.U. den Nachteil, dass die Navigation von Suchmaschinen nicht klappt.

Beffo38 · 03.10.2005

Da der Prophet nicht zum Berg gekommen ist, musste halt der Berg zum Propheten hopsen. Oder anders gesagt: Das ganze Layout ist jetzt nicht mehr zentriert, sondern pappt links, und hat einen einzigen Hintergrund (welcher body zugeteilt wurde). Is zwar nicht ganz das, was ich anfangs wollte, aber es ist - wie ich finde - der beste Kompromiss

.

Danke nochmal an alle für die Tipps. Speziell die html>body-Geschichte hatte ich bis vor kurzem noch nicht gewusst, und man braucht sie recht häufig

.

HTML+CSS: Problem mit Positionierung

Beffo38

Fleet Captain Special

Pilli

Grand Admiral Special

Phil S.

Vice Admiral Special

Beffo38

Fleet Captain Special

Phil S.

Vice Admiral Special

Beffo38

Fleet Captain Special

Pilli

Grand Admiral Special

Phil S.

Vice Admiral Special

Beffo38

Fleet Captain Special

feelx

Grand Admiral Special

OBrian

Moderation MBDB, ,

Beffo38

Fleet Captain Special

OBrian

Moderation MBDB, ,

Beffo38

Fleet Captain Special

feelx

Grand Admiral Special

Beffo38

Fleet Captain Special

OBrian

Moderation MBDB, ,

feelx

Grand Admiral Special

Beffo38

Fleet Captain Special

Ähnliche Themen