Relative CSS-Positionierung, Breiten-Abstand

[Patrick Schröder]

Hallöchen,

nachdem ich mich nun ewig durchs Archiv gewühlt und viele Varianten der relativen Positionierung ausprobiert habe, bin ich dennoch zu keinem wirklichen Ergebnis gekommen. Folgendes Problem:

Ein div-Bereich, der als Header dient und ca. 770px breit ist, soll nicht ganz mittig positioniert werden. Abstand links soll ca. 30% betragen, der Abstand links ca. 70%. Die Prozentwerte natürlich relativ zur übrigen Header-Breite, also der Rest der übrig bleibt.

Wenn ich das Problem nachg alter Tabellen-Manie lösen wollte, wäre dies in einer Minute gelöst, aber das ist nicht Sinn und Zweck. Ich möchte auf vernünftige Lösungen zurückgreifen. In den meisten Fällen komme ich mit CSS und seinen Möglichkeiten was Positionierungen angeht, recht gut zurecht, aber im Moment stehe ich auf dem Schlauch. Kann mir jemand einen Tipp geben?

Gruß Patrick

[wahsaga]

hi,

Ein div-Bereich, der als Header dient und ca. 770px breit ist, soll nicht ganz mittig positioniert werden.

Und diese 770px Breite bezieht er woraus?

Abstand links soll ca. 30% betragen, der Abstand links ca. 70%. Die Prozentwerte natürlich relativ zur übrigen Header-Breite, also der Rest der übrig bleibt.

Was ist die "übrige Header-Breite"? Beziehst du dich auf die 770px? Nein, wohl kaum, da gäbe es ja keinen "Rest, der übrig bleibt" mehr. Was also dann?

gruß,
wahsaga

[Patrick Schröder]

Hi wahsaga,

doch, ich beziehe mich auf die rund 770px. Die bestehen zum Teil aus Bildern, zum Teil aus Text und sind in einem div-Bereich zusammengefasst. Abmessungen ergeben, dass die Breite in etwa 770px nicht überschreitet. Insofern ist halt gewährleistet, dass der Header auch bei einer Auflösung von 800 x 600 entsprechend passt.

Der genannte Rest ist der, der je nach Auflösung übrig bleibt. Bei 800x600 rund 30px, also im Zweifelsfall der Scrollbalken, bei 1024x768 sinds ja rund 250 und bei 1280 knapp über 500Pixel die übrig bleiben.... und diese offenen unverbrauchten Pixel sollen nun ensprechend in der Relation als Abstand dienen.

Ein früheres unangebrachtes Tabellenlayout häte ja folgendermaßen ausgesehen:
<table>
  <tr>
    <td width="30%">flexibler Rand</td>
    <td width="770">Inhalt Header</td>
    <td width="70%">flexibler Rand</td>
  </tr>
</table>

Nur diese Variante ist ja sinngemäß fürn Eimer. Hierfür benötige ich einen Ersatz. Aber alles, was ich bisher ausprobiert habe, klappt nicht, da 30% Abstand soviel Abstand ist, wie 30% der gesamten Auflösungsbreite.

War das verständlicher? Ich hoffe... ich weiß, ich rede manchmal etwas wirr.

Gruß Patrick

[Gunnar Bittersmann]

doch, ich beziehe mich auf die rund 770px. Die bestehen zum Teil aus Bildern, zum Teil aus Text und sind in einem div-Bereich zusammengefasst. Abmessungen ergeben, dass die Breite in etwa 770px nicht überschreitet.

Patrick,
Du kennst nicht die Schriftgröße des Nutzers.

Insofern ist halt gewährleistet, dass der Header auch bei einer Auflösung von 800 x 600 entsprechend passt.

Du kennst nicht die Größe des Viewports des Nutzers (Browserfensteinneres abzüglich aller Symbol-, Adress-, …-leisten und Sidebars)

