Wie bekomme ich dieses Layout hin

[Garog]

Hallo zusammen.

Der Betreff ist leider etwas "nichts sagend" aber ich wusste nicht wie ich folgendes Problem zusammenfassen könnte. ;)

Ich möchte folgendes realisieren:

Die drei Elemente in der Mitte, Menü, Inhalt und Sidebar, sollen eine feste Größe haben.
Die beiden Seite, Block 1 und Block 2, sollen jeweils den "Rest" auffüllen.

Jeder Bereich soll auf einem gemeinsamen Hintergrundbild "platziert" sein.

Ich habe schon diverse Möglichkeiten probiert. Über Tabellen oder <div> Elemente.

Soweit ist mir auch alles klar wie es "theoretisch" geht.
Logo und Topnav sind easy.
Gemeinsames Hintergrundbild auch. (div Element in dem sich alles weitere befindet)
Drei oder mehr Elemente nebeneinander zu bekommen sind ebenfalls nicht das Problem (float).
Das Problem ist nur die fixe Größe der drei mittleren Elemente und die variable der beiden äußeren. Das bekomme ich so gar nicht hin.

Ich wäre euch sehr dankbar für eine kleine Hilfestellung.
Gerne kann ich auch, bei Bedarf, meine bisherigen Code-versuche posten.

Lieben Gruß
Garog

[Gunnar Bittersmann]

@@Garog:

nuqneH

Ich möchte folgendes realisieren:

Für wen denn?

120 + 950 + 100 = 1170 Pixel? Wer hat denn solch einen breiten Viewport?

Das Problem ist nur die fixe Größe der drei mittleren Elemente […]

Du sagst es. Das ist ein Problem, das du beheben solltest. Verwende ein flexibles Layout, das sich dem Viewport des Nutzers anpasst!

[…] und die variable der beiden äußeren. Das bekomme ich so gar nicht hin.

Die drei mittleren Elemente in ein Element gruppieren und dieses horizontal zentrieren (margin: auto).

Qapla'

[Garog]

Für wen denn?
120 + 950 + 100 = 1170 Pixel? Wer hat denn solch einen breiten Viewport?

Jeder der nicht mit einem alten max 1280x1024 Bildschirm durch das Internet surft. ;) Zumal die Seite vom Thema her eh zum Großteil nur Nutzer mit großen Bildschirmen ansprechen wird, >20" und da sind wir schon sofort bei 1680px Breite.

An der Größe kann ich immer noch etwas ändern. ;) Das Layout ist ja erstmal das wichtige. Die Zahlen habe ich einfach mal aus der Luft gegriffen.

Du sagst es. Das ist ein Problem, das du beheben solltest. Verwende ein flexibles Layout, das sich dem Viewport des Nutzers anpasst!

Naja wenn ich es so machen wollen würde hätte ich nicht gefragt wie ich es statisch realisieren kann ;)
Ich möchte bzw muss aufgrund des Inhaltes die Elemente statisch machen.

Die drei mittleren Elemente in ein Element gruppieren und dieses horizontal zentrieren (margin: auto).

hmm... ich glaube das hatte ich schon aber es klappte nicht. Hier mal ein bissel Code zu einem Versuch:

  
#mainview {  
	margin:auto;  
}  
  
#left {  
	float: left;  
	height: 1000px;  
	width: auto;  
	overflow: hidden;  
	background: url('{T_IMAGESET_PATH}/x_custom/left.png') right no-repeat;  
}  
  
#center {  
	margin: 0 auto;  
	width: 950px;  
	float: left;  
	background: #333;  
	border: #000000 8px solid;  
	border-width: 2px 2px 2px 2px;  
}  
  
#right  {  
	height: 1000px;  
	width: auto;  
	overflow: hidden;  
	background: url('{T_IMAGESET_PATH}/x_custom/right.png') left no-repeat;  
  

und der html Code

  
<div id="mainview">  
  
<div id="left"></div>  
<div id="center"></div>  
<div id="right"></div>  
  
</div>  

wenn ich das so mache sind die drei Elemente nebeneinander aber nicht zentriert, dazu kommt dann noch das mein linkes Element nicht sichtbar ist weil er irgendwie eine Breite von 0px hat.

[Garog]

Ein schönes Beispiel wie ich es auch gerne haben würde.

http://www.aionsource.com/

Die Mitte besitzt eine feste Breite und in den beiden Seiten ist eine Grafik die sich anpassen.
Beide Grafiken sind sogar fixed.

Genau so würde ich es auch gerne machen nur bin ich bis jetzt auf keine Lösung gekommen.

[suit]

Genau so würde ich es auch gerne machen nur bin ich bis jetzt auf keine Lösung gekommen.

Gunnar hat dir bereits eine Antwort gegeben - gruppiere die Elemente und zentriere sie mittels margin: auto;.

[Steel]

