Der Kampf mit den Layern

  • #1
G

Gandalf_the_Grey

Bekanntes Mitglied
Themenersteller
Dabei seit
19.11.2003
Beiträge
2.768
Reaktionspunkte
0
Ort
Großraum Frankfurt/Main
Hallo zusammen,

ich habe ein kleines Problem.

Ich setze mich gerade mit CSS2 und Layern auseinander. Dabei kam ich auf die Idee ein Layer mit fest definierter Breite zu erstellen. Selbiges sollte 150px vom Kopf des Dokumentes entfernt in der MITTE schweben.

Leider finde ich in XHTML1.0 STRICT mit CSS auf anhieb KEINE Möglichkeit des Layer selbst mittig zu platzieren.

Also etwas das die selbe Wirkung wie ein <div align=center>...</div> produziert.

Versteht ihr was ich meine? Kann mir jemand sagen wie ich das schaffe?

Habe folgenden Code. Das DIV Layer mit der test1 soll mittig angezeigt werden (nicht nur der Text *gg* )

Code:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>[/url]
<html xmlns=[url]http://www.w3.org/1999/xhtml[/url] lang=de>
<head>
  <meta content=text/html; charset=ISO-8859-1 http-equiv=content-type />

  <meta content=René Charbonneau name=author />
  <title>René Charbonneau - Persönliche Webseite</title>


</head>
<body>
<div id=test1 style=position:absolute; top: 136px; width: 624px; background-color: rgb(255, 255, 224); text-align: center;>Dies ist ein absolut positionierter Text
über einer absolut positionierten Grafik.</div>

</body>
</html>

Außerdem wollte ich noch fragen ob jemand schon Erfahrung mit relativen div layern hat.

Also z.B. wollte ich als nächstes ein Layer produzieren das links 10% vom Browserfensterrand entfernt ist, selbst 30% des Browserfensters ein nimmt und rechts die restlichen 60% des Browserfensters wieder frei sind.

Geht sowas überhaupt? Bin was Layer angeht SEHR frisch.

Edit: Das position:absolute; noch eingefügt wo es in meiner Vorlage auch ist!
 
  • #2
Code:
<style type=text/css>
.centerLayer { 
	margin-left: auto;
	margin-right: auto;
	margin-top:200px; 
	width: 300px;
	height: 20px;
	background-color: #aacccc; 
    layer-background-color: #aacccc; 
    border: 1px dashed #000000;
	text-align:center; 
}
</style>
<div id=Layer1 class=centerLayer>Hallo René</div>

Is doch einfach ;) oder ???

gruss conny & PCDReitz
 
  • #3
Jungs, ich will ja nicht mäckern,

aber a) wo ist die Alte Lösung gin ;D
b) Wo ist die Erklärung hin ;D
c) Wieso zum Geier ist das Ding nun in der Mitte der Seite? Ich kapier es nicht. Hat jemand von euch mal ein paar Worte der Erleuchtung für mich? Ich finde keinen Grund weshalb das Ding mittig ausgerichtet ist. Das der Text mittig ausgerichtet wird sehe und verstehe ich. Aber wo richtet ihr das Layer mittig aus?
 
  • #4
Arghhh. Vergesst c) ich hätte einfach mal auf margin-left: auto; margin-right: auto; achten sollen. Aber auf die Idee bin ich ja mal überhaupt nicht gekommen. Cooler Trick. Aber ehrlich Jungs, ihr hättet ruhig beide Lösungen stehen lassen können :p
 
  • #5
Gandalf_the_Grey schrieb:
Cooler Trick. Aber ehrlich Jungs, ihr hättet ruhig beide Lösungen stehen lassen können :p

Nöööööööööööööööööööö ;D

Die erste Lösung war nicht Browsersicher ;)
 
  • #6
So, nu hab ich doch noch was gefunden *LOL*

Irgendwie hat das Teil keiner im IE ausprobiert ;D da funzt es auch net.
Aber dafür gibts natürlich Abhilfe.

