Zur Navigation

Layout an Bildschirmhöhe anpassen

1 teenboy

[Jörg: abgetrennt von hier]

ach, mit float ist die Lösung! Vielen Dank!


jetzt habe ich versucht ein bisschen weiter zu schreiben, jetzt ist ein anderes Probem aufgetaucht! Ich möchte unten alles fix positionieren und das sich der Mittelteil automatisch anpasst! dafür werde ich auf der Rechten seite auf Slice 5 verzichten und eine Farbe nehmen, das wird schon gehen, aber irgendwie kann ich Slice 7 nicht an Slice sechs anhängen, da ich hier fix positionen machen muss, oder gibt es auch eine andere Lösung

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> test </title>
<style type="text/css">
body {margin: 0px;}
.oben {display:block; top:10px; z-index: 1; height: 50px; margin: auto; position:fixed; background: #a00000; color:#fff; }
.unten {display:block; height: 50px; bottom: 0px; position:fixed; background: #a00000;}
.mitte {display: block; overflow: show; position: relative; margin: 90px 0px 50px 0px; width: 680px; background: #0000a0;}
</style>

</head>

<body>

<div style="display: block; z-index: 1; background: #f00fff; top: 0px; width:982px; margin:0 auto">
<div style="background: url(slice_01.jpg); width: 680px; height: 80px; float:left;">Slice1</div>
<div style="background: url(slice_02.jpg); width: 302px; height: 80px; float:right;">Slice2</div>
<div>
<div style="background: url(slice_03.jpg); width: 20px; height: 614px; float:left; top: 0px left: 0px">3 </div>
<div style="overflow: auto; float:left; width: 660px; height: 614px; top: 0px left: 680px">
<p>Hauptmaske</p>
</div>
<div style="background: url(slice_04.jpg); width: 302px; height: 351px; float:left; top: 0px left: 0px">4</div>
<div style="background: url(slice_05.jpg); width: 302px; height: 263px; float:left; top: 0px left: 0px">5</div>
</div>
<div style="background: url(slice_06.jpg); width: 680px; height: 40px; position:fixed; float:left; bottom: 0px;">Slice6</div>
<div style="background: url(slice_07.jpg); width: 302px; height: 40px; position:relative; float:left; bottom: 0px; left: 680px">Slice7</div>
</div>
</body>
</html>

30.04.2009 08:11 | geändert von Jörg: 01.05.2009 09:49

2 Jörg Kruse

Du könntest die beiden divs in ein übergeordnetes div packen, welches anstelle von Slice 6 fix positioniert ist

30.04.2009 10:44

3 teenboy

und an welcher stelle müsste man das einbinden! von wo bis wo?

30.04.2009 11:05

4 Jörg Kruse

An der Stelle, wo sich die beiden divs jetzt bereits befinden.

30.04.2009 14:33

5 teenboy

des verstandi jetzt ned!

30.04.2009 14:46

6 Jörg Kruse

Da wo sich die beiden divs befinden, ein übergeordnetes div einbauen, welches die fixe Positionierung von Slice6 erhält:

<div style="position:fixed; bottom: 0px;">
<div style="background: url(slice_06.jpg); width: 680px; height: 40px; float:left;">Slice6</div>
<div style="background: url(slice_07.jpg); width: 302px; height: 40px; float:right;">Slice7</div>
</div>

30.04.2009 14:52 | geändert: 30.04.2009 14:53

7 teenboy

schein als hätte ich das mit deiner Hilfe schon bald geschafft! eigentlich habe ich sehr viel gelernt! Der Umstieg von Tabellen zu Div ist gar nicht so einfach!

Anbei mein noch letztes Problem. Ich möchte das Div 5 sich anpasst mit dem Fix Position Div 6+7!
Abhängig von dem inhalt und von der Bildschirm Grösse! Habe mir gedacht das Div 5 einzufährben, oder sogar DIV 3+4+5 noch in ein zusätzlich div einzupflanzen und das dann mit einem braunton wie DIV 5 zu färben, hat aber nicht funktioniert!

Anbei nochmals den aktuellen Code! Bald ist es geschafft!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> test </title>
<style type="text/css">
body {margin: 0px;}
</style>

</head>

<body>

<div style="display: block; z-index: 1; background: #f00fff; top: 0px; width:982px; margin:0 auto">
<div style="background: url(slice_01.jpg); width: 680px; height: 80px; float:left;">Slice1</div>
<div style="background: url(slice_02.jpg); width: 302px; height: 80px; float:right;">Slice2</div>
<div>
<div>
<div style="background: url(slice_03.jpg); width: 20px; height: 614px; float:left; top: 0px left: 0px">3 </div>
<div style="overflow: auto; float:left; width: 660px; height: 614px; top: 0px left: 680px">
<p>Hauptmaske</p>
</div>
<div style="background: url(slice_04.jpg); width: 302px; height: 351px; float:left; top: 0px left: 0px">4</div>
<div style="background: url(slice_05.jpg); width: 302px; height: 263px; float:left; top: 0px left: 0px">5</div>
</div>
<div style="position:fixed; bottom: 0px;">
<div style="background: url(slice_06.jpg); width: 680px; height: 40px; float:left;">Slice6</div>
<div style="background: url(slice_07.jpg); width: 302px; height: 40px; float:right;">Slice7</div>
</div>
</div>
</body>
</html>

30.04.2009 20:26

8 Jörg Kruse

Anbei mein noch letztes Problem. Ich möchte das Div 5 sich anpasst mit dem Fix Position Div 6+7!
Abhängig von dem inhalt und von der Bildschirm Grösse! Habe mir gedacht das Div 5 einzufährben, oder sogar DIV 3+4+5 noch in ein zusätzlich div einzupflanzen und das dann mit einem braunton wie DIV 5 zu färben, hat aber nicht funktioniert!

Was möchtest du anpassen - dass das Div 5 bis zu den unteren Divs runterreicht?

Dir ist aber schon klar, dass sich das Div 5 bei kleineren Bilddschirmauflösungen bereits unterhalb von 6 und 7 befindet?

Wenn du die Höhen abhängig von der Bildschirmhöhe machen möchtest, benötigst du JavaScript

Falls du etwas anderes meinst, bitte genauer erklären

30.04.2009 23:32

9 teenboy

Div 5 besteht aus einem Bild, ich kann das Bild auch kleiner machen und den rest mit der gleichen Farbe füllen!

Ja genau, möchte Bildschirmunabhängig sein!

01.05.2009 08:21