Und die Viewportgröße hat wenig mit der Bildschirmauflösung zu tun.

Der genannte Rest ist der, der je nach Auflösung übrig bleibt.

Nein, nicht je nach Auflösung, sondern je nach Viewportgröße (die der Nutzer auch nach dem Laden der Seite noch ändern kann).

und diese offenen unverbrauchten Pixel sollen nun ensprechend in der Relation als Abstand dienen.

Ich glaub nicht, dass das mit CSS geht. Mit JavaScript kannst du die Viewportgröße(!) abfragen, die Räder berechnen und entsprechend setzen.

Live long and prosper,
Gunnar

[Patrick Schröder]

Hi Gunnar,

eben drum.... der Viewport interessiert mich ja nur bedingt. Natürlich sollte jeder gleichzeitig möglichst viel sehen, aber dort begrenze ich mich (und ich denke die meisten Web-Designer) halt auf eine maximierte Variante bei 800x600 Auflösung. Das ist quasi die Größe, bei der noch alles klar zu sehen sein sollte. Ansonsten werden die Fenster-Inhalte sowie die Fenster nur größer.

Aufgrund von Inhalten wie Bildern, tabellarischen Auflistungen usw. muss man einfach von einem Minimum ausgehen, weil man sonst keine Orientierungsgröße hätte. Natürlich müssen DInge flexibel sein, aber man muss auch nicht davon ausgehen, dass jemand eine Fenstergröße von 50x50px hat und dort alles lesen können muss. Dort kann man durchaus erwarten, dass jemand sein Fenster maximiert, um mehr sehen zu können.

Dass die Form der Ausrichtung mit Tabellen möglich ist, zeigt mein Beispiel. Das ist ja nicht aus der Luft gegriffen, es funktioniert ja. Nur ist eine Tabelle ja nciht zum Layouten und Positionieren gedacht. Daher suche ich hierfür eine CSS-Lösung und ich bin mir sicher, dass es diese gibt, ich find nur im Moment keine.

Daher wollte ich halt fragen, ob jemand eine entsprechende Lösung hat oder kennt oder mir nen Denkanstoß gibt.

Gruß Patrick

[Gunnar Bittersmann]

eben drum.... der Viewport interessiert mich ja nur bedingt.

Patrick,
Nein, genau DER interessiert dich. Die Monitorauflösung hat für dich nicht die geringste Bedeutung.

Natürlich sollte jeder gleichzeitig möglichst viel sehen, aber dort begrenze ich mich (und ich denke die meisten Web-Designer) halt auf eine maximierte Variante bei 800x600 Auflösung.

die meisten unfähigen Web-Designer, meinst du? >:-/

Das ist quasi die Größe, bei der noch alles klar zu sehen sein sollte. Ansonsten werden die Fenster-Inhalte sowie die Fenster nur größer.

Mit der Zunahme mobiler Geräte werden immer mehr Fenster nicht größer, sondern kleiner.

Natürlich müssen DInge flexibel sein, aber man muss auch nicht davon ausgehen, dass jemand eine Fenstergröße von 50x50px hat und dort alles lesen können muss.

Nein, das nicht. Aber bei etwa 300px Breite sollte eine Seite schon les- und benutzbar sein.

Dort kann man durchaus erwarten, dass jemand sein Fenster maximiert, um mehr sehen zu können.

Nein. Der Nutzer kann erwarten, dass ein fähiger Webdesigner das nicht von ihm verlangt, sondern dass das Layout flexibel genug ist, sich seinen Gegebenheiten anzupassen.

Daher suche ich hierfür eine CSS-Lösung und ich bin mir sicher, dass es diese gibt,

Dazu hab ich schon was gesagt.

Daher wollte ich halt fragen, ob jemand eine entsprechende Lösung hat oder kennt oder mir nen Denkanstoß gibt.

Den hast du von Struppi und mir bekommen.

