Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Ebenen und CSS Fragen.....
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Ebenen und CSS Fragen.....

Pages: [1]
geschrieben von Leipziger am 12.02.2004 - 22:45
Hallo,

unter www.dsb-berleburg.de/layer.htm ist das Ergebnis meiner ersten Versuche
mit Ebenen.

Getestet habe ich das mit dem IE6, Mozilla1.6 und Opera 7 auf Windows.
Wie sieht es mit anderen Browsern - Betriebssystemen aus?
Was ist daran falsch oder kann besser gemacht werden? Kritik und Vorschläge
sind willkommen.

Es soll so aus sehen das die Navigation und Logo immer oben steht.
Dazwischen der Text.
Unten ein kleine Leiste.

Wie bekomme ich das hin das die Ebene mit Text immer in der Mitte und den
restlichen Bildschirminhalt ausfühlend (in der Höhe) groß ist? Die Breite
(795px) ist durch das Logo vorgegeben. Da ist Schrift drin und wenn ich mit
% arbeite, sieht das nicht mehr sauber aus. Andererseits soll die mitlere Ebene natürlich eine bestimmte Mindestgröße haben. Sonst habe ich ja vielleicht nur zwei
Zeilen Text.

Geht das überhaupt so wie ich mir das Vorstelle? (Ja mit Frame geht das,
aber ich möchte es mal nicht mit Frame realisieren.)

Warum stellt Opera die Rahmen nicht dar?

Ich hoffe es sind nicht zu viele Fragen auf einmal.

Gruß

geschrieben von starleos am 12.02.2004 - 23:03
Hallo Leipziger,

den Text mittig zu posititionieren und den Footer unten sowie den oberen Div oben zu lassen ist nicht schwer.

Das Problem ist das sie sich nicht überschneiden, daran arbeite ich noch.

Ich poste dir mal den momentanen Stand:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 

<style type="text/css">
body {
	scrollbar-arrow-color:#000000;
	scrollbar-face-color: Pink;
	scrollbar-highlight-color:#000000;
	scrollbar-3dlight-color: Pink;
	scrollbar-shadow-color:#000000;
	scrollbar-darkshadow-color: Pink;
	scrollbar-track-color:#F8F8F8;
	font-family: Arial; 
	font-size: 14px;
	letter-spacing: normal;
	word-spacing: normal;
	white-space: normal;
	margin: 0; 
	padding: 0; 
}
#oben { 
	position: absolute;
    top: 0;
	width: 795px; 
	height: 100px; 
	padding: 0;
	margin-left:-397.5px; left:50%; 
	border-bottom: 2px groove LightGrey;
	border-right: 2px groove LightGrey;
	border-left: 1px solid LightGrey;
	border-top: 1px solid LightGrey;
	background-color: #F8F8F8;
}
#mitte { 
	width: 795px; 
	height: 420px;
	margin-top:-210px; margin-left:-397.5px;top:50%;left:50%;position:absolute; text-align:left; 
	padding: 0; 
	border-bottom: 2px groove LightGrey;
	border-right: 2px groove LightGrey;
	border-left: 1px solid LightGrey;
	border-top: 1px solid LightGrey;
	background-color: #F8F8F8; 
	text-align: left; 
	overflow: auto;
}
#unten { 
	
	position: absolute;
	bottom: 0;
    width: 795px; 
	height: 25px; 
	padding: 0;
	margin-left:-397.5px; left:50%;
	border-bottom: 2px groove LightGrey;
	border-right: 2px groove LightGrey;
	border-left: 1px solid LightGrey;
	border-top: 1px solid LightGrey;
	background-color: #F8F8F8; 
}
#leer { 
	width: 795px; 
	height: 20px; 
	margin: 0 auto; 
	padding: 0; 
	border: 0; 
}


Hoffe kannst damit schon mal was anfangen.

Lg

starleos

geschrieben von Leipziger am 12.02.2004 - 23:39
Danke