Kleiner Griff in die Trickkiste gefällig ??? :D
Code:
<style type=text/css>
.center {
	text-align:center;
}
.centerLayer { 
	margin-left: auto;
	margin-right: auto;
	margin-top:200px; 
	width: 300px;
	height: 20px;
	background-color: #aacccc; 
	layer-background-color: #aacccc;
	border: 1px dashed #000000;
	text-align:center;
}
</style>
<div class=center>
 <div id=Layer1 class=centerLayer>Hallo René</div>
</div>

und schon is das Teil gefixt.

Was ist passiert ?
Der IE ignoriert einfach das margin:auto. Also müssen wir ihn dazu bringen das Teil trotzdem mittig auszurichten.
Hierzu legen wir einfach einen zusätzlichen <div> um unseren Layer und geben ihm das Attr. text-align:center und schon is die Wiese gemäht ;D ;D

gruss conny
 
  • #7
Also bei mir hatte es im IE6 unter Windows XP auf der Arbeit vorhin auch gefunzt! Habe da keinen Unterschied festgestellt. Aber da sich ja schon die IE Versionen nicht wie ein Haar gleichen nehme ich die untere Lösung als Maß aller Dinge.

Übrigens hattest du recht. Die erste, mittlerweile entfernte Lösung hatte ich nur daheim unter dem Fuchs probiert. Da lief es. Auf der Arbeit habe ich erst heute morgen mit dem IE testen können. Da war die andere Lösung aber schon weg.  ;D

P.S. Ich wünsche mir endlich eine Welt wo alle Browser die Standards der W3C genau gleich Unterstützen.

Aber das würde ja den Webdesignern nur die Arbeit erleichtern ;D :D
 
  • #8
Letzte Frage, aus welcher Version stammt das Attribut: layer-background-color. Der CSS Validator der W3C sagt mir das er das Attribut nicht kennt. Weder aus CSS1 noch aus CSS2 und von CSS3 ganz zu schweigen. Woher kommt das Attribut? Von welchen Browsern wird es benötigt bzw. nicht interpretiert?

Ich möchte nämlich ganz gerne mal Versuchen eine 100% saubere XHTML 1.0 STRICT Seite mit sauberem CSS1 und CSS2 zu bauen.

Mal sehen ob ich das hinkriege wie ich es mir wünsche.
 
  • #9
Habe eben schon wieder eine Nuss zum knacken. Ich komm und komm einfach nicht weiter. Ich wollte mal eine Index Seite basteln die oben ein div Layer hat welches eine Navi Leiste darstellt. Dieses Layer soll wie gesagt mittig direkt am oberen Rand kleben. Als nächstes soll ein zweites Layer am unteren Rand mittig kleben. Dieses enthält einen Bildlink zum W3C Validator.
In die Mitte sollte in ein eigenes div Layer der Content. Zunächst aber wollte ich einmal hin kriegen das ich die beiden ersten layer ausrichte. Doch irgendwie will das nicht wie ich möchte. Zumindest nicht im IE. Habe leider grad keinen Firefox mit dem ich das Testen könnte.

Mein Code sieht wie folgt aus:

Der Code der CSS Datei
Code:
.center
{
	text-align: center;
}
.topcenterlayer
{
	margin-left: 20%;
	margin-right: 20%;
	height: 20px;
	background-color: #aacccc;
	border: 1px dashed #000000;
	text-align: left;
	margin-top: 0px;
	z-index: 1;
}
.bottomcenterlayer
{
	margin-left: 20%;
	margin-right: 20%;
	background-color: #aacccc;
	border: 1px dashed #000000;
	text-align: left;
	margin-bottom: 0px;
	z-index: 2;	
}