Live long and prosper,
Gunnar

[Patrick Schröder]

Hi Gunnar,

naja, die Dinge kann man aus verschiedenen Richtungen sehen. Wenn ein Kunde etwas haben möchte, liegt es in meiner Pflicht ihn entsprechend zu beraten. Dabei ist dann aber völlig egal, was ich will und möchte. Wenn ein Kunde aufgrund von Kosten usw. nunmal verlangt, seine Inhalte so zu positionieren, dann muss ich dafür die Lösung finden.

Im übrigen gibt es die Möglichkeit die Inhalte je nach Anzeigegerät entsprechend zu ändern. Hier muss also nicht das selbe CSS für alle Varianten herhalten, sondern kann den Gegebenheiten angepasst werden. Und dort habe ich für ein Problem nach einer Lösung gefragt und nicht danach, dass mir jemand allerlei Varianten erklärt, um die es gar nicht geht... was auch ein völlig anderes Thema ist.

[Gunnar Bittersmann]

naja, die Dinge kann man aus verschiedenen Richtungen sehen. Wenn ein Kunde etwas haben möchte, liegt es in meiner Pflicht ihn entsprechend zu beraten. Dabei ist dann aber völlig egal, was ich will und möchte.

Richtig, Patrick. Es est aber auch egal, was er möchte. Es zählt, was seine Kunden (die Nutzer seiner Seiten) möchten. Und genau das ist deine Pflicht, ihn dort zu beraten.

Und dort habe ich für ein Problem nach einer Lösung gefragt

Und was hast du an der Antwort „mit CSS lässt sich das Problem nicht lösen“ nicht verstanden?

Live long and prosper,
Gunnar

[Patrick Schröder]

Hallo Gunnar,

Richtig, Patrick. Es est aber auch egal, was er möchte. Es zählt, was seine Kunden (die Nutzer seiner Seiten) möchten. Und genau das ist deine Pflicht, ihn dort zu beraten.

Beraten ja, aber letztendlich zählt der Kundenwunsch und sein Portemonnaie. Meine Pflicht habe ich dabei erfüllt. Wenn du das anders siehst, magst du endweder ein besserer Verkäufer sein oder aber du hast keine Ahnung vom Umgang mit Kunden.

Und was hast du an der Antwort „mit CSS lässt sich das Problem nicht lösen“ nicht verstanden?

Du hast geschrieben: "Ich glaub nicht, dass das mit CSS geht." Wissen und Glauben sind nicht nur zwei Paar Schuhe, sondern zwei völlig verschiedene! Wenn du sagst, es geht nicht, okay, aber eine Möchtegern-Lehrstunde, indem du versuchst mich im Ansatz niederzumachen, bringt hier auch niemanden weiter.

Patrick

[Siramon]

Hallo Patrick,

Beraten ja, aber letztendlich zählt der Kundenwunsch und sein Portemonnaie. Meine Pflicht habe ich dabei erfüllt. Wenn du das anders siehst, magst du endweder ein besserer Verkäufer sein oder aber du hast keine Ahnung vom Umgang mit Kunden.

Naja, vor dem Beraten solltest du dir im klaren sein was möglich ist und was nicht.

Du hast geschrieben: "Ich glaub nicht, dass das mit CSS geht." Wissen und Glauben sind nicht nur zwei Paar Schuhe, sondern zwei völlig verschiedene! Wenn du sagst, es geht nicht, okay, aber eine Möchtegern-Lehrstunde, indem du versuchst mich im Ansatz niederzumachen, bringt hier auch niemanden weiter.

Ich weiss, dass es keine reine CSS-Lösung gibt die zur Zeit in den meisten Browsern (IE, Firefox, Safari, Opera) annähernd gleich funktioniert. Wieso nimmst du dafür nicht eine Tabelle, wenn du es ja so verkauft hast?

