Der Kampf mit den Layern

Dieses Thema Der Kampf mit den Layern im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von Gandalf_the_Grey, 12. Mai 2005.

Thema: Der Kampf mit den Layern Hallo zusammen, ich habe ein kleines Problem. Ich setze mich gerade mit CSS2 und Layern auseinander. Dabei kam ich...

  1. 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. 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.
     
Die Seite wird geladen...

Der Kampf mit den Layern - Ähnliche Themen

Forum Datum
Asterix und der Kampf ums Kanzleramt Windows XP Forum 17. Okt. 2005
Spyboot Search & Destroy bekämpfung Viren, Trojaner, Spyware etc. 13. Okt. 2005
billig billig...6600gt zum kampfpreis Windows XP Forum 15. Apr. 2005
SPAM - Entstehung, Bekämpfung, Vermeidung Sonstiges rund ums Internet 27. Aug. 2004
Abspielen v. Audios in allen Playern erst nach mehreren Start-Versuchen möglich Windows XP Forum 31. Dez. 2009