Coder der HTML Datei:
Code:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>[/url]
<html xmlns=[url]http://www.w3.org/1999/xhtml[/url] lang=de>
<head>
<meta content=text/html; charset=ISO-8859-1 http-equiv=content-type />
<meta content=René Charbonneau name=author />
<title>René Charbonneau - Persönliche Webseite</title>
<link rel=stylesheet type=text/css href=./renecharbonneau.css />
</head>
<body>
<div class=center>
<div id=top class=topcenterlayer>
<a href=/de/index.php>Startseite</a> | 
<a href=/de/curriculum_vitae.php>Lebenslauf</a> | 
<a href=/de/projects.php>Projekte</a> | 
<a href=/de/publications.php>Publikationen</a> | 
<a href=[url]http://photos.sebastian-bergmann.de/>Fotos</a>[/url] | 
<a href=/de/contact.php>Kontakt</a>
</div>
<div id=bottom classbottomcenterlayer>
<a href=[url]http://validator.w3.org/check?uri=referer>[/url]
<img src=[url]http://www.w3.org/Icons/valid-xhtml10[/url] alt=Valid XHTML 1.0! height=31 width=88 />
</a>
<a href=[url]http://jigsaw.w3.org/css-validator/>[/url]
<img src=[url]http://www.w3.org/Icons/valid-css[/url] alt=Valid CSS! height=31 width=88 />
</a>
</div>
</div>
</body>
</html>
 
  • #10
Wenn ich das ganze so mache:

CSS Code:
Code:
.centertop
{
	position: absolute;
	top: 0px;
	text-align: center;
}
.centerbottom
{
	position: absolute;
	bottom: 0px;
	text-align: center;
}
.topcenterlayer
{
	margin-left: 20%;
	margin-right: 20%;
	height: 20px;
	background-color: #aacccc;
	border: 1px dashed #000000;
	text-align: left;
	margin-top: 0px;
	z-index: 1;
}
.bottomcenterlayer
{
	margin-left: 20%;
	margin-right: 20%;
	background-color: #aacccc;
	border: 1px dashed #000000;
	text-align: left;
	margin-bottom: 0px;
	z-index: 2;	
}

HTML Code:
Code:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>[/url]
<html xmlns=[url]http://www.w3.org/1999/xhtml[/url] lang=de>
<head>
<meta content=text/html; charset=ISO-8859-1 http-equiv=content-type />
<meta content=René Charbonneau name=author />
<title>René Charbonneau - Persönliche Webseite</title>
<link rel=stylesheet type=text/css href=./renecharbonneau.css />
</head>
<body>
<div class=centertop>
<div id=top class=topcenterlayer>
<ahref=/de/index.php>Startseite</a> | 
<a href=/de/curriculum_vitae.php>Lebenslauf</a> | 
<a href=/de/projects.php>Projekte</a> | 
<a href=/de/publications.php>Publikationen</a> | 
<a href=[url]http://photos.sebastian-bergmann.de/>Fotos</a>[/url] | 
<a href=/de/contact.php>Kontakt</a>
</div>
</div>
<div class=centerbottom>
<div id=bottom classbottomcenterlayer>
<a href=[url]http://validator.w3.org/check?uri=referer>[/url]
<img src=[url]http://www.w3.org/Icons/valid-xhtml10[/url] alt=Valid XHTML 1.0! height=31 width=88 />
</a>
<a href=[url]http://jigsaw.w3.org/css-validator/>[/url]
<img src=[url]http://www.w3.org/Icons/valid-css[/url] alt=Valid CSS! height=31 width=88 />
</a>
</div>
</div>

</body>
</html>

Dann wandert zwar das zweite DIV Layer nach unten, allerdings ist es dann nicht mehr mittig zentriert wie das erste.

Wird echt langsam skuriel.
 
  • #11
:D Du willst 20%, dann bekommste sie auch ;D

Code:
<style type=text/css>
.centertop {
	position: absolute;
	margin-left: 20%;
	top: 0px;
	text-align: center;
}
.centerbottom {
	position: absolute;
	margin-left:20%;
	bottom: 0px;
	text-align: center;
}
.topcenterlayer {
	height: 20px;
	width:400px;
	background-color: #aacccc;
	border: 1px dashed #000000;
	text-align: left;
	margin-top: 0px;
	z-index: 1;
}
.bottomcenterlayer {
	background-color: #aacccc;
	border: 1px dashed #000000;
	text-align: left;
	margin-bottom: 0px;
	z-index: 2;
}
img {
	border:0px
}
</style>
<div class=centertop>
 <div id=top class=topcenterlayer> <a href=/de/index.php>Startseite</a> | <a href=/de/curriculum_vitae.php>Lebenslauf</a> | <a href=/de/projects.php>Projekte</a> | <a href=/de/publications.php>Publikationen</a> | <a href=[url]http://photos.sebastian-bergmann.de/>Fotos</a>[/url] | <a href=/de/contact.php>Kontakt</a> </div>