Was du sonst noch probieren könntest ist folgendes:
Mit CSS mittest du den Content ein (margin:auto; bzw. text-align:center für den IE) und versuchst dann mittels JavaScript und position:relative geeignete (dynamische) Abweichungen je nach _Viewport_ zu genierieren.

-- html

  
<body>  
  <div id="content"></div>  
</div>  
</body>  

-- css

  
/* content in die Mitte */  
body {  
  margin:auto;  /* für alle normalen Browser */  
  text-align:center;  /* für den IE */  
}  
  
/* und jetzt abweichend von der Mitte positionieren */  
#content {  
  width:770px;  /* fixe Breite */  
  position:relative; /* und relative vom bisherigen Standort positionieren */  
  top:0;  /* nach oben bleibt der Content mal wo er ist */  
  left:0;  /* und nach links auch, dies wird aber mit JavaScript angepasst */  
}  

-- javascript

  
var objContent = (document.getElementById) ? document.getElementById('content') : null;  
if (objContent) {  
  objContent.style.left = 'XX [px|%]'; // Angabe in Pixel oder Prozent, berechnet aus dem Viewport und der fixen Breite dieses Elementes  
}  

Grüsse
Siramon,
     ja der Penner aus Nr. 14

[Patrick Schröder]

Hallo Siramon,

vielen Dank! Endlich mal etwas Konstruktives! Damit kann ich immerhin etwas anfangen, auch wenn ich kein wirklicher Freund von JS bin, aber immerhin. Zumindest muss ich mir jetzt keinen Wolf mehr suchen! Ich habe es aus zwei Gründen nicht in Tabellenform gemacht, 1. weil ich mir Tabellen-Layouts von früher her abgewöhnen möchte und 2. weil es nicht Standardkonform ist.
Verkauft habe ich ihm ja nur die Optik usw. Nicht zwangsweise das 30-70-Verhältnis. Das habe ich mir aus optischen Gründen in den Kopf gesetzt gehabt, aber das werd ich jetzt wohl streichen oder so machen, wie du es vorgeschlagen hast.

Aber ich werd mal schauen... ich werd das schon irgendwie hinbekommen. Trotzdem dir nochmal danke!

Gruß Patrick

PS: Penner, was wie wo? Den hab ich grad echt nicht verstanden...

[Siramon]

Hallo Patrick,

vielen Dank! Endlich mal etwas Konstruktives! Damit kann ich immerhin etwas anfangen, auch wenn ich kein wirklicher Freund von JS bin, aber immerhin. Zumindest muss ich mir jetzt keinen Wolf mehr suchen! Ich habe es aus zwei Gründen nicht in Tabellenform gemacht, 1. weil ich mir Tabellen-Layouts von früher her abgewöhnen möchte und 2. weil es nicht Standardkonform ist.
Verkauft habe ich ihm ja nur die Optik usw. Nicht zwangsweise das 30-70-Verhältnis. Das habe ich mir aus optischen Gründen in den Kopf gesetzt gehabt, aber das werd ich jetzt wohl streichen oder so machen, wie du es vorgeschlagen hast.

Die anderen haben dir eigentlich genau das gleiche gesagt, ich habs einfach in der Zuckertorte serviert. Am einfachsten wäre wirklich du übernimmst ein 50:50 Verhältnis - übersetzt heisst das, der Content kommt in die Mitte. Alles andere _ist_ Tabellendenken und davon möchtest du ja loskommen.

Aber ich werd mal schauen... ich werd das schon irgendwie hinbekommen. Trotzdem dir nochmal danke!

Gern geschehen.

PS: Penner, was wie wo? Den hab ich grad echt nicht verstanden...

Habe mal im Zimmer Nr. 14 verschlafen - Selftreffen vor 3 Jahren.

Grüsse
Siramon,
     ja der Penner aus Nr. 14

[Gunnar Bittersmann]

