Positionierung von div- und span-Bereichen

[Daniel]

Hallo,

innerhalb eines div-Bereichs habe ich drei span-Bereiche.
Für die ersten beiden span-Bereiche habe ich fixe Breitenangaben. Den dritten span-Bereich möchte ich so breit machen, das die gesamte Breite des div-Bereich ausgefüllt wird.

Ich habe es so probiert:

<div style="position:absolute; top:10px; left:10px; width:500px; height:500px; z-index:1; background:yellow; border:solid 2px blue;">

<span style="position:absolute; top:0px; left:0px; width:100px; height:50px; z-index:2; background:green;">Mahlzeit.</span>

<span style="position:absolute; top:0px; left:100px; width:100px; height:50px; z-index:2; background:blue;">Supi.</span>

<span style="position:absolute; top:0px; left:200px; width:100%; height:50px; z-index:2; background:red;">Dehnen.</span>

</div>

Der dritte span-Bereich nimmt nun genau die Breite ein, die der div-Bereich komplett hat, also 500px.

Ich kann diese Breiten-Angabe des dritten span-Bereichs nicht absolut machen!

Vielen Dank und viele Grüße
Daniel :-)

[jojo]

Hallo,

hi

<div style="position:absolute; top:10px; left:10px; width:500px; height:500px; z-index:1; background:yellow; border:solid 2px blue;">

nimm bitte HTML-konforme Farbangaben. Mit "yellow" und "blue" kommen manche nicht klar. Nimm stattdessen #ffff00 (für Gelb) und #0000ff (für blau).
Außerdem sind Pixelangaben nicht so gut, da jeder User eine andere Auflösung eingestellt hat und somit jeder die Seite anders angezeigt bekommt.

<span style="position:absolute; top:0px; left:0px; width:100px; height:50px; z-index:2; background:green;">Mahlzeit.</span>

<span style="position:absolute; top:0px; left:100px; width:100px; height:50px; z-index:2; background:blue;">Supi.</span>

<span style="position:absolute; top:0px; left:200px; width:100%; height:50px; z-index:2; background:red;">Dehnen.</span>

</div>

Schon mal über den <style>-Tag nachgedacht? :-) Ich lege ihn dir nur wärmstens ans Herz.

Der dritte span-Bereich nimmt nun genau die Breite ein, die der div-Bereich komplett hat, also 500px.

Eben, der Bereich ist ja 500px groß, und ein Element, das in diesem Bereich ist und zusätzlich 100% Breite hat, reizt diese auch aus. Was sollte es auch anderes tun?

Ich kann diese Breiten-Angabe des dritten span-Bereichs nicht absolut machen!

Solltest du aber. Oder du gibst allen relative Breitenangaben, sprich Prozentzahlen.

[Daniel]

Hallo Jojo,

nimm bitte HTML-konforme Farbangaben. Mit "yellow" und "blue" kommen manche nicht klar. Nimm stattdessen #ffff00 (für Gelb) und #0000ff (für blau).

Mache ich ;-)
Für einen kleinen Test war das so schneller hingeschrieben.

Außerdem sind Pixelangaben nicht so gut, da jeder User eine andere Auflösung eingestellt hat und somit jeder die Seite anders angezeigt bekommt.

Ich möchte ein Grundgerüst machen, das sowohl rechts als auch links einen Rand mit fester Größe hat, also eine pixelgenaue Angabe.

Der mittlere Bereich dagegen, soll die gesamte verbleibende Fläche ausfüllen, eben wegen der verschiedenen Bildschirmauflösungen!

Schon mal über den <style>-Tag nachgedacht? :-) Ich lege ihn dir nur wärmstens ans Herz.

Selbstverständlich nutze ich das <style>-Tag!

Ich kann diese Breiten-Angabe des dritten span-Bereichs nicht absolut machen!

Solltest du aber. Oder du gibst allen relative Breitenangaben, sprich Prozentzahlen.

Wie gesagt, ich möchte einen fixen linken und rechten Rand. Der mittlere Bereich soll "dynamisch" je nach Browserauflösung sein.

[Ashura]

Hallo Daniel.

Der mittlere Bereich dagegen, soll die gesamte verbleibende Fläche ausfüllen, eben wegen der verschiedenen Bildschirmauflösungen!

