Layout von Auflösung unabhängig machen

[Pittiplatsch]

hallo,

ich hätte da mal ne Frage. Wenn ich drei Div-Bereiche nebeneinander darstellen will und der in der Mitte soll 800px breit sein und die links und rechts jeweils die Hälfte der der noch freien Fläche einnehmen sollen wie mach ich das denn?

Ich denke dass wird irgendwie mit dem *-chen gehen aber wie? Die Formatierung mach ich logischerweisse mit CSS.

Ich bin ein wenig raus aus der Thematik ich hoffe ihr könnt mir da ein wenig helfen.

[Cyx23]

Hallo,

ich hätte da mal ne Frage. Wenn ich drei Div-Bereiche nebeneinander darstellen will und der in der Mitte soll 800px breit sein und die links und rechts jeweils die Hälfte der der noch freien Fläche einnehmen sollen wie mach ich das denn?

Wie unabhängig von der Auflösung soll es denn werden, bzw. wie soll es bei 800px breitem "Viewport" ausschauen?

Was für Inhalte kommen in "links" und "rechts"?

Grüsse

Cyx23

[Pittiplatsch]

Wie unabhängig von der Auflösung soll es denn werden, bzw. wie soll es bei 800px breitem "Viewport" ausschauen?

sry, ich hab keine Ahnung was du mit viewport meinst.
Der Block in der Mitte soll immer 800px haben.

Mir kommt grade eine Idee.
Ich weiss bloss nich ob das möglich ist.
kann man die auflössungsbreite irgendwie auslesen?
dann kann ich mir den exakten wert einfach mit php dynamisch ausrechen
und die Div-Angaben direkt im index variabel gestallten.
ich hoffe du verstehst wie ich das mein.
quasi (breite - 800px) : 2

links soll nicht viel rein nur eine Grafik die bei mouseover ein menü öffnet
das jedoch sowieso so sein wird das es überlappt.

rechts vielleicht eine grafik die für das layout kommen könnte, jedoch nicht breit sein wird. (max 100px so das es keine probleme geben kann: von 1024px mindestbreite geh ich einfach mal aus -> min 112px für links und rechts)

danke für die hilfe Cyx23

[suit]

du willst doch nicht etwa einfach einen 800px breiten container zentrieren?

im übrigen hat ein flüssiges layout nur wenig sinn, wenn der inhaltsbereich eine feste breite hat - mit fester breite sollte man (wenn) nur die navigation ausstatten

[Pittiplatsch]

du willst doch nicht etwa einfach einen 800px breiten container zentrieren?

Ja und Nein also vielleicht hast du in einer anderen antwort das schema gesehen,
daß war für die div-bereiche.

Aber das layout-schema wäre ungefähr so...

+++++++++++++++++++++++++++++++++
+                         ******+
+                      *********+
+      ~~~~~~~~~~~~~~~~~~ ******+
+      |                | ******+
+      |                | ******+
+      |                | ******+
+~~~~~~~                ~~~~~~~~+
+      |                |       +
+      |                |       +
+      |                |       +
+      |                |       +
+      |                |       +
+      |                |       +
+      |                |       +
+      |                |       +
+++++++++++++++++++++++++++++++++

die pluszeichen wären quasi die begrenzung des Viewport
(ps hab ich wieder was gelernt ;-) )

die *-chen sind die Grafik die noch in den Header soll

dAS Problem ist also das der inhaltsbereich in den Header ragt
und die Div-Grenze zwischen header und den drei spalten nicht gleich der grenze des headers zum inhalt entsprechen kann.

im übrigen hat ein flüssiges layout nur wenig sinn, wenn der inhaltsbereich eine feste breite hat - mit fester breite sollte man (wenn) nur die navigation ausstatten

Die breite von 800px reicht auf jedenfall aus und soll auch nicht größer werden, da der Textinhalt relativ klein ist und sonst ziemlich verloren aussieht.
Und der Text soll in einer bestimmten größe angezeigt werden, diese wird großgenug sein um es bequem lesen zu können

Das ist jetzt vielleich recht kompliziert aber naja...

MFG Pittiplatsch

[Steel]

Hi!

Die breite von 800px reicht auf jedenfall aus und soll auch nicht größer werden, da der Textinhalt relativ klein ist und sonst ziemlich verloren aussieht.
Und der Text soll in einer bestimmten größe angezeigt werden, diese wird großgenug sein um es bequem lesen zu können

Hier wiedersprichst Du Dir selbst. :) Wenn ich mit meinem 600px netbook deine Seite anschaue und dann mit meinem 24" Widescreen, verspreche ich Dir dass eine feste Schrift mal zu gross und mal zu winzig sein wird. Ist ja auch klar, da deine 800 px einmal nicht auf meinen Screen passenund das naechste mal etwa nen viertel meines screens ausmachen.

Die feste Groesse koennte hoechstens ein fester Wert in em sein. Genauso sollte es auch mit der Breite deines Containers sein. Ich finde 800px zwar auch eine brauchbare Groesse (aber dann Gesamtbreite) aber man sollte wenigstens mal darueber nachgedacht haben und sich wissentlich dafuer entscheiden bestimmte Usergruppen nicht zu beruecksichtigen.

[suit]