Am einfachsten wäre wirklich du übernimmst ein 50:50 Verhältnis - übersetzt heisst das, der Content kommt in die Mitte. Alles andere _ist_ Tabellendenken

Nö, Siramon, wieso denn?

Zu sagen, dass der Rand rechts doppelt so breit sein soll wie der Rand links, hat IMHO nichts mit Tabellendenken zu tun.

Und es wäre Aufgabe einer Formatierungssprache, solche Angaben möglich zu machen. Der Gedanke, CSS müsse das bieten, ist also gar nicht so falsch. –

Nur, dass die Beschreibung dieser gewünschten Darstellung mit _heutigem_ CSS nicht möglich ist. (Selbst wenn es das wäre, gäbe es keine Garantie, dass heutige BRowser das auch umsetzen.)

Live long and prosper,
Gunnar

[Siramon]

Hallo Gunnar,

Erstmal sorry für die späte Antwort, ich habe dein Posting zuerst gar nicht gesehen :-(

Am einfachsten wäre wirklich du übernimmst ein 50:50 Verhältnis - übersetzt heisst das, der Content kommt in die Mitte. Alles andere _ist_ Tabellendenken
Nö, Siramon, wieso denn?

siehe unten.

Zu sagen, dass der Rand rechts doppelt so breit sein soll wie der Rand links, hat IMHO nichts mit Tabellendenken zu tun.
Und es wäre Aufgabe einer Formatierungssprache, solche Angaben möglich zu machen. Der Gedanke, CSS müsse das bieten, ist also gar nicht so falsch. –
Nur, dass die Beschreibung dieser gewünschten Darstellung mit _heutigem_ CSS nicht möglich ist. (Selbst wenn es das wäre, gäbe es keine Garantie, dass heutige BRowser das auch umsetzen.)

Für mich definiert sich Tabellendenken durch folgendes: Früher mit Tabellen war eigentlich fast alles möglich, nur komplizierter. Die Webworker haben sich an diese Schemata (pl. ?) gewöhnt und verwendeten sie jahrelang (3-, 4-, 5-...,n-Spalter; Hintergrundfarben bis zum Ende der Seite; Pixelgenaue Breiten der Elemente; Vermischung von Prozent und Pixelangaben; Blind-/Spacer-GIFs usw.). Vieles ist heute noch möglich mit CSS, vieles scheitert aber zur Zeit noch an der Spezifikation und der Umsetzung der Browserhersteller, noch viel mehr ist besser geworden.
Tabellendenken ist für mich, wenn man Layoutideen die früher mit blinden Tabellen gelöst wurden heute mit CSS umsetzten möchte, anstatt zu schauen, was geht mit CSS und was sind meine Möglichkeiten und so die Layoutidee einzugrenzen und zu entwickeln.
Oder anders gesagt: geht man wie früher an eine Idee heran, wird man teilweise scheitern (v.a. wenn das nötige CSS-Grundwissen fehlt), schaut man aber was ist möglich mit CSS und wie kann ich es sinnvoll nutzen, kommen ganz neue interessante Layoutideen dabei heraus.

Soviel zum Tabellendenken. So definiere ich es, gut möglich, dass für andere Tabellendenken etwas anderes darstellt (nicht nur gut möglich, sondern sehr wahrscheinlich *g*).

Grüsse
Siramon,
     ja der Penner aus Nr. 14

[Struppi]

doch, ich beziehe mich auf die rund 770px. Die bestehen zum Teil aus Bildern, zum Teil aus Text und sind in einem div-Bereich zusammengefasst. Abmessungen ergeben, dass die Breite in etwa 770px nicht überschreitet. Insofern ist halt gewährleistet, dass der Header auch bei einer Auflösung von 800 x 600 entsprechend passt.

Der genannte Rest ist der, der je nach Auflösung übrig bleibt. Bei 800x600 rund 30px, also im Zweifelsfall der Scrollbalken, bei 1024x768 sinds ja rund 250 und bei 1280 knapp über 500Pixel die übrig bleiben.... und diese offenen unverbrauchten Pixel sollen nun ensprechend in der Relation als Abstand dienen.

Das ab einer gewissen Größe des Monitors und Auflösung kaum jemand den Browser maxmiert ist dir klar? (ich hab den Browser oft noch  nicht mal bei 800x600 maximiert und wenn ich an eine grossen Monitor sitze ist das Browserfenster oft sogar noch kleiner)

Ein früheres unangebrachtes Tabellenlayout häte ja folgendermaßen ausgesehen:
<table>
  <tr>
    <td width="30%">flexibler Rand</td>
    <td width="770">Inhalt Header</td>
    <td width="70%">flexibler Rand</td>
  </tr>
</table>

Nein, das bewirkt sicher nciht das was du willst, die 30% bezieht sich ja auf die komplette Breite des Browserfensters, du hast also:

|   30%    | 770px  | 70%-770px |

Das ist nicht was du willst, du willst wenn ich dich richtig verstanden habe:

|   (100% - 770px) * 30%    | 770px  | (100% - 770px) * 70%  |

Da aber 100% dir nicht bekannt sind kannst du das nur mit JS lösen. Das ist immer ein Problem, wenn du irgendwo fixe Größenanagaben hast, bei einem fliessenden CSS Layout wäre das kein Problem.

z.b. so:

body
{
padding-left: 3%;
padding-right: 7%;
margin:0;
}

Struppi.

[Patrick Schröder]

Hi Struppi,

also das was ich benötige, hast du schon völlig richtig gesehen... also hab ich mich wohl doch halbwegs verständlich ausgedrückt.

Und genau dort liegt mein Problem... bei der Tabelle benutzt diese tatsächlich den übriggebliebenen Rest, und setzt den mittigen Inhalt so wie beschrieben, kannst du ja auch ausprobieren. Dort klappt es so, nur wenn ich über CSS positioniere, passier genau das Problem, welches du beschrieben hast. Dass erst 30% von der Fenster-Breite genutzt werden, dann die 770px verbraucht werden und der Rest halt alles andere als 70% sind.

Doch genau dafür suche ich ja ne Lösung.. eine, die die Tabelle erstetzt.

Gruß Patrick

[Struppi]

Und genau dort liegt mein Problem... bei der Tabelle benutzt diese tatsächlich den übriggebliebenen Rest, und setzt den mittigen Inhalt so wie beschrieben, kannst du ja auch ausprobieren. Dort klappt es so, nur wenn ich über CSS positioniere, passier genau das Problem, welches du beschrieben hast. Dass erst 30% von der Fenster-Breite genutzt werden, dann die 770px verbraucht werden und der Rest halt alles andere als 70% sind.

Doch genau dafür suche ich ja ne Lösung.. eine, die die Tabelle erstetzt.

Du willst also 30% des Bildschirms (also fast ein drittel?) von der linken Spalte eingenommen haben, dann kommt deine Fixe Spalte und der Rest geht an die Rechte Spalte.

Wenn es das ist was du willst musst du den Container left:30%; positionieren.

Struppi.

[Struppi]

Wenn es das ist was du willst musst du den Container left:30%; positionieren.

Unfug es reicht margin-left:30%;

Struppi.

[Patrick Schröder]

Hi Struppi,

kopier dir mal die Tabelle und probiers aus... der Rest (Fenstergröße - 770px = 100%) ... so soll der Abstand links rund 30% sein. Der rechte Abstand ergibt sich somit und wären entsprechend 70% bzw. (Fenstergröße - 770px - 30% (links) = 70% vom Rest)

ein margin-left: 30% führt ja eben dazu, dass man 30% der gesamten Fenstergröße als linken Abstand hat und nicht nur 30% vom Rest... genau dort liegt ja mein Problem.

Gruß Patrick