</div>
<div class=centerbottom>
 <div id=bottom classbottomcenterlayer> <a href=[url]http://validator.w3.org/check?uri=referer>[/url] <img src=[url]http://www.w3.org/Icons/valid-xhtml10[/url] alt=Valid XHTML 1.0! height=31 width=88 /> </a> <a href=[url]http://jigsaw.w3.org/css-validator/>[/url] <img src=[url]http://www.w3.org/Icons/valid-css[/url] alt=Valid CSS! height=31 width=88 /> </a> </div>
</div>

Ganz einfach, Oder ???

Um deiner nächsten Frage vorzubeugen, beantworte ich sie gleich hier ;D

Ich hab k.A.

Es liegt nun mal in der Natur eines Layers, dass er 26.425 mal getestet werden muss, bis er in jedem Browser mitspielt.

gruss conny

PS:
Aber dafür hast du ja den Betreff des Threads gut gewählt ;)
 
  • #12
Okay, also ich habe nun fest gestellt das Layer wie es scheint zu unausgereift sind um damit vernünftig zu arbeiten. Denn nachdem ich heute morgen endlich mal dazu kam wieder ein wenig damit zu spielen viel mir auf das es scheinbar echt nicht vernünftig möglich ist die Layer zu positionieren. Bisher ist es mir NICHT gelungen die beiden Layer 20% von Links UND 20% von rechts anfangen/aufhören zu lassen. Damit ist das Arbeiten mit Layern für mich recht nutzlos geworden.

Ich danke allen, insbesondere Conny die sich den Thread zu Herzen genommen haben und versucht haben mir zu helfen. Wenn auch im Geiste!
 
  • #13
Okay, neues von der Layer Front.

Nach einigem hängen und würgen und einem schlechten gewissen das mich nicht verliess, habe ich mich erneut in den Kampf geworfen.

Nachdem ich auch einige Erfolge erzielte stieß ich allerdings auf das nächste Problem wo ich mir bis jetzt die Zähne ausbeiße.

Vieleicht hat ja hier jemand eine Ahnung woran das liegen kann respektive wie man das Problem löst.

Folgender Quellcode liegt dem ganzen zu Grunde:

CSS:
Code:
html
{
	height: 100%;
}

body
{
	height: 100%;
	margin: 0%;
	padding: 0%;
	text-align: center;
}

.main
{
	width: 760px;
	margin: 0px auto;
	text-align: left;
	background-color: #aacccc;
	height: 100%;
}

.navi
{
	width: 100%;
	margin: 0px auto;
	background-color: #aaaccc;
	height: 20%;
	text-align: center;
}

.content
{
	width: 100%;
	margin: 0px auto;
	background-color: #aaaaaa;
	height: 60%;
	text-align: left;
}

.footer
{
	width: 100%;
	margin: 0px auto;
	background-color: #aaaccc;
	height: 20%;
	text-align: center;
}

img
{
	border: 1px;
	background-color: #aacccc;
	border: 1px dashed #000000;
}

HTML:
Code:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>[/url]
<html xmlns=[url]http://www.w3.org/1999/xhtml[/url] lang=de>
<head>
<meta content=text/html; charset=ISO-8859-1 http-equiv=content-type />
<meta content=René Charbonneau name=author />
<title>René Charbonneau - Persönliche Webseite</title>
<link rel=stylesheet type=text/css href=./renecharbonneau.css />
</head>
<body>
<div id=main class=main>

<div id=navi class=navi>
<a href=#>Startseite</a> | 
<a href=#>Lebenslauf</a> | 
<a href=#>Projekte</a> | 
<a href=#>Publikationen</a> | 
<a href=#>Fotos</a> | 
<a href=#>Kontakt</a>
</div> <!-- schliessendes div für navi -->

<div id=content class=content>
<p>Hallo Welt</p>
</div> <!-- schliessendes div für content -->

