CSS - DIVS relativ

Webdesign & Technik HTML & CSS
1

Ich würde mich freuen, wenn mir jemand bei folgendem Problem helfen könnte.

Ich habe mit einer CSS-datei die DIVs-Container positioniert.
Doch leider hat mein Kumpel nicht so einen großen Bildschrim (also von der Auflösung) und da kommen diese Scrollbalken “vertical” und “horizontal”. Gibt es eine Möglichkeit das alles relativ anzuordnen, dass sie auf jedem Bildschirm (fast) gleich dargestellt werden?
Dabei weiß ich, dass die Sachen sich verkleinern/vergrößern muss…

Vielen Dank für eure schnellen Antworten.

2

Was man da machen kann, hängt davon ab, was in den
Containern drin ist - Text oder Pixelgraphik.

Wenn man konsequent Höhe und Breite in % angibt, richtet sich
das nach der Größe des Elternelementes, sofern das festliegt,
wenn man es konsequent bis hinaus zu html und body macht
dann auch eben relativ zum Anzeigebereich.
Mit Größenangaben in % kann man im Bedarfsfalle auch
Pixelgraphik geeignet verkleinern
(etwa mit img {max-width: 90%; height: auto}

Meist ist es allerdings sinnvoll auszunutzen, daß der browser in
der Lage ist, den Inhalt selbst passend anzuordnen.
Deshalb gibt man nicht allen Elementen eine Breitenangabe.
Legt man etwa die Breite eines in der Regel schmalen Menüs
in Einheiten wie em oder ex fest, etwa 12em, so kann man
davon ausgehen, daß das in jeden Anzeigebereich paßt. Den
Rest läßt man dann vom browser automatisch mit Inhalt bis zur
vollen Breite füllen und schon paßt sich alles automatisch und
optimal an den Anzeigebereich des jeweiligen Nutzers an.

3

könntest du mal bitte auf:

supersites.bplaced.net/braue/php/trainer.php gehen?

und wie meinst du das mit alle angaben in % ??

wo muss ich damit anfangen?
in meiner .css datei.

Bilder habe ich eingentlich nicht… nur Text/DIVS/Iframe…

wäre nett wenn du mir weiter helfen könntest.

4

Unter der URI gibt es derzeit nur eine 404-Meldung von bplaced…

Wenn man ein Menü und einen Bereich mit sonstigem
Inhalt hat, würde ich nur das Menü absolut positionieren und
dann dem body einen entsprechenden margin geben, etwas
sowas:

...
<body>

<div>irgendwas</div>

<div class="Menu">Menu</div>

<div>irgendwas</div>

</body>
...

CSS:

div.Menu
{
position: absolute;
top: 0;
left:0;
width: 13em;
}

body
{
margin-left: 14em;
}

Dann paßt sich der Inhalt automatisch an.

5

So noch ein Versuch bitte.

Hier ist der “andere” Link: klovollshit.tk/

und hier die CSS:

[code]

[/code]

könntest du mir bitte das mit dem % daran zeigen?

6

#Background kannst du komplett weglassen und die
Eigenschaften mal abgesehen von position, width, height
für das Element body notieren.

In #Head läßt du font weg und verwendest statt div einfach h1,
statt width gibst du da an: left:0; right:0, height gibst du eher in
em an, also z.B. height: 3em

Ähnlich geht es mit #titlehead - font weg, p weg, h2 statt div,
position, width, height etc ganz weg.
Wenn das wirklich positioniert werden soll, steckst du h1 und
h2 in ein div namens #Head, das sollte dann reichen.

#Left - die Tabellen weg, das soll vermutlich das Menü werden,
da verwendet man dann besser eine Liste.
Das kann man dann grob so dimensionieren:
position: absolute;
top: 3em;
left: 0;
width: 13em;

Ansonsten entsorgst du die Positionierungsangaben.
Dann schreibst du für #Mid und #Foot eben noch: margin-left: 14em;

#Foot schreibst du vermutlich sowieso schon von der
inhaltlichen Bedeutung her besser unten in den Quelltext.
font und center entsorgst du da auch - Text zentrieren kann
man auch mit CSS text-align: center.

#Mid statt font verwendest du für eine Überschrift dann sowas
wie h2 oder h3 etc, je nachdem, wie du das zu den vorherigen
Überschriften einordnest. u brauchst du vermutlich auch nicht
unbedingt - auch eher CSS verwenden.
Solange du keine weiteren Angaben zur Größe eines Elementes
machst, ist da sowas wie 100% impliziert, brauchst du dich nicht
drum kümmern, solange das nicht positioniert ist.
Beim #Head ist das implizit dadurch für die Breite festgelegt, daß
left und right 0 sind.

Ein Element ‘left’ gibt es in XHTML nicht , #Foot ganz weglassen,
könnte sich in #Mid um ein p-Element handeln, was inhaltlich
passen könnte.

7

??? srry das check ich geradenet… :frowning:

wenn ich in der Css diese ganzen angaben wegmache, dann hab ich doch keine DIVS mehr oder???

srry

MFG Sebatian

8

de.selfhtml.org/css/layouts/mehr … weispaltig

9

michi7x7 - wenn die Anordnung durch Positionierung erreicht
werden soll, ist eine Vorlage mit float nicht sehr hilfreich ;o)