neuste Version ist online. Kleine Änderungen meinerseits sind auch noch drin.
Logo war etwas auser der mitte.

Jetzt ist nur das überlappen noch in den Griff zu bekommen.
Wäre schade wenn das Logo nicht immer Sichtbar ist.
Eventuell die Größe des Textes oder ist das so OK?

Gruß

Nachtrag:

erkläre mir doch mal
margin-top:-210px; margin-left:-397.5px;top:50%;left:50%;position:absolute; text-align:left;
Warum nicht
margin: 0 auto;

geschrieben von starleos am 13.02.2004 - 10:46
Morgen Leipziger,

freut mich das ich dir helfen konnte

also warum diese Angaben:

Wenn du einen Kasten in der Mitte des Bildschirms zentirieren willst gibts du ja folgenden Wert an,

body {text-align:center;}

#inhalt {text-align:left;margin:0px auto;}

somit hättest du den Kasten in der Mitte aber nicht in der Mitte von der Höhe des Bildschirms. Da es aber kein
vertical-align gibt und du ein Kasten mit einer festeingestellten Größe hast, musst du ihn also

absolut posittionieren.

1. Schritt

Mit top und left positionierst du den Anfang des Kastens (also die linke obere Ecke)

top:50%; left:50%;

nun hast du den Anfang des Kastens, in die Mitte deiner Seite.

2. Schritt

Um die Mitte des Kastens auf die Mitte der Seite zu positionieren, legst du einen negativen äußeren Abstand in der Hälfte der Abmessung des Kastens und schiebst somit den Kasten um die Hälfte der Abmessung zurück.

Beispiel:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 

#kasten {

height:100px;
width:300px;
margin-top: -50px; <------- Also die Hälfte
margin-left:-150px;<---------- ""          "
top:50%;<------------------Damit es sich bei jedem Fenster anpasst
left:50%;<--------------------- ""          "
position:absolute;
background-color:#dedede;
border:1px solid #000;
}


Mit "oben" und "unten" gilt es ebenso aber nur in der Breite, die Höhe und Tiefe erklären sich von selbst.

Lg

starleos

geschrieben von Leipziger am 14.02.2004 - 19:32
Hallo,

@starleos Danke für die Antwort.
Kannte bisher nur die Variante
Zitat
 body {text-align:center;}
#inhalt {text-align:left;margin:0px auto;}


Mann oder Frau lernt nie aus. ;)

Ein paar Fragen auch an alle anderen hier.

Ich habe die #mitte mit % angegeben. Bekommt man das hin das auch die #mitte immer in der Mitte ist ohne das sich die Ebenen überschneiden (dies passiert ja nun mit #oben)? Da passiert aber auch wenn ich eine feste Größe für die Höhe nehme.

Eine Idee ist eine Ebene mit der breite 800 und Höhe 100% anzulegen. Diese dann zentrieren. Dabei kann ich ja die margin:0px auto Variante nehmen. In diese Ebene die 3 anderen Ebenen rein. Mit der oben und unten als feste Größe dazwischen zwei Ebenen mit variabler Höhe.

Geht das über haupt und wie?
Wenn nicht welche möglichkeit besteht noch?

Gruß

geschrieben von starleos am 14.02.2004 - 19:43
Hallo Leipziger,

wie wäre folgende Lösung:

mache einen Hauptdiv, stecke alle 3 Varianten hinein und gib für die mittlere Variante eine % Angabe.

Somit wurde sichder mittlere Inhalt automatisch anpassen, oder?

Zur Zusatzinfo, es gibt im css folgende Befehle:

#box {
height: 50%;
min-height: 150px;
max-height:450px;
}

Doch leider wirdst nur von Mozilla unterstütz, schönen Gruß an den schwerfälligen und zu tolleranten IE.

Lg

starleos

geschrieben von Leipziger am 14.02.2004 - 19:55
Hallo starleos

Ich werd mal schauen ob ich das hin bekomme.

Sonst melde ich mich einfach wieder

Gruß


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.