Zur Navigation

Hintergrund mit ebene zentrieren

1 KOHwalsky

hallo leute,

auch auf die gefahr hin, dass euch das thema aus dem hals kommt, habe ich als anfänger was homepagegestaltung angeht eine frage:

ich habe mit photoshop eine grafik erstellt, die ich gerne als hintergrund für meine homepage nehmen möchte (breite 1010, höhe 1200 pixel). ich würde diese grafik nun gerne in eine ebene packen, die abhängig von der auflösung des betrachter-pcs, stets in der mitte des browsers ausgerichtet ist. darüber würde ich dann gerne eine oder mehrere ebenen erstellen, die die inhalte (texte, grafiken, usw.) enthalten.

somit:

1. wie kann ich ebenen in dreamweaver zentrieren?
2. wie kann ich die darüberliegenden Ebenen mit den Inhalten an dieser
zentrierten hintergrundebene ausrichten?

da ich mich schon fast zu tode ge"google"t habe und nur noch bahnhof verstehe, würde ich mich sehr über ein wenig hilfe von nem freuen.

ich danke euch vielmals im voraus,
KOHwalsky

20.03.2006 17:18

2 C)-(iLL@

ich habe mit photoshop eine grafik erstellt, die ich gerne als hintergrund für meine homepage nehmen möchte (breite 1010, höhe 1200 pixel).
Boah, das ist ja ein Teil :) Die Ladezeit hast Du berücksichtigt?

1. wie kann ich ebenen in dreamweaver zentrieren?
Nur für den Hintergrund brauchst Du keine Ebene, Du hast ja body - wie unlängst bereits mal genannt.

body {
   background:white url(/img/hintergrund.jpg) no-repeat center top scroll;
}
2. wie kann ich die darüberliegenden Ebenen mit den Inhalten an dieser zentrierten hintergrundebene ausrichten?

Nur mittig zentrieren und oberhalb und unterhalb keinen Abstand, mit der Style-Angabe margin:0 auto 0 auto; für das div.
Der alte IE verlangt, dass das dem div übergeordnete Element ein text-align:center; hat, damit das margin:auto funktioniert. Das kannst Du ebenfalls mit css machen.

Auf die Vorschau-Funktion des hundsteueren Dreamweaver kannst Du Dich nicht verlassen; ich persönlich empfehle Topstyle.

20.03.2006 17:49

3 KOHwalsky

hey C)-(iLL@

vielen dank für deine antwort. hast recht, das bild läßt sich nicht mal auf meinen account laden (483 KB). naja, dann muß ich halt doch mit ner 0815-page arbeiten. trotzdem vielen dank und alles gute,

kohwalsky

20.03.2006 18:04

4 KOHwalsky

stop...zurück!!!!

mein bild ist jetzt mal auf meinem account. vielleicht wollt ihr es euch mal ansehen, dann versteht man vielleicht besser, was ich vorhabe:

natürlich, wie C)-(iLL@ schon erwähnte, muß ich es noch ein bissl runterrechnen :-)

http://people.freenet.de/kohwalsky/background.jpg

ich kann das bild doch als background zentrieren und dann eine tabelle darüber angleichen, die ich ebenfalls zentriere. darin dann meine inhalte plazieren, oder?

gruß KOHwalsky

20.03.2006 18:15

5 C)-(iLL@

Rattenscharfe Grafik, in Photoshop bist Du gut drauf, Räspäkt - ich weiß, was das für eine Arbeit ist.

ich kann das bild doch als background zentrieren und dann eine tabelle darüber angleichen, die ich ebenfalls zentriere. darin dann meine inhalte plazieren, oder?
Tabellen? Dazu rate ich sicher nicht. Lieber CSS.
Wenn Du am Lernen bist, dann fang gleich an mit richtiger Strukturierung.

Das Umsetzen von Grafiken in Site-Layouts ist eine eigene Wissenschaft ;) Grundsätzlich gilt: Teile die Seite in Bereiche ein, die die Inhalte beschreiben, nicht in solche, die das Layout definieren. Eventuell musst Du die Grafik aufspalten und den einzelnen Bereichen als Hintergrund geben.

Ein CSS-Anfang wäre z.B. sowas (wenn Du die Seite mit einer fixen Höhe möchtest, wo der Inhalt scrollbar ist):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
</head>
<style type="text/css">
<!--
body { padding: 0; margin: 0; background: black; }
div#all { width: 1100px; margin: 0 auto 0 auto; border: 1px solid white; color: white; background: black url(background.jpg) no-repeat top center; height: 1200px; }
div#content { margin: 250px auto 0 auto; border: 1px solid; width: 800px; height: 850px; overflow: auto; }
h1 { margin: 10px; }
p { margin: 10px; }
-->
</style>
<body>
<div id="all">
  <div id="content">
    <h1>Dies ist meine Seite</h1>
    <p>Hallo, Ihr.</p>
  </div>