Hoi!

Die Mitte besitzt eine feste Breite und in den beiden Seiten ist eine Grafik die sich anpassen.

?

Beide Grafiken sind sogar fixed.

Nicht im IE 6

Genau so würde ich es auch gerne machen nur bin ich bis jetzt auf keine Lösung gekommen.

Ja. Ein zentriertes Element auf einem zentrierten Hintergrund im Body ist aber nun wirklich nicht schwierig, oder?

[Garog]

Nicht im IE 6

Oh sry.. 6.. das was anders das stimmt ;)

aber ich will ja keinen schritt zurück machen mit der Seite und auf den IE nehme ich am wenigsten Rücksicht. Das ist ja so ein Kompatibilitätsmonster ;) in egal welcher Version ^^

[suit]

und auf den IE nehme ich am wenigsten Rücksicht.

d.h auf jene Browserfamilie mit dem größten Marktanteil wird am wenigsten Rücksicht genommen?

Das ist ja so ein Kompatibilitätsmonster ;) in egal welcher Version ^^

Kannst du das näher erläutern?

[Garog]

d.h auf jene Browserfamilie mit dem größten Marktanteil wird am wenigsten Rücksicht genommen?

Die Seite soll keine "public" Seite werden. Diejenigen die sich dort tummeln werden, nutzen sicherlich keinen IE ;)
d.h. du findest also das man immer den/das/die Größte unterstützen sollte in ihren Fehlern ?

Kannst du das näher erläutern?

Ich mach es mal kurz ^^

http://www.acidtests.org/

Oder öffne http://acid3.acidtests.org/ einfach mal mit dem IE/Firefox/Opera/Safari/Chrome.. wie auch immer.

oder auch die alte Version die der IE(7) immer noch nicht beherscht.
http://acid2.acidtests.org/

Was das ist, wieso das so ist und was es macht kannst du hier lesen:(ist aber Englisch)
http://www.webstandards.org/2008/10/02/dowehaveawinner/

[suit]

»» Kannst du das näher erläutern?
Ich mach es mal kurz ^^

Ich antworte kurz: Einen Webstandard nicht zu unterstützen (speziell CSS) ist vollkommen in Ordnung - ACID-Tests prüfen nicht, ob ein Browser Standardkonform ist oder nicht, sie prüfen ob weissderteufelwieviele Features unterstützt. Die ACID Tests sind leider teilweise sehr praxisfern.

[Garog]

Ich antworte kurz: Einen Webstandard nicht zu unterstützen (speziell CSS) ist vollkommen in Ordnung - ACID-Tests prüfen nicht, ob ein Browser Standardkonform ist oder nicht, sie prüfen ob weissderteufelwieviele Features unterstützt. Die ACID Tests sind leider teilweise sehr praxisfern.

Also sowas habe ich

O.o
Wo hast du den son Kram ausgebuddelt ? Bestimmt bei Microsoft irgendwo in der IE werben oder ?

Alleine hiermit disqualifizierst du dich:

Einen Webstandard nicht zu unterstützen (speziell CSS) ist vollkommen in Ordnung

Hier mal nen bissel mehr auf deutsch zum tollen IE...
http://macx.de/journal/ingoriert-den-internet-explorer/

[Harlequin]

Yerf!

O.o
Wo hast du den son Kram ausgebuddelt ? Bestimmt bei Microsoft irgendwo in der IE werben oder ?

Naja, die ACID-Tests haben schon teilweise ein paar komische Szenarien eingebaut. Auf der anderen Seite: der IE8 besteht den ACID2 und hat laut Microsoft die beste CSS2.1-Unterstützung aller Browser. Nach manchen Kommentaren die ich bisher gelesen hab scheint das sogar zu stimmen.

ACID3 basiert auf einem Standard, der noch in Arbeit ist... kann also durchaus passieren, dass der Test mit der endgültigen Fassung von CSS3 inkompatibel wird.

Hier mal nen bissel mehr auf deutsch zum tollen IE...
http://macx.de/journal/ingoriert-den-internet-explorer/

naja... ne MAC-Seite, die die Realität in deutschen Unternehmen ignoriert...

Gruß,

Harlequin

PS: ich muss mal meine Sig auf lt IE 8 updaten...

[suit]

ACID3 basiert auf einem Standard, der noch in Arbeit ist... kann also durchaus passieren, dass der Test mit der endgültigen Fassung von CSS3 inkompatibel wird.

Das war sogar schon mal der Fall - Opera und Safai rühmten sich der 100%igen Standardkonformität und 1:1 umsetzung von ACID3. Später kam die Mozilla-Keule und deckte einen Fehler[1] im Test auf. Daraufhin waren beide Mitbewerber nicht mehr konform und mussten nachbessern.

Wie können also standardkonforme Browser einen verbuggten Test korekt darstellen? Ein Schelm, wer böses denkt.

