Gegen Bilderklau - Das Original | Druckvorschau: Design in die Mitte Setzen

Geschrieben von Schatti am 15.04.2011 um 14:39:

Design in die Mitte Setzen

Wie geht der Code um ein Design in die mitte des bildschirms zu setzen? Bei jedem Nutze sollte sich es genau auf seinen Biildschirm in die mitte setzen.
Das hier ist mein Designcode

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:

<html>
<head>
  <title>Sarahs Code Page</title>

  <link rel="stylesheet" href="style.css" type="text/css">

</head>


<body>
<body background="designgrund.png">

<p align="left">
</p>

<div id="HG" style="position: absolute; top: 0px; left: 0px;"><img src="design6a2i5yvgeo.png" border="0" height="768" width="1024"></img></div>

<div id="Frame" style="position: absolute; top: 226px; left: 124px;"><iframe src="main.html" name="main.html" frameborder="0" height="462" scrolling="auto" width="605"></iframe></div>

<div id="Frame" style="position: absolute; top: 52px; left: 846px;"><iframe name="menue.html" border="0" src="menue.html" frameborder="0" height="367" scrolling="auto" width="175"></iframe>
</div>

</body>
</html>

Geschrieben von Kimi. am 15.04.2011 um 17:45:

code:
1:	<center> DESIGNCODE </center>

Geschrieben von Schatti am 15.04.2011 um 18:42:

Geht nicht.

Geschrieben von dreamer95 am 15.04.2011 um 20:07:

<div id="HG" style="position: absolute; top: 0px; left: 0px;"><img src="design6a2i5yvgeo.png" border="0" height="768" width="1024"></img></div>

damit kannst du's weiter in die mitte schieben, aber ob das dann bei jedem zentriert aussieht glaube ich nicht :/

Geschrieben von Schatti am 15.04.2011 um 20:40:

Die Art kenne ich aber das bringt mir nichts. Ich suche den richtigen Code dafür.

Geschrieben von Gleykur am 17.04.2011 um 00:56:

RE: Design in die Mitte Setzen

Zitat:

Geschrieben von Schatti am 17.04.2011 um 12:58:

Ah okey.
Vieln dank, hat geklappt fröhlich

Geschrieben von Schatti am 07.05.2011 um 15:48:

Was muss ich mit dem Menü und mit dem Main machen?
Das steht immer noch da wo es vorher war und nicht genau in der mitte?

Geschrieben von Kullakeeeks am 07.05.2011 um 16:13:

Ich vermute mal das gleiche.. smile

Müsstest doch dann eigentlich nur die Zahlen bei "left" gegeneinander aufrechnen, oder?
Ich würds mal so probieren...

Geschrieben von Schatti am 07.05.2011 um 16:17:

Wie meinst das mit dem rechnen?

Geschrieben von Kullakeeeks am 07.05.2011 um 16:37:

In Gleykurs Beitrag steht das:

margin-left:-512px;

und bei dir das:

left: 124px

beim Main...
Wenn du die gegeneinander aufrechnest, müsstest du doch dann auf -388 kommen, also müsstest du beim Main eigentlich

left: -388px oder auch left: 388px

schreiben.
Allerdings weiß ich nicht, ob das so geht, müsstest du dann mal probieren...

LG

Geschrieben von Oli am 08.05.2011 um 16:13:

Hi,

Zitat:

left: -388px oder auch left: 388px

mit margin-left sollte es passen.

@Schattenpfote: Stell dir folgendes vor:

Du positionierst dein komplettes DIV auf halber Browserbreite, left: 50%.

Jetzt befindet sich der linke Rand deines DIV genau in der Browsermitte:

code:
1: 2: 3: 4: 5:	********************* * XXXXXXX * * XXXXXXX * ********************* (* Browser, X DIV)

Um nun zu erreichen, dass die Mitte des DIV in der Mitte des Browsers steht, verschiebt man es um seine halbe Größe zurück nach Links, margin-left: - halbeDivBreite.

Nun steht bei dir noch

code:
1:	style="position: absolute; top: 226px; left: 124px;"

Du gibst also an, dass das DIV 124px vom linken Rand weg sein soll.
Wenn du nun also möchtest, dass das DIV 124px weiter Rechts ist, ziehst du es einfach weniger nach links, margin-left: - (halbeDivBreite - 124).

Alles klar? Augenzwinkern