<div id=footer class=footer>
<a href=[url]http://validator.w3.org/check?uri=referer><img[/url] src=[url]http://www.w3.org/Icons/valid-xhtml10[/url] alt=Valid XHTML 1.0! height=31 width=88 /></a>
<a href=[url]http://jigsaw.w3.org/css-validator/><img[/url] src=[url]http://www.w3.org/Icons/valid-css[/url] alt=Valid CSS! height=31 width=88 /></a>
</div> <!-- schliessendes div für footer -->

</div> <!-- schliessendes div für main -->
</body>
</html>

Das eigentliche Problem ist folgendes:

Ich habe mir vorgestellt das ich wie eh und je 3 div Container habe. 1 x mit 20% der zu Verfügung stehenden Fensterhöhe ganz oben (Navi) 1 x mit 60% der Fensterhöhe in der Mitte (Content) und 1 x 20% der Bildschirmhöhe ganz unten (footer).

Das habe ich an sich auch geschafft. Mit Textausrichtung so wie es sein soll usw.

Allerdings habe ich (zum Glück habe ich die Hintergrundfarben mal geändert) festgestellt das im Firefox und im Opera der Hintergrund des main layers (welches die 3 letzten div layer (navi, content und footer) umschließt) durchscheint.

Im IE werden die 3 div layer nahtlos aneinander gefügt. In den anderen beiden Browser nicht. Kann mir jemand sagen wieso bzw. was ich dagegen tun kann?

Bin grad etwas ratlos.
 
  • #14
Probiers mal so:

Code:
p {
  margin:0%;
  padding:0%;
}

;) ;D
 
  • #15
Aua, das ist doch nicht wirklich war  ::) Was soll den der mist. Das muss ich doch echt nicht kapieren. Wo ist da nur die Logik?

Danke Conny, hat geholfen!  ;)

::) ::)
 
  • #16
Gandalf_the_Grey schrieb:
Das muss ich doch echt nicht kapieren.

Nö ;D

Gandalf_the_Grey schrieb:
Wo ist da nur die Logik?

Welche Logik ;D
So lange nicht alle Browser CSS gleich behandeln, ist doch hier von Logik eh nicht zu sprechen ;)
 
  • #17
Eine letzte Frage bevor ich für heute entnervt aufhöre.

Folgender Quelltext sieht bei mir im Opera, Firefox und IE unter Windows recht gut aus.

CSS:
html
{
height: 100%;
}

body
{
margin: 0%;
text-align: center;
height: 100%;
}

img
{
background-color: #aacccc;
border: 1px dashed #000000;
}

p
{
margin: 0%;
padding: 0%;
}

#main
{
width: 760px;
margin: 0px auto;
text-align: left;
background-color: #aacccc;
height: 100%;
}

#navi
{
width: 100%;
margin: 0px auto;
text-align: center;
background-color: #aaaccc;
height: 5%;
}

#content
{
width: 100%;
margin: 0px auto;
text-align: left;
background-color: #aaaaaa;
height: 87%;

}


#footerleft
{
width: 80%;
margin: 0px auto;
text-align: left;
background-color: #aaaccc;
height: 8%;
font-size: 0.8em;
float: left;
}

#footerright
{
width: 20%;
margin: 0px auto;
text-align: center;
background-color: #aaaccc;
height: 8%;
float: right;
}

HTML:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html xmlns=http://www.w3.org/1999/xhtml lang=de>
<head>
<meta content=text/html; charset=ISO-8859-1 http-equiv=content-type />
<meta content=René Charbonneau name=author />
<title>René Charbonneau - Persönliche Webseite</title>
<link rel=stylesheet type=text/css href=./renecharbonneau.css />
</head>
<body>
<div id=main>

<div id=navi>
<a href=#>Startseite</a> |
<a href=#>Lebenslauf</a> |
<a href=#>Projekte</a> |
<a href=#>Publikationen</a> |
<a href=#>Fotos</a> |
<a href=#>Kontakt</a> |
<a href=#>Impressum</a> |
<a href=#>Disclaimer</a>
</div> <!-- schliessendes div für navi -->

