Wie positioniere ich wrapper oben (dreamweaver)?

dane7 · 05.07.2013

Hallo,
nun meine nächste Frage: egal, ob ich den wrapper mit margin top oder positionierung oder ohne oder beides festlege – immer sitzt er in der Entwurfsansicht etwas tiefer, im browser weiter oben. Woran liegt das??

HTML:

<body id="body">
<div id="wrapper">
  <div id="logo"></div>
  <div id="blume"></div>
</div>
</body>

Code:

#wrapper {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	line-height: 18px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	top: 12px;

Myhar · 05.07.2013

AW: Wie positioniere ich wrapper oben (dreamweaver)?

Das liegt daran, dass man nie die Entwurfsansicht von DW verwendet. Der hat seine eigene Engine, welche kaum etwas mit einem Standard zu tun hat. Und nachdem keiner mit DW surft ist es auch nicht sinnvoll, eine Seite für DW zu optimieren.
In neueren DW Versionen soll das Verhalten zwar besser sein, da soll ja webkit zum Einsatz kommen. Da weiß ich aber nicht, ob das auch zu 100% der Fall ist.

dane7 · 05.07.2013

AW: Wie positioniere ich wrapper oben (dreamweaver)?

Danke, schon klar. Frage richtig gestellt: kann man einen wrapper auf der y-achse verschieben? Haut bei mir nicht hin.

leveler · 05.07.2013

AW: Wie positioniere ich wrapper oben (dreamweaver)?

#wrapper {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
line-height: 18px;
width: 1024px;
margin-right: auto;
margin-left: auto;
top: 12px;

Ich meine: wenn Du nur "top angibst", fehlt noch die dazugehörige Auszeichnung ob entweder "position: absolute;" oder "position: relative;"

Schonmal "margin-top: xyz;" oder "padding-top: xyz;" ausprobiert?

°°°°°°°°°° edit:

immer sitzt er in der Entwurfsansicht etwas tiefer, im browser weiter oben.

Was in der Entwurfsansicht passiert sei mal dahingestellt, möglicherweise solltest Du Deinem Styleshett auch ein css-reset voranstellen, um etwaige browsereigene Interpretationen "auszunullen".

dane7 · 05.07.2013

AW: Wie positioniere ich wrapper oben (dreamweaver)?

Super, DANKE !!!
Die position war tatsächlich das entscheidende, "relative" ist für meinen Zweck das Richtige, damit es in der Mitte bleibt.
Nur mit "margin" oder "padding" ging´s nämlich auch nicht.
Freue mich, wieder was dazu gelernt zu haben!
(bin absolute Anfängerin in diesem Bereich)

_schatzi_ · 05.07.2013

AW: Wie positioniere ich wrapper oben (dreamweaver)?

Hallo!

Schmeiß das "position" am besten wieder raus und löse es via "margin".
Das funktioniert sehr wohl!

Siehe hier: http://jsfiddle.net/G4uLC/1/

patrick_l · 06.07.2013

AW: Wie positioniere ich wrapper oben (dreamweaver)?

HTML:

<div id="wrapper">
    <!-- Content -->
</div>

Code:

/* Div mittig ausrichten */
#wrapper {width:960px; margin:0 auto;}

/* Div mittig ausrichten sowie Abstand oben/unten */
#wrapper {width:960px; margin:20px auto;}

Deinem Wrapper eine Breitenangabe geben und einfach mit einem margin »0 auto« mittig ausrichten. Wenn der Wrapper nicht direkt am oben dran »kleben« soll, auch wieder mit margin arbeiten.

Zur Dreamweaver Engine hat Myhar bereits was gesagt. Testen solltest du deine Webseite (Website) immer in einem Browser und nicht in der Entwurfsansicht. Auch ein CSS Reset sollte gemacht werden, um alle Browser auf einen Nenner zu bringen.

Das geht z.B. schnell und einfach mit dem Universal-Selektor (Sternchen). Damit werden alle Elemente angesprochen. Dabei sollte aber auch berücksichtigt werden, das »zurückgesetzte« Werte neu für »alle« Elemente vergeben werden müssen.

Code:

/* Simples CSS-Reset */
* {padding:0; margin:0; border:none; outline:none; font-size:100%;}
html, body {min-width:100%; min-height:100%;}

Liebe Grüße, Patrick

dane7 · 08.07.2013

AW: Wie positioniere ich wrapper oben (dreamweaver)?

<3lichen Dank – klappt nun alles super !!!