CSS Layer-Problem

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS Layer-Problem

    Hi Junx und Mädelz,

    ich habe folgendes Problem:

    ich habe 2 Layer die nebeneinander stehen, und ich möchte gerne, dass der layer der rechts steht genau so hoch ist wie der layer der links steht.
    Ich habe den Layer dann mal 100% Höhe gegeben, aber dann geht er logischerweise über die ganze Seite (siehe Anhang)

    So, hier der Quelltext
    Code:
    <div id="main">
    	<div id="content">
    		content
    	</div>
    	<div id="boxleft">
    	</div>
    	<div id="footer">
    		footer
    	</div>
    	<div id="copyright">
    		copyright
    	</div>
    </div>
    Styles:
    Code:
    #main {
    	position: absolute;
    	width: 764px;
    	left: 50%;
    	margin-left: -382px;
    	height: 100%;
    }
    
    #content {
    	position: relative;
    	float: left;
    	width: 553px;
    	padding: 15px;
    	background-color: #EFF5FA;
    	margin-top: 1px;
    }
    
    #boxleft {
    	position: relative;
    	float: right;
    	width: 170px;
    	padding: 5px;
    	background-color: #6699CC;
    	margin-top: 1px;
    	height: 100%;
    }
    
    #footer {
    	position: relative;
    	border-top: 1px #FFFFFF solid;
    	float: left;
    	width: 573px;
    	padding: 5px;
    	background-color: #D4D7D9;
    	font-size: 9px;
    	color: #333333;
    }
    
    #copyright {
    	position: relative;
    	border-top: 1px #FFFFFF solid;
    	float: right;
    	width: 170px;
    	padding: 5px;
    	background-color: #AAAEB1;
    	font-size: 9px;
    	color: #333333;
    }
    Hat jemand einen Vorschlag wie ich das umsetzen könnte?

    thx
    Angehängte Dateien
    die hummel ist ein sinnloses tier ohne zukunft!

  • #2
    gib doch die höhe nicht als 100% sondern als z.b. 200 px an
    INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


    Kommentar


    • #3
      Original geschrieben von Abraxax
      gib doch die höhe nicht als 100% sondern als z.b. 200 px an
      Die Höhe des linken Layers ist aber variabel und der rechte Layer sollte sich wenn möglich der Höhe anpassen.
      die hummel ist ein sinnloses tier ohne zukunft!

      Kommentar


      • #4
        dann schachtel die divs einfach
        INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


        Kommentar


        • #5
          ok, ich werds nochmal versuchen.

          thx fürs erste...
          die hummel ist ein sinnloses tier ohne zukunft!

          Kommentar


          • #6
            Hi, ich habe genau dasselbe Problem .. ich habe auch zwei Layer, die immer dieselbe Höhe haben sollen, wobei der Layer "content" eben eine variable Höhe haben soll, und der Layer "boxright" sich daran ausrichtet.

            Code:
            #rahmen {
            width:800px;
            padding:5px;
            position: absolute;
            margin-left:-400px;
            left:50%;
            border: 1px solid black;
            }
            
            #content {
            float:left;
            width: 550px;
            padding: 5px;
            border: 1px solid black;
            }
            
            #boxright {
            float:right;
            width: 150px;
            padding: 5px;
            background-color: #6699CC;
            height: 100%;
            border: 1px solid black;
            }
            ------------------------------
            <div id="rahmen">
            
            <div id="content">
            content
            </div>
            
            <div id="boxright">
            test
            </div>
            
            </div>
            Ich habe auch schon einige Verschachtelungen versucht, jedoch hat nichts zum Erfolg geführt. Als Beispiel habe ich mal einen Layer "rahmen" um die beiden Layer herum gelegt, und mir erhofft, dass sich "boxright" dann mit seiner height:100% daran ausrichtet. Aber auch das passiert nur, wenn ich "rahmen" schon einen festen Wert vorgebe ... was ich ja nicht machen will ...
            [color=red]Geht nicht[/color] ist keine Fehlermeldung

            Kommentar


            • #7
              *das erste und letzte mal hochschubs*

              Findest sich nun vielleicht ein weiser CSS-Crack, der mir helfen kann ... habe gestern nochmals zwei Stunden damit verbracht, zu versuchen die beiden doofen Layer auf dieselbe Höhe (aber eben variabel immer die des grösseren Layers) zu bekommen, aber ich bekomms einfach nicht hin .. egal wie ich schachtele.
              Mit Tabellen ist das ganze natürlich kein Problem, aber ich möchte auf Tabellen bei meinem Design komplett verzichten.
              [color=red]Geht nicht[/color] ist keine Fehlermeldung

              Kommentar


              • #8
                ich glaube ich habs, du musst doch die ebenen verschachteln:
                PHP-Code:
                #rahmen {
                width:800px;
                padding:5px;
                positionabsolute;
                margin-left:-400px;
                left:50%;
                border1px solid black;
                }
                #content {
                float:left;
                width700px;
                padding5px;
                border1px solid black;
                height100%;
                }

                #boxright {
                width150px;
                padding5px;
                background-color#6699CC;
                border1px solid black;
                positionabsolute;
                left550px;
                top10px;
                height100%;

                --------------------------------------------------------------------------
                und dann folgendes:
                PHP-Code:
                <div id="rahmen">
                <
                div id="content">
                          
                content <br><br>
                          
                sdgf dsjgö<br><br>
                          
                dsgfdsjg dsjgölds  <br><br>
                          
                gdsjölgjdsdglöjds <br><br>
                          <
                div id="boxright">
                               
                test
                          
                </div>
                     </
                div>
                </
                div
                musst das dann noch verfeinern, ich denke aber, dass es das ist was du willst.

                gruss
                peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  Das klappt ja wunderbar!!

                  ein riesen dankeschön von mir
                  die hummel ist ein sinnloses tier ohne zukunft!

                  Kommentar


                  • #10
                    Hm ... also der IE passt die Höhe zwar an, aber Opera spielt schonmal nicht mit ... also bin ich in Sachen Mozilla etc. auch etwas skeptisch .... hab hier auf der Arbeit leider Mozilla nicht greifbar ... muss ich mit dem Testen noch ein bisschen warten.


                    edit:
                    bei dispositor klappt es .. entweder er hat nur IE, oder ich hab doch noch nen Fehler drin ..
                    [color=red]Geht nicht[/color] ist keine Fehlermeldung

                    Kommentar


                    • #11
                      nee mozilla is nich, da habe ich leider keine lösung gefunden, die verwendung von padding ist sowieso nicht zu empfehlen, da der IE das falsch interpretiert.

                      gruss
                      peter
                      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                      Meine Seite

                      Kommentar


                      • #12
                        also bei firefox klappts so:

                        Code:
                        #rahmen {
                        	width:400px;
                        	padding:0px;
                        	position: absolute;
                        	margin-left:-200px;
                        	left:50%;
                        	border: none;
                        }
                        
                        #content {
                        	background-color: #CCCCCC;
                        	float:left;
                        	width: 100%;
                        	border: none;
                        	height: 100%;
                        }
                        
                        #boxright {
                        	width: 150px;
                        	background-color: #6699CC;
                        	border: none;
                        	position: absolute;
                        	left: 250px;
                        	top: 0px;
                        	height: 100%;
                        }
                        
                        .box {
                        	padding: 5px;
                        }
                        
                        <div id="rahmen">
                        	<div id="content">
                        		<div class="box">
                        			content<br><br>
                        			sdgf dsjgö<br><br>
                        			dsgfdsjg dsjgölds <br><br>
                        			gdsjölgjdsdglöjds<br><br>
                        			gdsjölgjdsdglöjds<br><br>
                        			gdsjölgjdsdglöjds<br><br>
                        			gdsjölgjdsdglöjds
                        		</div>
                        
                        		<div id="boxright">
                        			<div class="box">
                        				test
                        			</div>
                        		</div>
                        	</div>
                        </div>
                        die hummel ist ein sinnloses tier ohne zukunft!

                        Kommentar


                        • #13
                          hm .. da hier Opera noch mehr rumspinnt (ja, ich steh auf opera), werde ich wohl doch auf Tabellen umsteigen .. schade eigentlich
                          [color=red]Geht nicht[/color] ist keine Fehlermeldung

                          Kommentar


                          • #14
                            hat das mal einer mit mozilla über version 1.2 getestet. mehr habe ich hier auf der firma im moment nicht.

                            gruss
                            peter
                            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                            Meine Seite

                            Kommentar


                            • #15
                              Original geschrieben von dispositor
                              Code:
                              <div id="rahmen">
                              	<div id="content">
                              		<div class="box">
                              			content<br><br>
                                                      ...
                              		</div>
                              
                              		<div id="boxright">
                              			<div class="box">
                              				test
                              			</div>
                              		</div>
                              	</div>
                              </div>
                              bevor ihr HTML dermaßen vergewaltigt, bleibt doch lieber bei einer schlichten, einfachen tabelle.
                              dieses beispiel hat mit semantisch sinnvoller auszeichnung des inhaltes ja nun wirklich nichts mehr zu tun.

                              wer sowas einsetzt, nur um dann sagen zu können, "mein layout ist ohne tabellen, und deins nicht, *ätsch*" - der hat den sinn von HTML wahrscheinlich noch viel weniger verstanden, als der jenige, der dafür einfach eine tabelle genommen hat.
                              I don't believe in rebirth. Actually, I never did in my whole lives.

                              Kommentar

                              Lädt...
                              X