[1] ja, die Tests enthalten absichtliche Fehler, die von standardkonformen Browsern sogar ignoriert werden müssen.

[Garog]

naja... ne MAC-Seite, die die Realität in deutschen Unternehmen ignoriert...

Naja ob Mac oder nicht ;) Die Aussage ist zutreffend :)

Hier auch mal soetwas als nicht Mac-Version ;)
(btw keine IE Bugfixes in der Seite ;) )

http://yatil.de/

Mit dem Acid finde ich kann man "unwissenden" recht gut verdeutlichen was sie für einen Browser haben. Die meisten wissen selbst heutzutage nichtmal was der IE für Sicherheitslücken mitbringt und was beim Bau einer Internetseite für fummelein gemacht werden damit der IE auch alles schön anzeigt...

Schick einem IE-Ahnungslosen den Acid-Test und sage ihm er soll durchlesen was es ist. Dann probiere das mal mit dem Firefox oder Opera. Hat er es verstanden wird er sich spätestens jetzt einen der beiden installieren ;)

[suit]

Wo hast du den son Kram ausgebuddelt ? Bestimmt bei Microsoft irgendwo in der IE werben oder ?
Alleine hiermit disqualifizierst du dich:
»» Einen Webstandard nicht zu unterstützen (speziell CSS) ist vollkommen in Ordnung

Nein, ich disqualifiziere mich nicht, ich zitiere mal aus der spezifikation:

Syntax and basic data Types; Rules for handling parsing errors:
"User agents must ignore a declaration with an unknown property."
"User agents must ignore a declaration with an illegal value"

Übertragen heisst das: ein ungültiger Wert oder eine unbekannte Eigenschaft kann auch etwas sein, was der Browser noch nicht versteht. Dieses zu ignorieren ist völlig standardkonform.

[Steel]

Hoi!

aber ich will ja keinen schritt zurück machen mit der Seite und auf den IE nehme ich am wenigsten Rücksicht. Das ist ja so ein Kompatibilitätsmonster ;) in egal welcher Version ^^

Das aendert aber ja nichts daran, das ein Hintergrundbild im body und ein zentriertes Element dein "Problem" loesen.

[Garog]

Hehe ^^

Also immer wieder toll wie weit Fragen doch vom eigentlichen Thema abschweifen können. Wie breit das Forum ist und wer was für ein kleines Netbook hat oder iPhone ist mir recht egal und es auch nicht entscheidend für die Lösung des Problems.

Von mir aus kann das Menü auch 5px, der Inhalt 6px und die Sidebar 5px breit sein.

Auch die bisher gegebenen Antworten führen nicht zu einer Lösung.

Selbst wenn ich die drei Elemente zusammen in ein Element nehme und dieses zentriere geht das nicht. Weil er dann die Elemente in dem übergeordneten nicht zentriert. Wieso... ich habe da jetzt Personen gefragt die ihr Geld mit Webdesign verdienen und diese sagten dazu nur "kenne das Problem, wieso das passiert weiß ich auch nicht"

Ich glaube das Problem ist auch noch gar nicht so klar.

Ich vereinfache es mal auf das wesentliche Problem.

Je Breiter der Viewport ist, um so mehr kann man von den beiden Seiten sehen. In diesen Seiten sind/sollten 2 Grafiken enthalten/sein.
Die Grafik in der linken Box ist rechtsbündig und die in der rechten Box linksbündig.
Wird der Browser nun zusammengeschoben bleibt das mittlere Element gleich groß und die beiden Seiten verkleinern sich jeweils um 50% der gesamten Fensterverkleinerung (zusammen sind es dann die 100% ;))

Ich habe das Problem jetzt erstmal so gelöst:

  
#left {  
	position:fixed;  
	height:1000px;  
	width:50%;  
	background:url('{T_IMAGESET_PATH}/x_custom/left.gif') no-repeat;  
	background-position:right;  
	left:-475px;  
	top:170px;  
	overflow: hidden;  
	z-index:1;  
}  
  
#wrapheader {  
	position:relative;  
	width: 950px;  
	margin:0 auto;  
	background: #333;  
	background-position: 0 100px;  
	border: #000000 8px solid;  
	border-width: 2px 2px 2px 2px;  
	z-index:2;  
}  
  
#right {  
	position:fixed;  
	height:1000px;  
	width:50%;  
	background:url('{T_IMAGESET_PATH}/x_custom/right.gif') no-repeat;  
	background-position:left;  
	right:-475px;  
	top:150px;  
	overflow: hidden;  
	z-index:1;  
}  

  
<div id="left"></div>  
<div id="right"></div>  
<div id="wrapheader"></div>  

Damit erreiche ich genau den Effekt den ich möchte.
Hier mal ein Beispiel für euch.
http://87.230.9.197/layout/layout.html

