Layer (Ebene) ist im Browser nicht dort wo in DW Entwurfansicht

Prema · 26.03.2006, 12:58

Versuche einen Layer (Ebene) über einem Div container oder wie das heißt zu platzieren.
Der Vogel (layer) sollte links über der Grafik sein nicht auf dem weißen Rand! Bitte Bilder angucken.
Habe den Layer in Dw dort platziert wo ich ihn haben möchte. Im Browser ist er aber ganz woanders.

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=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../css/frieden.css" rel="stylesheet" type="text/css" />
<link href="../css/dropdownmenu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#friedenstaube {
	position:absolute;
	left:65px;
	top:25px;
	width:104px;
	height:76px;
	z-index:1;
	visibility: visible;
}
-->
</style>
</head>


<body onload="enableDropdownMenuForIE()">
<div id="container">
  <div id="divHeader">
    <div id="friedenstaube"><img src="../bilder/friedenstaube_fliegt_rechts.gif" alt="Friedenstaube" width="104" height="76" /></div>
    <a href="index.html">
<script language="JavaScript" type="text/javascript" src="../css_dropdown.js"></script>
  <img src="../bilder/header.gif" alt="Logobanner" width="760" height="82" border="0" /></a></div>
  <div id="divNavbar"> 
    <ul class="dropdown">
      <li><a href="anlass.html" accesskey="a"><u>A</u>nlass</a></li>
      <li><a href="programm.html" accesskey="p"><u>P</u>rogramm</a></li>
      <li><a href="referenten.html" accesskey="r"><u>R</u>eferenten</a>
        <ul>
          <li><a href="#">Willigis J&auml;ger</a></li>
          <li><a href="#">Paramahamsa Prajnananananda</a></li>
          <li><a href="#">Anselm Gr&uuml;n</a></li>
          <li><a href="#">Amma  </a></li>
        </ul>
      </li>
      <li><a href="ort.html" accesskey="v"><u>V</u>eranstaltungsort</a>
        <ul>
          <li><a href="#">Wegbeschreibung</a></li>
          <li><a href="#">Karte</a></li>
          <li><a href="#">Anreise</a></li>
        </ul>
      </li>
      <li><a href="kontakt.html" accesskey="k"><u>K</u>ontakt</a>
        <ul>
          <li><a href="#">Organisator</a></li>
          <li><a href="#">Webmaster</a></li>
          <li><a href="#">Information</a></li>
        </ul>
      </li>
    </ul>
	<a href="english/index.html"><img src="../bilder/english.gif" alt="in English" width="41" height="25" border="0" class="language" /></a></div>
  <div id="divContent">
    <p>Epsum factorial  </p>
    <p></p>
  </div>
  <div id="divFooter">Aktualisiert am:<br />
  Copyright &copy; 2006 Centenary Committee Europe</div>
</div>
</body>
</html>

CSS

Code:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #0033CC;
	margin: 0px;
	padding: 0px;
}

#container {
	width: 760px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#divNavbar {
	background-color: #3366CC;
	height: 2em;
}
.language {
	float: right;
}

#divContent {
	padding: 20px 5px 5px;
	margin: 0px;
	clear: both;
	line-height: 1.5em;
}
#divFooter {
	color: #FFFFFF;
	background-color: #3366CC;
	text-align: center;
	padding: 5px;
	margin: 0px;
}

Wie bekommt man die Taube dorthin wo sie in der DW Entwurfsansicht ist?
Sollte man #friedenstaube auch in die externe css Datei tun?

Wäre toll wenn jemand helfen könnte.

Norbert

chrisi10 · 26.03.2006, 22:13

Zitat:

Sollte man #friedenstaube auch in die externe css Datei tun?

würde ich wegen der Übersicht halber machen.

Zitat:

Wie bekommt man die Taube dorthin wo sie in der DW Entwurfsansicht ist?

Du gibst die Position deiner Ebene mit css an, die du jetzt noch in der html Datei hast. Wenn du in der Entwurfsansicht die Ebene herumschiebst, tragen sich die Positionswerte wieder bei den Eigenschaften unten ein. Die musst du herauslöschen. Dann werden die Positionsangaben von der css Datei verwendet. Du musst deiner Ebene natürlich #friedenstaube zuweisen.

Prema · 27.03.2006, 00:41

Das funktioniert immer noch nicht so wie es sein soll.

Manchmal ist die Taube im Browser dort wo sie sein soll. Das kommt aber darauf an wie groß das Browser Fenster ist.
Die left 150px scheinen von der linken Browserkante gemessen zu sein.
Das Layout ist aber zentriert deshalb ist die Taube mal zu weit links und mal zu weit rechts, jenachdem wie groß das Browserfenster ist.

Wie macht man denn, daß sich die Positionsabmessungen an den (zentrierten) Div container richten, in dem der restliche Inhalt der Seite ist?
Hab das mal mit "relative" versucht. Dann ist die Taube auch 150px von der Div containerkante aber der Divcontainer (die blaue Grafik) rutscht dann nach unten, so daß oben ein weißer Rand entsteht in dem die Taube flattert.

Das sieht nun so aus (siehe auch Bild):
Steht nun so in der externen css:

#friedenstaube {
position:relative;
width:104px;
height:76px;
z-index:1;
visibility: visible;
left: 150px;
top: 1px;
}

Grüsse
norbert

MichaelM · 27.03.2006, 00:54

hallo, ich gehe mal davon aus, dass Du dem DIV folgende Eigenschaft zuweisen mußt.

#friedenstaube {
position:relative;
width:104px;
height:76px;
z-index:100;
visibility: visible;
float: left;
}

Prema · 27.03.2006, 09:26

Hallo Michael!

