Anzeige

CSS: Layer in Layer positionieren?

CSS: Layer in Layer positionieren? | PSD-Tutorials.de

Erstellt von Whykiki, 27.10.2005.

  1. Whykiki

    Whykiki Komischer Typ und Köter

    Dabei seit:
    26.08.2005
    Beiträge:
    780
    Geschlecht:
    männlich
    Ort:
    Moers
    Software:
    CS3 Design Premium (registriert)
    Kameratyp:
    Nikon D70s
    CSS: Layer in Layer positionieren?
    Hallo,

    habe einen "Hauptlayer", in den ich das Design packen möchte. Nun möchte ich z.B.oben Layer für die Buttons anlegen, diese sollen aber am Hauptlayer ausgerichtet sein....

    Mit position:absolute richtet er die weiteren Layer halt unabhängig von meinem Hauptlayer aus. Wie bekomme ich es nun hin, dass ich alle Layer an meinen Hauptlayer ausgerichtet bekomme??

    Hoffe ihr habt mich verstanden?! Danke!!
     
    #1      
  2. DrAntiforce

    DrAntiforce Noch nicht viel geschrieben

    Dabei seit:
    20.09.2005
    Beiträge:
    30
    CSS: Layer in Layer positionieren?
    wenn ich das richtig verstehe hast du einen Rahmen definiert in den andere elemente rein sollen!?

    also:
    Code (Text):
    1. <div id="Rahmen">
    2.    <div id="menu">Links</div>
    3.    <div id="inhalt">Inhalt</div>
    4. </div>
    5.  
    6. wenn du es so gemacht hast und "position" nicht veränderst dürften die Inhalte eigendlich immer innerhalb der oberen Box sein (nächst höheres Element) außer wenn die unteren Boxen zu groß sind dann vergrößert sich die obere Box oder bleibt gleichgroß (reaktion Browserabhängig).
     
    #2      
  3. Tim

    Tim Hutträger

    Dabei seit:
    27.08.2005
    Beiträge:
    2.884
    Geschlecht:
    männlich
    Ort:
    Fellbach
    CSS: Layer in Layer positionieren?
    Wenn du es so gemacht hast wie @DrAntiforce geschrieben hat, dürftest du leider nur im IE dieses Problem haben. Der positioniert nämlich immer von ganz außen bei position:absolute. Der Firefox positioniert sinnvollerweise von innen.
    Ich habs mit ner Browserweiche umgangen ->www.css4you.de
    da findeste viele Tipps zu CSS, da steht auch viel übers positionieren und über Browserweichen. Die Lösung sollte dort zu finden sein.
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    CSS: Layer in Layer positionieren?
    du kannst die div's verschachteln etwa so:



    Code (Text):
    1.  
    2.  
    3. <div id="layout" style="position:absolute; left:50px; top:34px; width:400px; height:300px; border: 1px solid #000">layoutangaben wie bilder usw.
    4.  
    5.         <div id="menue" style="position:absolute; left:10px; top:10px; width:380px; height:100px; border: 1px solid #ff0000">menue oder inhalt</div>
    6.  
    7. </div>
    8.  
    9.  

    das 2. div richtet sich nach dem 1. aus...

    weiten und höhen anpassen, rahmen hab ich nur eingestzt, um die div's sichtbar zu machen


    rest siehe über mir, ich bin zu langsam




    der code funzt sowohl in firefox/ mozilla, IE, Opera
     
    #4      
  5. Whykiki

    Whykiki Komischer Typ und Köter

    Dabei seit:
    26.08.2005
    Beiträge:
    780
    Geschlecht:
    männlich
    Ort:
    Moers
    Software:
    CS3 Design Premium (registriert)
    Kameratyp:
    Nikon D70s
    CSS: Layer in Layer positionieren?
    OK, danke erstmal. Funzt soweit, ABER:

    Wenn ich nun meinen "Layout"-Layer zentriert ausrichte (siehe http://css.fractatulum.net/sample/layout4format.htm ) durch:

    margin: auto und text-align: left

    dann passt es leider nicht mehr....einer ne Idee...??

    Edit:
    Hab selbst auch nochmal probiert, aber kann mir jemand sagen, warum Button2 nicht die in der Höge genauso liegt wie Button1???

    Code (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head>
    4. <title>CSS-Layout 7</title>
    5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    6. <meta http-equiv="Content-Style-Type" content="text/css">
    7. <style type="text/css">
    8. <!--
    9. body
    10. {
    11.     color :black ;
    12.     background-color : #f0f0f0;
    13.     font-family : tahoma, arial, verdana, helvetica, sans-serif;
    14.     font-size : 90%;
    15.     margin : 0px;
    16.     padding:0px;
    17.     text-align:center;
    18. }
    19.  
    20. #silver
    21. {
    22.     color:black;
    23.     background-color : silver;
    24.     border: 1px solid black;
    25.     width:740px;
    26.     padding:0px;
    27.     text-align:left;
    28.     margin:auto;
    29.     margin-top:0px;
    30. }
    31. #button1
    32. {
    33.     color:black;
    34.     background-color : #ffffff;
    35.     border: 1px solid black;
    36.     width:100px;
    37.     padding:0px;
    38.     position:relative;
    39.     left:0px;
    40.     margin-top: 0px;
    41. }
    42. #button2
    43. {
    44.     color:black;
    45.     background-color : #ffffff;
    46.     border: 1px solid black;
    47.     width:100px;
    48.     padding:0px;
    49.     position:relative;
    50.     left:100px;
    51.     margin-top:0px;
    52. }
    53.  
    54. -->
    55. </style>
    56. </head>
    57. <body>
    58. <div id="silver">
    59. <div id="button1">Button1</div>
    60. <div id="button2">Button2</div>
    61. </div>
    62. </body>
    63. </html>
    64.  
    (Einfach alles in den Editor reinpacken und dann testen. Bitte!)

    Noch was: Wenn ich es so mache, funzt das auf allen Browsern gleich????
     
    #5      
  6. Tim

    Tim Hutträger

    Dabei seit:
    27.08.2005
    Beiträge:
    2.884
    Geschlecht:
    männlich
    Ort:
    Fellbach
    CSS: Layer in Layer positionieren?
    Sorry, bin auf der Arbeit, kanns deswegen nicht testen, aber so auf die Schnelle behaupte ich du solltest bei beiden Buttons mal "float: left" mit einfügen. Probiers einfach mal aus.
     
    #6      
  7. Whykiki

    Whykiki Komischer Typ und Köter

    Dabei seit:
    26.08.2005
    Beiträge:
    780
    Geschlecht:
    männlich
    Ort:
    Moers
    Software:
    CS3 Design Premium (registriert)
    Kameratyp:
    Nikon D70s
    CSS: Layer in Layer positionieren?
    Hmm...nee float:left bringt nix.....ich möchte erreichen, dass beide Buttons auf der selben Höhe liegen...laut CSS (soweit ich es verstehe), tun sie das auch..., aber im IE wirds so nicht angezeigt!!!

    Edit:

    Hier das Beispiel: www.whykiki.de/test.htm

    Hätte jemand mal die Güte, das evtl. auch in anderen Browsern zu testen?? Evtl. mir nen Screenshot reinstellen...!
     
    #7      
  8. Tim

    Tim Hutträger

    Dabei seit:
    27.08.2005
    Beiträge:
    2.884
    Geschlecht:
    männlich
    Ort:
    Fellbach
    CSS: Layer in Layer positionieren?
    Hmmm..versteh ich nicht ganz..

    aber hast Recht, es ist verschoben.. wie gesagt, ich würds gern testen kanns aber nicht. Ich kann nur vermuten. Also mach mal position:absolute.. bei relative liegts im Textfluss, daran könnte es liegen.

    Und noch was: warum benutzt du für deine 2 Buttons genau dasselbe CSS?

    du kannst auch einfach zweimal hintereinander <div id="button"></div> machen.
     
    #8      
  9. Whykiki

    Whykiki Komischer Typ und Köter

    Dabei seit:
    26.08.2005
    Beiträge:
    780
    Geschlecht:
    männlich
    Ort:
    Moers
    Software:
    CS3 Design Premium (registriert)
    Kameratyp:
    Nikon D70s
    CSS: Layer in Layer positionieren?
    Naja ich benutze es zweimal, weil ich den 2.Button ja genau 100px links von dem 1. haben wollte, damit die aneinander anschließen....

    Wenn ich wieder "absolute" benutze, dann gehen die Buttons ja wieder ganz nach Links, sie sollen sich jedoch amübergeordneten Layer ausrichten...

    Hmm....Tabellen sind irgendwie cooler zu bearbeiten...
     
    #9      
  10. Tim

    Tim Hutträger

    Dabei seit:
    27.08.2005
    Beiträge:
    2.884
    Geschlecht:
    männlich
    Ort:
    Fellbach
    CSS: Layer in Layer positionieren?
    Das mit den Tabellen: hast Recht :D

    Hast du Firefox drauf? Dann schaus dir mal mit position:absolute an, du wirst sehen, er positionierts dir richtig innerhalb deines Layers, das macht nur der trottelige IE falsch :roll:

    Hm.. ich schaus mir nochmal genauer an, wenn ich zuhause bin, okay?

    wie gesagt: www.css4you.de is ne gute Anlaufstelle für positionieren und Browserweichen ;)
     
    #10      
  11. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    CSS: Layer in Layer positionieren?
    meinst du so?

    Code (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head>
    4. <title>CSS-Layout 7</title>
    5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    6. <meta http-equiv="Content-Style-Type" content="text/css">
    7. <style type="text/css">
    8. <!--
    9. body
    10. {
    11.     color :black ;
    12.     background-color : #f0f0f0;
    13.     font-family : tahoma, arial, verdana, helvetica, sans-serif;
    14.     font-size : 90%;
    15.     margin : 0px;
    16.     padding:0px;
    17.     text-align:center;
    18. }
    19.  
    20. #silver
    21. {
    22.     color:black;
    23.     background-color : silver;
    24.     border: 1px solid black;
    25.     width:740px;
    26.     height: 100%;
    27.  
    28.     padding:0px;
    29.     text-align:left;
    30.     margin:auto;
    31.     margin-top:0px;
    32. }
    33. #button1
    34. {
    35.     color:black;
    36.     background-color : #ffffff;
    37.     border: 1px solid black;
    38.     width:100px;
    39.     padding:0px;
    40.     position:relative;
    41.     left:0px;
    42.     top: 100px;
    43.     float:left;
    44. }
    45. #button2
    46. {
    47.     color:black;
    48.     background-color : #ffffff;
    49.     border: 1px solid black;
    50.     width:100px;
    51.     padding:0px;
    52.     position:relative;
    53.     top:100px;
    54.     float: left;
    55. }
    56.  
    57. -->
    58. </style>
    59. </head>
    60. <body>
    61. <div id="silver">
    62. <div id="button1">Button1</div>
    63. <div id="button2">Button2</div>
    64. </div>
    65. </body>
    66. </html>
    67.  
     
    #11      
  12. Whykiki

    Whykiki Komischer Typ und Köter

    Dabei seit:
    26.08.2005
    Beiträge:
    780
    Geschlecht:
    männlich
    Ort:
    Moers
    Software:
    CS3 Design Premium (registriert)
    Kameratyp:
    Nikon D70s
    CSS: Layer in Layer positionieren?
    Hey super. Genau so!!!

    Was haste denn anders gemacht?? Nur das "float:left"???

    Hmmm komisch, scheint heut nicht mein Tag zu sein....

    Danke euch!!!
     
    #12      
  13. TRex2003

    TRex2003 Hat es drauf

    Dabei seit:
    15.04.2004
    Beiträge:
    2.582
    Geschlecht:
    männlich
    Software:
    vi :P
    CSS: Layer in Layer positionieren?
    exakt das :)
     
    #13      
  14. Tim

    Tim Hutträger

    Dabei seit:
    27.08.2005
    Beiträge:
    2.884
    Geschlecht:
    männlich
    Ort:
    Fellbach
    CSS: Layer in Layer positionieren?
    Beruhigt mich ja, dass ich doch nicht so falsch lag *gg*
     
    #14      
x
×
×
teststefan