btw.. auch im IE isses fixed ;)
Und wenn ich etwas Teste dann probiere ich es mit dem Browser der die größte Kompatibilität zu den Standards aufweist. Opera.
Wenns dann im IE nicht so gut aussieht müssen da andere Leute etwas dran machen. Ich finde nicht das man auf diese Art immer noch die macht von Microsoft und deren eigener Suppe unterstützen sollte.
Traurig ist nur das die meisten Leute nicht merken das sie den falschen Browser haben und nicht auf einer schlechten Internetseite sind.

[suit]

Also immer wieder toll wie weit Fragen doch vom eigentlichen Thema abschweifen können. Wie breit das Forum ist und wer was für ein kleines Netbook hat oder iPhone ist mir recht egal und es auch nicht entscheidend für die Lösung des Problems.

Du hast bereits eine Antwort erhalten - ich wiederhole sie gerne nochmal:
Gruppiere die drei Spalten und zentriere sie mittels margin: auto; Wenn es damit ein Problem gibt, gehe auf dieses Problem ein.

Metadiskussionen sind Teil dieses Forums und gestalten unsere Freizeit bzw. helfen uns, uns selbst zu verbessern - wenn du nicht daran teilnehmen möchtest, ignoriere sie. Einem geschenkten Gaul schaut man nicht ins Maul - nimm diese Anmerkungen als Rat, Tipp oder wie auch immer - mach was draus oder ignoriere sie, aber beschwere dich nicht, dass du sie bekommst - das ist imho unhöflich.

Auch die bisher gegebenen Antworten führen nicht zu einer Lösung.

Es gab' erst einen Lösungsvorschlag - der ist imho der einzig schlaue.

ich habe da jetzt Personen gefragt die ihr Geld mit Webdesign verdienen und diese sagten dazu nur "kenne das Problem, wieso das passiert weiß ich auch nicht"

Diese Person sollte dringen den beruf wechseln

Ich glaube das Problem ist auch noch gar nicht so klar.

Doch ist es und zwar exakt.

Ein zentriertes Element über einem zentrieren Hintergrund - das wurde bereits gesagt.

Ich habe das Problem jetzt erstmal so gelöst:

Nein, du hast es nicht gelöst sondern mit position herumgeschleudert.

Löse dein Problem von außen nach innen und brich die Aufgabenstellung auf mehrere Teilaufgaben herunter - löse das Problem mit dem Zentrieren EINES Elements, ignoriere das Problem mit den drei Spalten die nebeneinander stehen sollen (das ist eine anderes Teilproblem).

Aufgabe: erstelle ein HTML dokument mit einem einzelnen div-Element innerhalb des body-Elements, befülle dies mit Blindtext und zentriere es.

Wenn das geschafft ist, poste dein Ergebnis als Online-Beispiel.

Danach gehen wir zum Problem "zentrieren des Hintergrunds" über.

[Garog]

;)

also ganz so dumm wie das vielleicht klingen mag bin ich dann doch nicht was das angeht ;)

du sagst das problem ist klar
"Ein zentriertes Element über einem zentrieren Hintergrund - das wurde bereits gesagt."

das ist nicht das problem. ;)

das problem sind drei div elemente die mit float nebeneinander liegen, das mittlere element zentriert angezeigt werden soll mit einer fixen größe und die beiden seiten sollen den rest des viewports füllen je nach breite.

aber ich werde deinem weg mal folgen :)

lösung:

<body>  
<div style="margin:0 auto; width:300px; height:300px; background:#0F0; text-align:center;">Ich bin ein zentriertes Div-Element</div>  
</body>

http://87.230.9.197/layout/1.html

[Harlequin]

Yerf!

das problem sind drei div elemente die mit float nebeneinander liegen, das mittlere element zentriert angezeigt werden soll mit einer fixen größe und die beiden seiten sollen den rest des viewports füllen je nach breite.

Was soll in den 2 seitlichen Blöcken enthalten sein, nur das Bild oder auch Inhalt?

Wenn es nur das Bild sein soll, so sollte sich das mit einem zentrierten DIV und einem Hintergrundbild (im übergeordneten Element) erledigen lassen.

Wenn auch Inhalt drinn sein soll, dann wird tatsächlich schwieriger. Aber ich glaube hier wurde schonmla eine Lösung dafür gefunden, die müsste irgendwo im Archiv sein...

Gruß,

Harlequin

[Garog]

juchu :)

danke, danke danke^^

ich glaube du hast es verstanden ;)

die lösung mit dem hintergrundbild auf dem dann einfach die grafiken seitlich angepasst werden und dieses zentriert wird wäre eine möglichkeit und würde optisch den gewünschten effekt bewirken.
Wobei man da überlegen muss. Jetzt habe ich eine 3x3px große Grafik welche sich ständig im gesamten Hintergrund wiederholt (repeat) die Ladezeit dieser ist natürlich wunderbar^^
nun kann ich mit zwei einzelnen elementen dort auch zwei neue grafiken drin positionieren. diese beschränken sich dann NUR auf die grafiken. somit habe ich dann nur ein 3x3px und zwei kleine grafiken zu laden anstatt ein riesen hintergrundbild welches alles enthält.