Ist auch oft nicht besonders sinnvoll oder auch nur möglich,
float zu verwenden, wenn die Reihenfolge im Quelltext dazu
nicht paßt. Positionierung ist da schon deutlich flexibler und
stabiler. Allerdings sollte man da nicht alles und jedes starr
positionieren, sonst sieht das so übel aus, wie im oben
angegebenen Beispiel.

supersites - wenn du die meisten Positionierungsanweisungen
entsorgst, erreichst du damit, daß der verfügbare Anzeigebereich
komplett und sinnvoll ausgenutzt werden kann. Was du da
veranstaltet hast, ist mehr so ein ‘Litfaßsäulendesign’, wo man
genau weiß, wie groß die Litfaßsäule ist und wo man nachher
sowieso nur statisch sieht, was hinten rauskommt. Bei
interaktiven Dokumenten in (X)HTML hingegen trifft all dies nicht
zu, deswegen gestaltet man das Layout so flexibel, daß es sich
dem Anzeigebereich und vor allem auch der Schriftgröße des
Nutzers gut anpaßt. Das erreicht man nicht, indem man die
Höhe und Breite und Position von Elementen mit Text drin in
Pixeln festlegt - das kann man allenfalls machen, wenn man nur
Pixelgraphik als Inhalt hat.

10

Ich mag absolute Positionierungen nicht wirklich. Vor allem weil ich oft mit Headern arbeite, und die Größe dieser auch dynamisch sein kann :wink:

11

Ja, das kann knifflig sein, wenn man wie hier über die volle Breite
oben Text haben will, wo man nicht genau wissen kann, ob und
wo der umgebrochen wird.

float für mehrspaltiges Layout ist bei mir meist problematisch
bis unbrauchbar, weil sich die Reihenfolge der Inhalte im
Quelltext dafür nicht (gut) eignet - und wenn ich mir angucke,
wie andere Leute die Inhalte im Quelltext anordnen, die gern
float für sowas nutzen, dann denke ich auch, daß das oft
suboptimal ist oder zu weiteren subtilen Konstruktionen führt, die
man hätte vermeiden können, wenn man die Reihenfolge von
Inhalt und Menü im Quelltext gleich andersherum gesetzt hätte,
was dann wiederum meist float ausschließt.
Dann habe ich auch schon öfter mal gesehen, daß bei einer
ungeschickten Anwendung - auch bei bekannteren Seiten - wohl
auch weil alle Breiten explizit festgelegt werden, aber nicht alle
browser-Stilvorlagen überschrieben werden, dann plötzlich
der Platz nicht mehr ausreicht und die Sachen wieder
untereinander angeordnet werden. Da ist absolute Positionierung
schon narrensicherer und stabiler.
Dann gibt es eben auch die historischen Probleme mit dem
clear und worauf das angewendet wird, dabei auch die
Änderungen in CSS2.1.
Insofern ist ein Layout der globalen Struktur mittels float längst
nicht unproblematisch und bietet ähnlich viele oder gar mehr
Tücken als absolute Positionierung - die besonders bei Anfängern
allerdings leicht die Gefahr des ‘Litfaßsäulendesigns’ in sich birgt,
was auch schlecht für den Nutzer ist.
Bei einigen neueren Projekten lasse ich daher auch schon mal
beides und lasse den Inhalt einfach so fließen, wie er im
Quelltext steht, pappe die Navigation in link-Elemente oder
komplett in eine Indexseite, um zu einer einfachen,
ergonomischen Struktur zu gelangen, wo das parallele Angebot
verschiedener Inhalte nicht mehr den Leser unter 'Auswahlstreß’
setzt.