Hm..? Was hat die Bildschirmauflösung mit der Größe der sichtbaren Fläche zu tun?

Selbstverständlich nutze ich das <style>-Tag!

Dann würde ich dir empfehlen, auch das </style>- Tag, oder gleich das <style>-Element zu benutzen. ;)

Gruß, Ashura

[Daniel]

Hallo Ashura,

Der mittlere Bereich dagegen, soll die gesamte verbleibende Fläche ausfüllen, eben wegen der verschiedenen Bildschirmauflösungen!

Hm..? Was hat die Bildschirmauflösung mit der Größe der sichtbaren Fläche zu tun?

Je größer die Bildschirmauflösung ist, desto größer kann auch die sichtbare Fläche sein!
Und diese möchte ich komplett ausnutzen.

Viele Grüße
Daniel

[jojo]

Hm..? Was hat die Bildschirmauflösung mit der Größe der sichtbaren Fläche zu tun?

Je größer die Bildschirmauflösung ist, desto größer kann auch die sichtbare Fläche sein!
Und diese möchte ich komplett ausnutzen.

Was sprich dagegen, trotzdem statt den Pixel-Angaben Prozentangaben zu verwenden? Also dann mache doch "left:5%;". Aber 10 Pixel (oder wieviel waren es?) sind bei 1024x768 viel mehr als bei 1280x1024 - Probier es einfach mal aus... Danach bist du von relativen Angaben überzeugt :)

[Daniel]

Was sprich dagegen, trotzdem statt den Pixel-Angaben Prozentangaben zu verwenden? Also dann mache doch "left:5%;". Aber 10 Pixel (oder wieviel waren es?) sind bei 1024x768 viel mehr als bei 1280x1024 - Probier es einfach mal aus... Danach bist du von relativen Angaben überzeugt :)

Dagegen spricht, dass ich Grafiken mit einer fixen Breit einbinden möchte.
Einserseits eine Grafik als Hintergrund, andereseits Grafiken für Buttons (Navigationsleiste).
Ansonsten glaube ich gerne, dass relative Angaben nett sind!

Viele Grüße
Daniel

[jojo]

Dagegen spricht, dass ich Grafiken mit einer fixen Breit einbinden möchte.

Nein, das tut es nicht.

Einserseits eine Grafik als Hintergrund, andereseits Grafiken für Buttons (Navigationsleiste).

Ohje, eine Grafik als Hintergrund... das kann ins Auge gehen, ich habe einmal ein ganzes Projekt über den Haufen geworfen, weil einfach der Hintergrund sich immer in der Größe geändert hat, je nach Bildschirmauflösung. Er hat dann einfach nicht mehr das erfüllt, für das er da ist/war ...

Ansonsten glaube ich gerne, dass relative Angaben nett sind!

Das ist gut, weil man darf sich nicht (vor allem nicht bei HTML) auf eine Sache (in deinem Fall Pixelangaben) versteifen, sondern immer auch das vielleicht kompliziertere, aber bessere Verfahren (in diesem Falle relative Einheiten) anwenden (wollen).

LG jojo

[Ingo Turski]

Hi,

Dagegen spricht, dass ich Grafiken mit einer fixen Breit einbinden möchte.
Nein, das tut es nicht.

Doch, das tut es in diesem Fall tatsächlich. Oder willst Du die Größen der Grafiken in em oder % angeben?

Ohje, eine Grafik als Hintergrund... das kann ins Auge gehen, ich habe einmal ein ganzes Projekt über den Haufen geworfen, weil einfach der Hintergrund sich immer in der Größe geändert hat, je nach Bildschirmauflösung.

Mir scheint, daß Du noch einiges lernen mußt..;-)

Aber zur Ausgangsfrage: das Einfachste ist, für die Randbereiche floatende DIVs zu verwenden und den mittleren Bereich anschließend in den Quelltext zu setzen und mit entsprechenden margins zu den Seiten zu versehen.

freundliche Grüße
Ingo

[Daniel]

Hi,

Aber zur Ausgangsfrage: das Einfachste ist, für die Randbereiche floatende DIVs zu verwenden und den mittleren Bereich anschließend in den Quelltext zu setzen und mit entsprechenden margins zu den Seiten zu versehen.