Aber es soll ja auch noch Inhalt rein.
Ein wenig Text zumidnest, über den Sinn von "verschwindene" Texte oder anderen Dingen möchte ich an dieser Stelle mal nicht reden ^^

http://87.230.9.197/layout/layout.html
das ist meine Lösung bisher. Auch wenn es über position:fixed gelöst ist, habe ich bisher keinen anderen Weg gefunden drei div-Elemente in der Art nebeneinander unter zu bringen

[suit]

das ist meine Lösung bisher. Auch wenn es über position:fixed gelöst ist, habe ich bisher keinen anderen Weg gefunden drei div-Elemente in der Art nebeneinander unter zu bringen

Ich verstehs immer noch noch - warum nicht einfach ein einzelnes Element, welches per position: absolute; dahinterpositioniert ist?

[Garog]

Ich verstehs immer noch noch - warum nicht einfach ein einzelnes Element, welches per position: absolute; dahinterpositioniert ist?

Kannst du einen Beispielcode oder eine Seite zeigen ?

[suit]

Kannst du einen Beispielcode oder eine Seite zeigen ?

Die Aion-Seite macht doch genau das?

das html-Element hat jetzt einen grünen Hintergrund da gehört natürlich deine "verdammt Breite", sich endlos wiederholende, 3px hohe Grafik rein.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Foobar!</title>  
	<style type="text/css">  
		html {  
			background: green;  
		}  
		body {  
			background: url(http://www.aionsource.com/images/bkg-page-cover.jpg) no-repeat center;  
		}  
  
		#text {  
			width: 1000px;  
			margin: 0 auto;  
			background: blue;  
			height: 600px;  
		}  
	  
	</style>  
</head>  
<body>  
	<div id="text">foo</div>  
</body>  
</html>

[Garog]

Die Seite sollte auch kein Beispiel für die Funktion bzw den Code sein sondern das Design das ich es anders haben möchte denke ich sollte inzwischen klar geworden sein ;) Hatte gerade nix besseres zur Hand ;)

[suit]

Die Seite sollte auch kein Beispiel für die Funktion bzw den Code sein sondern das Design das ich es anders haben möchte denke ich sollte inzwischen klar geworden sein ;) Hatte gerade nix besseres zur Hand ;)

Ist mir klar - aber ich fürchte ich kann dein Problem einfach nicht nachvollziehen.

[Garog]

Ist mir klar - aber ich fürchte ich kann dein Problem einfach nicht nachvollziehen.

Den Sinn verstehen oder die Funktion ?

Über Sinn und Unsinn lass uns mal nicht reden ;)

Versuche ich es nochmal einfacher zu machen.

Drei <div> Elemente sind nebeieinander angeordnet.

Das in der Mitte ist 500px breit und zentriert. Das links und rechts daneben ist jeweils so breit, wie noch Platz im Browser ist.

[suit]

Den Sinn verstehen oder die Funktion ?

Die Funktion.

Über Sinn und Unsinn lass uns mal nicht reden ;)

Das ist mir egal - es wurde zu Protokoll gebracht, dass es ggf. nicht schlau ist, aber das ist nicht das thema.

Das in der Mitte ist 500px breit und zentriert. Das links und rechts daneben ist jeweils so breit, wie noch Platz im Browser ist.

Ja, so hab' ich das auch verstanden - darum das von mir gepostete Beispiel - Was ist damit nicht OK?

1 Hintergrundbild im html-Element
1 Hintergrundbild im body-Element (zentriert)
1 Zentriertes Element innerhalb des body-Elements

Vermittelt den Effekt, den du möchtest - und anstatt zwei Bilddateien hast du zwei.

[Garog]

Genau zwei Bilder wobei eins davon so groß ist das es auch hinter dem "Inhalt" ist. Dazu kommt dann noch eine Transparenz für das zweite Bild die ich brauche.
Da gibt es dann .gif was einfach mies aussieht oder .png was einfach zu groß wird. (beides natürlich auch schon ausprobiert)

Und wie bekomme ich jetzt Inhalt neben das zentrierte Element ?
z.B. links ein "Hallo Welt" und rechts ein Bild.

[suit]

Da gibt es dann .gif was einfach mies aussieht oder .png was einfach zu groß wird. (beides natürlich auch schon ausprobiert)

PNG ist, wenn es "mies" aussieht idR. kleiner als GIF.

Ein PNG lässt sich, entsprechend beschaffen, auf sehr kleine Größe stauchen.