<div id=content>
<p>Hallo Welt</p>
</div> <!-- schliessendes div für content -->

<div id=footerleft>
<a href=http://creativecommons.org/licenses/by-nc-nd/2.0/>Einige Rechte vorbehalten. </a>© 2005 René Charbonneau<br />
Optimiert für <a href=http://validator.w3.org/check?uri=referer>XHTML 1.0 Strict </a>und <a href=http://jigsaw.w3.org/css-validator/>CSS 2</a><br />
Letzte Änderung: 07.06.2005 14:40 GMT +1.00
</div> <!-- schliessendes div für footerleft -->

<div id=footerright>
<a href=#>Seitenanfang</a>
</div> <!-- schliessendes div für footerright -->

</div> <!-- schliessendes div für main -->
</body>
</html>

Beginne ich aber nun die Seite auf dem Bildschirm zu verkleinern (soll ja auch schon mal vorkommen das jemand NICHT die volle Fläche des Bildschirms für den Browser verwendet), kriege ich im IE plötzlich ein graues Kästchen unten links wo Seitenanfang steht. Außerdem schwappt der Text unten rechts über.

Da ich den Wald vor lauter Bäumen nicht mehr sehe hier meine Frage:

Woher zu Geier kommt dieses Elende Graue Kästchen?
Wie kann ich verhindern das der Text über das div Maximum hinaus schwappt. In der navi Zeile funktioniert es doch auch!

Das mit der Logik sowie CSS und Layern scheint echt so eine Sache bei den Browsern zu sein ::)
 
  • #18
Code:
.footer {
  margin: 0px auto;
  background-color: #aaaccc;
  height: 8%;

}
#footerleft
{
  width: 80%;
  text-align: left;
  background-color: #aaaccc;
  font-size: 0.8em;
  float: left;
}

#footerright
{
  width: 20%;
  text-align: center;
  float: right;
}

Code:
<div class=footer>
 <div id=footerleft>
  <a href=[url]http://creativecommons.org/licenses/by-nc-nd/2.0/>Einige[/url] Rechte vorbehalten. </a>© 2005 René Charbonneau<br />
  Optimiert für <a href=[url]http://validator.w3.org/check?uri=referer>XHTML[/url] 1.0 Strict </a>und <a href=[url]http://jigsaw.w3.org/css-validator/>CSS[/url] 2</a><br />
  Letzte Änderung: 07.06.2005 14:40 GMT +1.00
 </div> <!-- schliessendes div für footerleft -->
 <div id=footerright>
  <a href=#>Seitenanfang</a>
 </div> <!-- schliessendes div für footerright -->
</div>
</div> <!-- schliessendes div für main -->
 
  • #19
Hatte ich so ähnlich schon probiert. Funzt im IE sehr gut, leider NICHT im Opera und im Firefox. Dort entsteht weiterhin das Kästchen unten rechts. Die Schrift links unten swappt zwar nun nicht mehr aber die Schrift rechts (Seitenanfang) ab einer bestimmten Fenstergröße aber schon.

Ich krieg echt das kalte Kotzen. Kann doch nicht sein das die Unterstützung für div Layer SOO schlecht ist. Hab mittlerweile sogar eine Seite gefunden (css4you) die komplett darauf aufgebaut ist.

Und sooo komplex ist meine Layer Struktur ja nun auch nicht.

Ich hasse es wenn keine Logik da ist auf die man sich einstellen kann.

Habe übrigens das ganze mal online gestellt:

http://www.gandalfthegrey.de/upload/test.html
 
  • #20
Okay, diverse Lösungsansätze (die leider nirgends 100% zufriedenstellend liefen) später habe ich mich dazu entschlossen, das Design über den Haufen zu werfen und es anders zu probieren. Ist halt sch*** wenn die benötigten Tags nicht überall unterstützt werden.

Kack Browser Krieg!
 
Thema:

Der Kampf mit den Layern

ANGEBOTE & SPONSOREN

Statistik des Forums

Themen
113.838
Beiträge
707.959
Mitglieder
51.491
Neuestes Mitglied
haraldmuc
Oben