Die breite von 800px reicht auf jedenfall aus und soll auch nicht größer werden, da der Textinhalt relativ klein ist und sonst ziemlich verloren aussieht.

das mit 800px reicht auf jeden fall aus haben sich die leute vom orf auch gedacht ;) bei 3360px viewportbereite siehts scheisse aus und auf meinem mobilen gerät mit 256px ebenfalls :D

Das ist jetzt vielleich recht kompliziert aber naja...

du musst dir jetzt überlegen, ob du ein fixes layout willst oder nicht - dein problem ist extrem simpel zu lösen

du benötigst nebst html und body 2 elemente bzw sogar weniger, wenn du body und html ebenfalls zur formatierung heranziehst - das mag aber teilweise der ie6 nicht

also mal das beispiel hier:

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

#header {
  width: 1000px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px; /* seine halbe breite */
  background: red;
}

#container {
  position: realtive;
  width: 800px;
  margin: 100px; auto 0 auto;
  background: green;
}

die alternative ist ein flüssiges layout - dafür tauscht du einfach px gegen % oder em (natürlich runterrechnen)

bei den hintergrundgrafiken musst du dann entweder mehrere elemente mit mehreren hintergrundgarfiken verwenden (etwa die runde-ecken-technik missbrauchen) oder du verwendest wiederholbare grafiken

[Cyx23]

Hallo,

rechts vielleicht eine grafik die für das layout kommen könnte, jedoch nicht breit sein wird. (max 100px so das es keine probleme geben kann: von 1024px mindestbreite geh ich einfach mal aus -> min 112px für links und rechts)

soll denn ein mittig positionierter Bereich mit 1024px entstehen, oder
soll der Platz auch genutzt werden, wenn mehr vefügbar ist; sollen
also ggf. die Grafiken rechts und links mehr Abstand zur Mitte bekommen?

Grüsse

Cyx23

[Pittiplatsch]

Hallo,

soll denn ein mittig positionierter Bereich mit 1024px entstehen, oder
soll der Platz auch genutzt werden, wenn mehr vefügbar ist; sollen
also ggf. die Grafiken rechts und links mehr Abstand zur Mitte bekommen?

Ne da hast du mich falsch verstanden
es soll in etwa so sehen

++++++++++++++++++++
+                  +
++++++++++++++++++++
+   +          +   +
+   +          +   +
+   +          +   +
+   +          +   +
+   +          +   +
+   +          +   +
++++++++++++++++++++
    |800px     |

-also der mittlere teil soll egal welche auflösung immer 800px breit sein

-links und rechts jeweils die restliche breite zu gleichen teilen
  ->sollte die auflösung z.B. 1152px breit sein: 176px links und rechts

• die eine grafik soll ganz rechts erscheinen und die breite steht nicht fest es wird was sein was passt (d.h. sie ist noch nicht einmal in arbeit gewesen -> ich pass sie dann an)

Nochmals danke für die Mühe ich hoffe ich hab dir jetzt alle infos gegeben die du wolltest

[Cyx23]

Hallo,

-also der mittlere teil soll egal welche auflösung immer 800px breit sein

-links und rechts jeweils die restliche breite zu gleichen teilen

Dann könnte das grundsätzlich geeignet sein:
http://www.lipfert-malik.de/webdesign/tutorial/bsp/drei-spalten-layout.html

Grüsse

Cyx23

[Thomas Luethi]

Hallo,

sry, ich hab keine Ahnung was du mit viewport meinst.

Die nutzbare Fenster-Innenfläche; dazu und zum "Optimieren" siehe auch:
http://aktuell.de.selfhtml.org/weblog/aufloesung-viewport

rechts vielleicht eine grafik die für das layout kommen könnte, jedoch nicht breit sein wird. (max 100px so das es keine probleme geben kann: von 1024px mindestbreite geh ich einfach mal aus -> min 112px für links und rechts)

Sobald es rechts einen vertikalen Scrollbalken hat, hast Du auf einem
1024x768 Bildschirm nur noch ca. 1000 Pixel Breite zur Verfügung.
Und auch ohne Scrollbalken hast Du nicht immer ganz 1024 Pixel,
da der Browser einen feinen Rahmen haben kann. Ich würde also- wenn
schon - eher auf 1000 Pixel "optimieren" als auf 1024.

mfg Thomas

[Alex]

Hallo Pittiplatsch,
ich hab das mal ähnlich mit einer table realisiert

<table width="100%" cellpadding="0" cellspacing="0" style="height:100%">

<!-- # Frame Left # -->
<tr>
<td width="50%">
hier 2 divboxen rein mit jeweils width 50%
</td>

<!-- # Frame Main # -->
<td width="800px">Mainframe</td>

<!-- # Frame Right # -->
<td width="50%">
hier 2 divboxen rein mit jeweils width 50%
</td>
</tr>

</table>

vielleicht reicht es das ganze komplett auf Divboxen umzuformatieren um das gewünschte ergebnis zu erhalten.

Gruß,
Alex.

[Pittiplatsch]

Die Idee fand ich gut und dachte es funktioniert tut es aber leider nich.
der linke div nimmt nicht 50% vom rest sondern der gesamtbreite.

jedoch trotzdem danke Alex