Und wie bekomme ich jetzt Inhalt neben das zentrierte Element ?
z.B. links ein "Hallo Welt" und rechts ein Bild.

Wenn ich dich richtig verstanden habe:
Garnicht - du tust nur so, füge weitere Elemente ein. Mach das Zentriere Element bereiter und füge da drinnen ebensprechende Spalten ein.

[Garog]

PNG ist, wenn es "mies" aussieht idR. kleiner als GIF.

Ein PNG lässt sich, entsprechend beschaffen, auf sehr kleine Größe stauchen.

Ich meine nicht die Größe in px sondern die Dateigröße ;)

Wenn ich dich richtig verstanden habe:
Garnicht - du tust nur so, füge weitere Elemente ein. Mach das Zentriere Element bereiter und füge da drinnen ebensprechende Spalten ein.

Jetzt bist du fast auf dem richtigen Weg ;) Wenn die Spalten jetzt <div> Elemente sind dann siehts noch besser aus :)
Und wenn diese sich verkleiner und vergrößer würden beim skallieren des Browsers wäre es perfekt. Genau so habe ich es ja versucht.
Klingt total simpel, aber probiere es mal selber aus und du wirst mit genau so viele ??? über dem Kopf stehen haben wie viele andere auch ;)

Poste dann mal ein Code oder eine Testseite zu dem von dir gemachten :)

[suit]

Ich meine nicht die Größe in px sondern die Dateigröße ;)

Die bleibt auch überschaubar, wenn man die Grafik entsprechend gestaltet bzw. komprimiert :)

Und wenn diese sich verkleiner und vergrößer würden beim skallieren des Browsers wäre es perfekt. Genau so habe ich es ja versucht.

Warum sollen sich diese jetzt wieder verkleinern und vergrößern?

Poste dann mal ein Code oder eine Testseite zu dem von dir gemachten :)

Ist doch schon da.

[Garog]

»» Ich meine nicht die Größe in px sondern die Dateigröße ;)

Die bleibt auch überschaubar, wenn man die Grafik entsprechend gestaltet bzw. komprimiert :)

»» Und wenn diese sich verkleiner und vergrößer würden beim skallieren des Browsers wäre es perfekt. Genau so habe ich es ja versucht.

Warum sollen sich diese jetzt wieder verkleinern und vergrößern?

»» Poste dann mal ein Code oder eine Testseite zu dem von dir gemachten :)
Ist doch schon da.

uhh...

Warum sollen sich diese jetzt wieder verkleinern und vergrößern?

das sollen sie die ganze zeit... in der mitte feste größe. die beiden aussen sollen sich dem rest platz im browser anpassen... da ist seid meinem ersten post hier die rede von...

Ich denke wir lassen das, dreht sich im Kreis und es kommt weder eine Lösung noch ein Ansatz dabei rum. Bis auf einen glaube ich, ist das Problem auch nicht richtig verstanden worden.

Ich muss dazu sagen das ich kein kleiner Anfänger bin der Probleme hat ein Element zu zentrieren und da nen Hintergrund mittig drunter zu legen, auch die zwei die das beruflich machen brauchen ihren Job nicht wechseln, weil sie den schon seid Jahren erfolgreich und gut ausführen.

Soweit aber danke an Helfende für den Versuch ;)

[suit]

das sollen sie die ganze zeit... in der mitte feste größe. die beiden aussen sollen sich dem rest platz im browser anpassen... da ist seid meinem ersten post hier die rede von...

Aber es gibt doch keine beiden äußeren Elemente, das sieht nur so aus - das ist ein Hintergrundbild :)

Ich muss dazu sagen das ich kein kleiner Anfänger bin der Probleme hat ein Element zu zentrieren und da nen Hintergrund mittig drunter zu legen, auch die zwei die das beruflich machen brauchen ihren Job nicht wechseln, weil sie den schon seid Jahren erfolgreich und gut ausführen.

Na dann ist ja gut :) ggf. solltest du aber daran arbeiten, wie du Probleme oder Aufgabenstellungen beschreibst. Sonst kommt schnell etwas anderes dabei raus - das ist in dieser Branche sehr wichtig.

[Harlequin]

Yerf!

» das sollen sie die ganze zeit... in der mitte feste größe. die beiden aussen sollen sich dem rest platz im browser anpassen... da ist seid meinem ersten post hier die rede von...

Aber es gibt doch keine beiden äußeren Elemente, das sieht nur so aus - das ist ein Hintergrundbild :)

...und genau das ist das Problem. Garog möchte Inhalte in diesen Seitenspalten plazieren, weshalb dort nicht nur Hintergrundbild sondern auch ein Element sein muss. Das Element selbst ist nicht so das Problem, aber die korrekte Breite, damit die Inhalte nicht aus dem Browserfenster hinaus oder unter den mittleren Block hinunter rutschen ist ein Problem.