</div>
</body>
</html>

Wenn es eine variable Höhe sein soll, dann brauchst Du eine Grafik, welche sich vertikal wiederholt (background-repeat: repeat-y).

Gute Referenzen für CSS sind Selfhtml und W3 Schools.

20.03.2006 19:20

6 KOHwalsky

hey C)-(iLL@, ich könnt dich drücken,

vielen dank für deine mühe. hab deinen code mal übernommen um zu sehen, was du meinst. genau so hab ich mir das vorgestellt. super!
jetzt hab ich wenigstens mal ne vorlage, an der ich mir die gebrauchten funktionen erklären kann.

bin schon den ganzen tag am vergeblich nach infos am surfen und bekomme schon ne derbe google-allergie!!!

da du ja echt ahnung zu haben scheinst und dir so viel zeit für noobs nimmst, wollte ich dich fragen, ob ich dir eventuell bei probs mal ne email schicken kann. kann mich ja als gegenleistung mit ner benötigten grafik bedanken :-)

wie gesagt, vielen dank und bis bald,
KOHwalsky

20.03.2006 19:35

7 C)-(iLL@

Schön, dass es funktioniert.

Wenn Du Fragen zu Positionierung hast, dann stelle Sie doch hier im Forum - so haben andere mit ähnlichen Problemen auch was davon, und die Präsenz dieser Seite steigt.

20.03.2006 19:56

8 KOHwalsky (Gast)

dann mach ich mal munter weiter :-)

du hast in deinem script die beiden ebenen <div id="all"> und
<div id="content"> benannt. wenn ich es richtig vertehe, sind die bezeichnungen doch willkürlich, oder? d.h., ich hätte sie auch "1" und "2" nennen, und weitere layer mit 3,4,5...usw einfügen können.

was ich nicht so richtig blicke ist, mit welchem befehl du jetzt den browser veranlaßt, die ebenen zu zentrieren. schätze mal, dass der befehl "margin: 0 auto 0 auto" dafür zuständig ist, oder?

weiter...mit dem befehl "div#conten"t und dem dazugehörigen befehl margin: 250px auto 0 auto hast du der inneren ebene einen abstand von 250px zu der begrenzung der äußeren ebene zugeteilt.

ich hoffe mal, dass ich soweit richtig liege.
KOHwalsky

21.03.2006 08:55

9 Jörg Kruse

Hallo KOHwalsky,

du hast in deinem script die beiden ebenen <div id="all"> und
<div id="content"> benannt. wenn ich es richtig vertehe, sind die bezeichnungen doch willkürlich, oder? d.h., ich hätte sie auch "1" und "2" nennen, und weitere layer mit 3,4,5...usw einfügen können.

Im Prinzip ja - es gibt bei IDs allerdings die Einschränkung, dass diese nicht mit einer Zahl, sondern mit einem Buchstaben beginnen sollen - "l1", "l2", "l3" etc. wäre z.B. regelkonform

was ich nicht so richtig blicke ist, mit welchem befehl du jetzt den browser veranlaßt, die ebenen zu zentrieren. schätze mal, dass der befehl "margin: 0 auto 0 auto" dafür zuständig ist, oder?

margin definiert den Außenabstand des Elementes; die vier Werte geben die Außenabsttände für oben, rechts, unten, links an (Uhrzeigersinn). Der Wert "auto" für links und rechts sorgt für die Zentrierung. Bei "margin: 250px auto 0 auto" beträgt der Abstand nach oben 250px

21.03.2006 09:49 | geändert: 21.03.2006 09:50

10 KOHwalsky

alles klar, dann hab ich es jetzt. war mir nicht sicher, ob ich das richtig nachgelesen habe. was ich noch gern wissen würde ist, ob ich eine innere ebene an eine äußere ausrichten kann. dank dem code von C)-(iLL@ habe ich in meiner ebene mit der hintergrundgrafik eine weiter, in der er nen beispieltext eingefügt hat. kann ich einer dritten ebene nun anweisen, sich an der übergeordneten zu orientieren. also wenn ich die dritte ebene z.b. gern rechts oben in der ecke der inneren ebene hätte (sagen wir mal 15px).

meine überlegung ist, ob es nicht reicht, die äußerste ebene zu zentrieren und die ebenen darin fest an dieser auszurichten. so müßte es doch für jede browsereinstellung gleich sein, dass ganze aber immer entsprechend in das zentrum der seite gerückt werden, oder?

21.03.2006 10:00