Ankündigung

Einklappen
Keine Ankündigung bisher.

Layer exakt positionieren?

Einklappen

Neue Werbung 2019

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

  • Layer exakt positionieren?

    Servus ich hab ein kleines Problem mit dem Positionieren von einem Layer im Layer, bzw zeigt mir bekannterweise Dreamweaver wieder genau das an was ich will , der Browser sagt aber so will ich nicht.

    So sollte es sein:


    Allerdings zeigt Firefox mir den Schmarrn an :



    Nun ist mir ja bekannt das die Preview von Dreamweaver nicht immer dem entspricht was tatsächlich bei rumkommt. Aber was mach ich denn falsch mit "margins" wenn ich um position-absolute rumkommen will? oder ist allein das verweigern schon falsch?

    hier der Vollständigkeit halber mal die layout.css :

    Code:
    /* CSS Document */
    
    #container
    {
    	width:750px;
    	height:500px;
    	background-color:#CCC;
    	margin:0px auto;
    	
    }
    
    #header
    {
    	width:750px;
    	height:150px;
    	background-color:#000;
    	margin:0px auto;
    }
    
    #menubar
    {
    	width:500px;
    	height:30px;
    	margin-left:240px;
    	margin-top:110px;
    	background-color:#06F;
    }
    
    #content
    {
    	width:500px;
    	height:350px;
    	float:left;
    }
    
    #latest
    {
    	width:250px;
    	height:350px;
    	float:left;
    }
    wenns am container liegt (der eigentlich quatsch ist) fress ich nen besen

    wüsste da ganz gern rat wie man layer dementsprechend positionieren kann, weil ich im hinterkopf noch einen hab den ich unter einem link per js ein und ausblenden lassen kann/will/muss

  • #2
    Gibt es auch ein Live-Beispiel, bei dem der HTML-Code auch dabei ist?
    Refining Linux: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

    Kommentar


    • #3
      Ohne Code echt schwer

      margin-left kannst du dir sparen. Nimm stattdessen " float:right;"

      Hier ein Beispiel: Nich getestet, sollte aber klappen...
      PHP-Code:
      <body>
      <
      div id="header" style="width:400px; height:200px; background-color:#F90">
          <
      div id="menubar" style="margin-top:100px; width:200px; height:25px; float:right; background-color:#F00";></div>
      </
      div><!-- e o header -->
      </
      body

      Kommentar


      • #4
        oh, sry ging davon aus das die bilder aussagekräftig wären.

        der html code sähe so aus
        Code:
        <body>
        <div id="container">
        	<div id="header">
        	  <div id="menubar">navigationbar goes here</div>
          </div>
          <div id="content">text goes here</div>
          <div id="latest">news goes here</div>
        </div>
        </body>
        wobei der Hinweis margin-left mit float:right zu ersetzen der springende Punkt war.
        Nun sitzt der Layer dort wo ich ihn haben wollte und nicht mehr oben am Rand.

        Vielen Dank

        Kommentar


        • #5
          So ein Mist, nun hab ich schon wieder ein "position" Problem, der Loginlayer sitzt zwar genau dort wo er eigentlich stehen soll (evtl 20px höher), nun verschiebt sich aber der contentlayer und der latestnewslayer nach unten. Hab mit z-index versucht den login als obersten zu beschreiben, so das er quasi "schwebt" bringt aber rein gar nichts.

          Hat jemand ne Ahnung was ich wieder mal falsch mache?

          Quellcode HTML:
          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Untitled Document</title>
          <link href="layout.css" rel="stylesheet" type="text/css" />
          </head>
          
          <body>
          <div id="container">
          	<div id="header">
          	  <div id="menubar">navigationbar goes here</div>
            </div><div id="login">login</div>
            <div id="content">text goes here</div>
            <div id="latest">news goes here</div>
            
          </div>
          </body>
          </html>
          und die dazugehörige CSS:

          Code:
          @charset "utf-8";
          /* CSS Document */
          
          #container
          {
          	width:750px;
          	height:500px;
          	background-color:#CCC;
          	margin:0px auto;
          	
          }
          
          #header
          {
          	width:750px;
          	height:150px;
          	background-image:url(header.gif);
          	margin:0px auto;
          }
          
          #menubar
          {
          	width:500px;
          	margin-top:110px;
          	background-color:#06F;
          	float:right;
          }
          
          #content
          {
          	z-index:1;
          	width:500px;
          	height:350px;
          	float:left;
          }
          
          #latest
          {
          	width:248px;
          	height:350px;
          	float:left;
          	border:#F00 1px solid;
          	
          }
          
          #login{
          	height:80px;
          	width:200px;
          	background-color:#960;
          	margin-left:250px;
          	z-index:2;
          	
          }

          Kommentar


          • #6
            Zitat von Colophoniaz Beitrag anzeigen
            So ein Mist, nun hab ich schon wieder ein "position" Problem, der Loginlayer sitzt zwar genau dort wo er eigentlich stehen soll (evtl 20px höher), nun verschiebt sich aber der contentlayer und der latestnewslayer nach unten.
            Natürlich tun sie das, schliesslich befindet sich #login im normalen flow.

            Hab mit z-index versucht den login als obersten zu beschreiben, so das er quasi "schwebt" bringt aber rein gar nichts.
            Natürlich nicht - z-index hat nur bei Elementen, deren Positionierung von static abweicht, überhaupt einen Effekt. Aber um die Schichtung auf z-Ebene geht es bei deinem Problemchen ja auch gar nicht in erster Linie.

            Hat jemand ne Ahnung was ich wieder mal falsch mache?
            Deine Kenntnisse, was CSS angeht, scheinen noch sehr rudimentär zu sein.


            Dein Problemchen könntest du bspw. lösen, in dem du #login per absoluter Positionierung aus dem Fluss nimmst, oder auch mit einem negativen margin-top für die nachfolgenden Elemente. (Da sei dazu gesagt, dass absolute Positionierung nicht das „Allheitmittel“ von CSS darstellt - auch hierbei kann es wieder zu anderen Nebeneffekten kommen. Also bitte erst mal ein bisschen mehr Grundlagenwissen zur Thematik aneignen.)
            [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

            Kommentar

            Lädt...
            X