Solange CSS nicht Rechnen kann ist die einzige Lösung sich per display:table-cell das Verhalten von Tabellen zu nutze zu machen. Damit sollte das aber gehen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
  <head>  
  <title></title>  
  <style type="text/css">[code lang=css]  
  html{display:table;width:100%;height:100%}  
  body{display:table-row;min-height:100%}  
  #leftbar, #rightbar, #content{display:table-cell;}  
  #leftbar{background-color:darkblue;overflow:hidden;}  
  #leftbar div{position:relative;width:100%;}  
  #leftbar p{position:absolute;}  
  #rightbar{background-color:darkred;overflow:hidden;}  
  #rightbar div{position:relative;width:100%;}  
  #rightbar p{position:absolute;}  
  #content{background-color:darkgrey;width:400px;}

</style>
  </head>
  <body>
  <div id="leftbar"><div><p>Lorem ipsum dolor sit amet consectetuer.</p>
</div></div>
  <div id="content"><p>Lorem ipsum dolor sit amet consectetuer interdum Lorem convallis justo ipsum. Id Quisque In ipsum id pede Aenean interdum vel turpis a. Tristique consectetuer urna in tristique vel laoreet mauris et justo Aliquam. Platea laoreet pede gravida sapien odio elit feugiat enim sit Aliquam. Phasellus orci laoreet arcu massa habitasse dis cursus neque Ut elit. Rutrum eu Curabitur.</p>
</div>
  <div id="rightbar"><div><p>Lorem ipsum dolor sit amet consectetuer.</p>
</div></div>
  </body>
</html>[/code]

Im FF3 gehts schonmal (war aber etwas komplizierter als gedacht, das verhalten von tabellen ist einfach nicht zum Layouten geeignte...), hab aber grad keine Ahnung, was Opera da dran nicht mag :-(

Gruß,

Harlequin

[Harlequin]

Yerf!

hab aber grad keine Ahnung, was Opera da dran nicht mag :-(

Gefunden!

  html{display:table;width:100%;height:100%;table-layout:fixed;}  

Das table-layout:fixed bringt Opera dazu, die mittlere Spalte nicht breiter als die gewünschten 400px zu ziehen.

Gruß,

Harlequin

[Garog]

perfekt... einfach klasse.
Genau so sollte es sein :)

wenn jetzt der Text im linken Element noch rechtbündig sein würde dann wäre es absolut perfekt ^^

des klappt bei mir gerade aber noch nicht. *kopfkraz*

vielen vielen dank :)

[Harlequin]

Yerf!

perfekt... einfach klasse.
Genau so sollte es sein :)

naja, perfekt find ich's hjetzt nicht, da ich doch einige zusätzliche Elemente nur fürs layout einfügen musste. Leider haben Tabellen etwas komische Eigenheiten wie z.B. minimale Spaltenbreiten die sich nur schwer austricksen lassen.

Deshalb eben der trick mit der absoluten Positionierung. Das zusätzliche Element mit position:relative brauch ich, weil sich diese Eigenschaft nicht mit display:table-cell verträgt.

wenn jetzt der Text im linken Element noch rechtbündig sein würde dann wäre es absolut perfekt ^^

Im FF gings mal wieder auf anhieb, Opera braucht wieder den Zaunpfal (wobei ich hier fast sagen würde, dass Opera sogar Recht hat ;-)

  #leftbar p{position:absolute;text-align:right;right:0;}  

Es fehlte die Positionsangabe, dadurch lag der Textblock nicht dort, wo man ihn haben wollte.

Gruß,

Harlequin

[Garog]

Gleich Problem bei mir im Opera auch.

Zur Zeit bin ich aber ganz zufrieden mit der vorhandenen Lösung.
http://87.230.9.197/layout/layout.html
Sind drei Elemente die ich frei bestücken kann und es optisch den gewünschten Effekt bringt.
Auch wenn die beiden hinteren über Position:fixed dahin geschoben sind klappt alles so.

Mit den Elementen hatte ich genau das Problem wie du es gerade beschrieben hast. Die beiden seitlichen Elemente immer in eine korrekte Breite zu bringen. Wollte bei mir mit keinen mitteln funktionieren.

Hier habe ich mal etwas gefunden. So ganz steige ich da nicht durch und die beiden seitlichen Elemente skallieren auch nicht gleich wenn ich den Browser verkleiner.

Vielleicht hilft es ja weiter
http://blog.html.it/layoutgala/LayoutGala21.html

[Garog]

Aber es gibt doch keine beiden äußeren Elemente, das sieht nur so aus - das ist ein Hintergrundbild :)

...-.-* Ich möchte aber zwei äußere Elemente.. nun beiß dich doch nicht an irgendwelchen Sachen fest, sondern les bitte das was ich schreibe bzw schon x-mal beschrieben habe...

