Layer exakt positionieren?

Colophoniaz · 16.04.2010, 02:32

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

Manko10 · 16.04.2010, 12:03

Gibt es auch ein Live-Beispiel, bei dem der HTML-Code auch dabei ist?

halskrause · 16.04.2010, 17:53

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>

Colophoniaz · 17.04.2010, 03:00

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

Colophoniaz · 19.04.2010, 01:45

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;
	
}

ChrisB · 19.04.2010, 01:56

Zitat:

Zitat von Colophoniaz

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.

Zitat:

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.

Zitat:

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.)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Layer Code überall außer auf bestimmen Seiten	blacky123	PHP Tipps 2010	1	30.01.2010 18:04
[Erledigt] Link hinter div layer nicht anklickbar (Firefox)		HTML, Usability und Barrierefreiheit	3	26.11.2009 17:12
[Erledigt] Layer richtig positionieren	sagato0816	JavaScript, Ajax und mehr	22	21.10.2009 19:28
URL über Textfeld im Layer öffnen	vollmilch	JavaScript, Ajax und mehr	2	20.07.2009 11:49
layer - besuchertausch	benji889	Off-Topic Diskussionen	10	16.06.2009 19:33
Java Script - Layer runterfahren lassen	Curcio	JavaScript, Ajax und mehr	5	13.04.2009 20:45
Inhalte / Layer zeitgesteuert dynamisch ändern	goodieboy	PHP Tipps 2008	7	10.11.2008 15:28
Layer auf Bild	Rotti	HTML, Usability und Barrierefreiheit	6	25.12.2005 10:14
Training von neuronalen Netzen		PHP Tipps 2005	5	28.09.2005 15:12
Layer am Ende einer Seite platzieren	php1	HTML, Usability und Barrierefreiheit	2	21.03.2005 22:44
Text in Layer	Stümper	HTML, Usability und Barrierefreiheit	16	23.02.2005 05:26
Layer mittels PHP steuern		PHP Tipps 2004	1	30.08.2004 09:27
Tabelle positionieren	Anuschka	HTML, Usability und Barrierefreiheit	3	19.08.2004 03:35
Layer zentrieren	rocco	HTML, Usability und Barrierefreiheit	12	02.08.2004 17:25
Div Layer erst nach 2 Sekunden öffnen		HTML, Usability und Barrierefreiheit	1	22.07.2004 18:22

16.04.2010, 02:32
Colophoniaz Benutzer Registriert seit: 25.03.2010 Beiträge: 38 PHP-Kenntnisse: Anfänger	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


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.04.2010, 12:03
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Gibt es auch ein Live-Beispiel, bei dem der HTML-Code auch dabei ist? __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

16.04.2010, 17:53
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	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>`

17.04.2010, 03:00
Colophoniaz Benutzer Registriert seit: 25.03.2010 Beiträge: 38 PHP-Kenntnisse: Anfänger	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