z-index 100 hat keine Veränderung gebracht
float left auch nicht
relative läßt die Taube über der blauen Grafik erscheinen, bzw. läßt die blaue Grafik herunterrutschen

Aber: Wenn ich
left: 150px;
top: 1px;
wegmache, dann ist die die Taube am linken Rand in der Grafik (siehe Bild)
so:

#friedenstaube {
width:104px;
z-index:1;
visibility: visible;
height: 76px;
position: absolute;

Da könnte ich fast mit leben.
Das hier ist aber auch eine grundsätzliche Frage wie man Layer auf einem div Tag platziert. Beim nächsten Layer werde ich die gleichen Probleme haben, wenn ich nicht weiß wie man es macht:
Einen Layer auf einem zentrierten Div Tag zu platzieren.
Also mit der obigen Einstellung ist er ja schon auf der blauen Grafik. Möchte ihn aber gerne 50px weiter nach rechts haben. Wenn ich das angebe (mit "absolut"), dann wird er 50px vom linken Browserrand platziert. Wenn ich "relative" wähle, dann wird der Layer zwar 50px von dem zentrieten Div Tag plaziert, wie ich es ja auch haben will, aber über der Grafik, nicht auf der Grafik.

Grüße
norbert

chrisi10 · 27.03.2006, 11:02

Probier mal das:

Code:

#friedenstaube {
	margin-left: -333px;
	left: 50%;
	position: relative;
	height: 76px;
	width: 104px;
	margin-top: 0px;
}

Mit left: 50%; gibst du an, dass die Ebene in der Mitte zentriert ist.
Mit margin-left: -333px; gibst du an, dass die Ebene von der Mitte aus 333 Pixel nach links verschoben wird. Das heißt du musst noch die 333 ändern und den Wert für margin-top:. Das müsste dann passen.

Hinweis: Es könnte sein, dass man einen Container hat, der in der Breite einen Prozentwert hat. Da gibt man dann bei margin-left: auch einen Prozentwert an und somit wandert die Ebene mit, wenn sich in der Breite etwas ändert.

Prema · 27.03.2006, 11:45

Chris: habe ich ausprobiert.
"relative" macht aber immer, daß die Taube über der Grafik fliegt, nicht auf. "Margin 0", oder auch "Top 0" helfen da nichts.
Deshalb habe ich absolut gewählt. Dann funktioniert es perfekt. Aber dann braucht man nicht das mit 50% und left -333px weil man das dann einfacher so schreiben kann:

#friedenstaube {
width:104px;
z-index:1;
visibility: visible;
height: 76px;
position: absolute;
margin: 0px 0px 0px 50px;
}

Da kommt dann das gleiche bei heraus.

Wozu denn die Möglichkeit der Positionierung (top, left usw.), wenn man das ohnehin mit "margin" einstellt?
Dann kann man den Layer ja gar nicht herumschieben ohne dass es falsch im Browser angezeigt wird (das macht die Funktion des Verschiebens mit der Maus ja überflüssig und unsinnig).
Funktioniert, ja, aber verstanden habe ich es nicht.

Danke an alle, die geholfen haben.

norbert

Torsten · 27.03.2006, 13:13

Hallo Norbert,

zuerst möchte ich einmal sagen das die Layer in Dreamweaver nichts weiter sind als CSSbasierende DIV-Container.

Die Möglichkeit in der Layoutansicht von Dreamweaver Layer aufzuziehen und an eine bestimmte Position zu verschieben ist wohl nur eine Antwort von Macromedia auf die Konkurenz (Frontpage, NetObjects).

Der Code den Dreamweaver erzeugt wenn man in der Layoutansicht einen Layer aufzieht, der soll weitestgehend in allen gängigen Browsern funktionieren. Tut er auch wenn man seine gesamte Seite so erstellt.

D.h. wenn man seine komplette Seite Absolut positioniert und die Layer sich eben nicht dynamisch an die Browserfenstergröße anpassen.
Wenn man also z.B. ein Layout aufbaut bei dem die Elemte nicht mittig zentriert sein sollen.

Hier mal ein Bsp:

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=iso-8859-1" />
<title>Absolut Positioniert</title>
<style type="text/css">
<!--
#Layer1 {
    position:absolute;
    left:50px;
    top:25px;
    width:550px;
    height:80px;
    z-index:1;
    background-color: #00FFFF;
}
#Layer2 {
    position:absolute;
    left:50px;
    top:120px;
    width:280px;
    height:230px;
    z-index:2;
    background-color: #FFFF00;
}
#Layer3 {
    position:absolute;
    left:340px;
    top:120px;
    width:260px;
    height:300px;
    z-index:3;
    background-color: #0000FF;
}
#Layer4 {
    position:absolute;
    left:50px;
    top:360px;
    width:280px;
    height:60px;
    z-index:4;
    background-color: #00FF00;
}
-->
</style>
</head>

<body>
<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>
<div id="Layer4"></div>
</body>
</html>

Wenn man nun aber die CSS-Anweisungen selbst schreibt, dann machen die ganzen Dreamweaver Codes nur noch wenig Sinn.

Ich hatte das schoneinmal in einem Treat erklärt wie man da am besten vorgeht, moment mal suchen gehen

Hier ist der Link:
http://www.traum-projekt.com/forum/2...?highlight=css

LG, Torsten

Prema · 28.03.2006, 12:46

Hab das ja so gemacht wie in Deinem früheren Thema. Hatte das früher schon mal gelesen. Außer die Taube, so ist alles mit Div Tags gemacht. Habe aber erst die Div Tags eingefügt und dann die Css Formatierung gemacht - alles in DW.

Viele Grüße
norbert

Layer (Ebene) ist im Browser nicht dort wo in DW Entwurfansicht

Funktioniert! aber...