Vielen Dank für die Antwort! Wie du richtig sagst, war das die Ausgangsfrage, die bisher noch unbeantwortet geblieben ist ;-)

Viele Grüße
Daniel

[Ashura]

Hallo Ingo.

Oder willst Du die Größen der Grafiken in em oder % angeben?

Man kann dies ja in der Tat tun.
Aber leider sieht die Streckung der per em dimensionierten Bildern bei verändertem Schriftgrad mehr als grauenhaft aus...

Gruß, Ashura

[Daniel]

Hi nochmal,

den Vorschlag (von Ingo) habe ich nun versucht wie folgt zu realisieren:

<html>
<head>
<title>Div-Test</title>
<style type="text/css">
#top {
background:blue;
width:100%;
height:50px;
}

#bottom {
background:blue;
width:100%;
height:50px;
bottom:0px;
}

#content {
background:yellow;
width:100%;
margin-left:150px;
margin-right:50px;
}

#left {
background:green;
width:150px;
float:left;
line-height:18px;
}

#right {
background:red;
width:50px;
float:right;
}
</style>

</head>

<body>

<div id="top">Kopf.</div>
<div id="right">rechts</div>
<div id="left">links</div>

<div id="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>

<div id="bottom">Fuß.</div>

</body>
</html>

Die Anforderung, dass rechts und links ein Rand mit fixer vorhanden ist und der Content seine Breite anpasst ist erfüllt.

Nun würde ich gerne erreichen, dass sowohl der (gelbe) Content-Bereich als auch die Ränder-Bereiche (mindestens) die ihnen zur Verfügung stehende Höhe in Anspruch nehmen.

Wie könnte ich das hinbekommen?

Vielen Dank und viele Grüße
Daniel

[Ingo Turski]

Hi,

Nun würde ich gerne erreichen, dass sowohl der (gelbe) Content-Bereich als auch die Ränder-Bereiche (mindestens) die ihnen zur Verfügung stehende Höhe in Anspruch nehmen.

das tun sie doch: sie nehmen exakt die Höhe ein, die deren Inhalt benötigt. Wenn Du ein "Spalten"-Design willst: dazu sind Tabellen da. ;-)
Mit CSS wird's - bei drei Spalten mit variablem mittleren Bereich - schon kompliziert, zumindest den optischen Spalten-Eindruck zu simulieren.

freundliche Grüße
Ingo

[Daniel]

Hi,

das tun sie doch: sie nehmen exakt die Höhe ein, die deren Inhalt benötigt. Wenn Du ein "Spalten"-Design willst: dazu sind Tabellen da. ;-)
Mit CSS wird's - bei drei Spalten mit variablem mittleren Bereich - schon kompliziert, zumindest den optischen Spalten-Eindruck zu simulieren.

Ok, wahrscheinlich ist hier die Lösung mit einer Tabelle die sinnvollere und einfachere Variante. Ich werde mein Problem wohl auch erstmal so lösen.

Da eine, wenn auch komplizierte, Lösung mit Css und <div> meiner Meinung nach die elegantere wäre und die Umsetzung eine Herausforderung ist, werde ich diese Problem noch mal in einem neuen Thread posten.
Bestimmt finden wir eine Lösungsmöglichkeit hier im Forum!

Vielen Dank und viele Grüße
Daniel

[Ashura]

Hallo Daniel.

Je größer die Bildschirmauflösung ist, desto größer kann auch die sichtbare Fläche sein!

Das "kann" ist richtig.

Und diese möchte ich komplett ausnutzen.

Und woher willst du wissen, dass deine Seitenbesucher dies ebenfalls möchten?

Gruß, Ashura

[MudGuard]

Hi,

<div style="position:absolute; top:10px; left:10px; width:500px; height:500px; z-index:1; background:yellow; border:solid 2px blue;">
nimm bitte HTML-konforme Farbangaben.

Was willst Du damit bitte sagen? Sämtliche Farbangaben in dieser Zeile sind HTML-konform:
siehe http://www.w3.org/TR/html401/types.html#type-color
Aber das spielt überhaupt keine Rolle, denn es handelt sich hier nicht um HTML, sondern um CSS.

Die Farbangaben sind auch CSS-konform.
siehe http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-color

Mit "yellow" und "blue" kommen manche nicht klar.

Wer oder was sind diese "manche"?

cu,
Andreas