Na dann ist ja gut :) ggf. solltest du aber daran arbeiten, wie du Probleme oder Aufgabenstellungen beschreibst. Sonst kommt schnell etwas anderes dabei raus - das ist in dieser Branche sehr wichtig.

Hehe ^^ Nettes Bild ;) In meiner Branche leider so aber nicht möglich ;) Sonst rollen ganz schnell Köpfe (hat nix mit Internetseiten zu tun ;))

[suit]

...-.-* Ich möchte aber zwei äußere Elemente.. nun beiß dich doch nicht an irgendwelchen Sachen fest, sondern les bitte das was ich schreibe bzw schon x-mal beschrieben habe...

Ich hab's immer noch nicht verstanden - ich resigniere :) Bin ja nicht mehr der Jüngste.

Wenns fertig ist, bitte poste einen Link, ich seh's mir gerne an - dann versteh' ich's möglicherweise.

[Harlequin]

Yerf!

Wenns fertig ist, bitte poste einen Link, ich seh's mir gerne an - dann versteh' ich's möglicherweise.

Mein "Gebastel" kommt ja schon in die richtige Richtung, probiers einfach mal aus.

Gruß,

Harlequin

[Harlequin]

Yerf!

Drei <div> Elemente sind nebeieinander angeordnet.

Das in der Mitte ist 500px breit und zentriert. Das links und rechts daneben ist jeweils so breit, wie noch Platz im Browser ist.

Ich hab grad nochmal im Archiv gesucht, aber das war alles nur für Hintergrundbilder...

Da Hilft wohl nur die grobkörnige CSS-Keule: display:table-cell

Denn im Prinzip willst du das Verhalten einer Tabelle, also sollte man das dem Browser auch genau so sagen. Das sollte auch in allen modernen Browsern funktionieren.

Gruß,

Harlequin

[Garog]

Ich hab grad nochmal im Archiv gesucht, aber das war alles nur für Hintergrundbilder...

Hmm.. entspricht meinen Ergenissen, schade

Da Hilft wohl nur die grobkörnige CSS-Keule: display:table-cell

Denn im Prinzip willst du das Verhalten einer Tabelle, also sollte man das dem Browser auch genau so sagen. Das sollte auch in allen modernen Browsern funktionieren.

Werde ich mal ausprobieren, auch eine Lösung denke ich.

... »» Denn im Prinzip willst du das Verhalten einer Tabelle

genau ;)

[Garog]

Deine Sigi ist super :D

[suit]

das problem sind drei div elemente die mit float nebeneinander liegen, das mittlere element zentriert angezeigt werden soll mit einer fixen größe und die beiden seiten sollen den rest des viewports füllen je nach breite.

Warum? Ursprünglich sollte das ganze doch nur Verzierung sein - kein Inhalt mit variabler Breite. Dieses Bild stammt von dir:
http://www.ruhrnuklear.de/layout.gif

Drei Elemente mit Fixer breite und links/rechts daneben "Block 1 und Block 2" dienen als Hintergrundbild - so wie auf deiner Beispielseite.

aber ich werde deinem weg mal folgen :)

Schön :) Aber 120 + 950 + 100 != 300 :)

[Garog]

Schön :) Aber 120 + 950 + 100 != 300 :)

Wie gesagt die Größe ist egal ;) die Funktion ist wichtig ;)

Warum? Ursprünglich sollte das ganze doch nur Verzierung sein - kein Inhalt mit variabler Breite. Dieses Bild stammt von dir:

http://www.ruhrnuklear.de/layout.gif

jain. da hast du etwas überlesen

"Die drei Elemente in der Mitte, Menü, Inhalt und Sidebar, sollen eine feste Größe haben.
""Die beiden Seite, Block 1 und Block 2, sollen jeweils den "Rest" auffüllen."""

sowie

"Das Problem ist nur die fixe Größe der drei mittleren Elemente und die variable der beiden äußeren"

das habe ich nur mal vereinfacht auf 1 fixes element und die beiden variablen äusseren

Da sich das ganze mit div elementen aufbaut ist es egal ob inhalt oder nicht ;)

[suit]

Jeder der nicht mit einem alten max 1280x1024 Bildschirm durch das Internet surft. ;)

Ich hab' ein nagelneues Notebook mit 1280x800 Bildpunkten, mein Viewport ist aber nur ein Bruchteil davon, da ich gerne die Werkzeugleisten meines Browsers linksseitig habe und rechts ohnehin immer Miranda IM mitläuft.

Nicht zu vergessen: das iPhone hat lediglich 480 Bildpunkte Viewportbreite.

Auflösung != Desktopgrösse != Browserfenstergrösse != Anzeigebereich. [psf 3.7]

[Gunnar Bittersmann]

@@Garog:

nuqneH

hmm... ich glaube das hatte ich schon aber es klappte nicht.

Braucht div[id="mainview"] vielleicht eine Breitenangabe?

Qapla'