DIV positionieren

wal3d · 17. Oktober 2006

Hi,

vielleicht kann mir ja jemand helfen und mir einen Tipp geben wie ich hierbei am besten vorgehe:

Ich habe eine neue Webseite erstellt. Der Hintergrund besteht aus einem Bild, das ich der Größe wegen "zernippselt" habe und die einzelnen Bilder habe ich in einer Tabelle wieder zusammengebaut. Nun habe ich in dem Bild auch Platz für ein Menü und Bilder gelassen, die ich mittels dem DIV-Befehl darüber setzen wollte - und ja das klappt auch soweit gut!

Also ich habe bei DIV dann position auf absolute gesetzt und top und left gesetzt und damit das Bild positioniert. Nur leider musste ich feststellen, das wenn ich nun das Browserfenster größer oder kleiner ziehe, natürlich die Abstände von top und left sich ändern ... grrrr.

Wie kann ich nun das Problem der Positionierung mittels DIV umgehen, damit die Bilder und das Menü IMMER an der selben Stelle stehen bleiben, egal wie groß oder klein ich das Browserfenster ziehe?

Muss ich hier mit Frames Arbeiten und die Tabelle (also das Hintergrundbild) in den mittleren Frame setzen?
Oder gibt es eine Methode dem DIV Tag einen Wert zu geben der dann immer gleich ist?

Vielen Dank schon mal für eure Hilfen ...

Viele Grüße
Wolfgang

Naoo · 17. Oktober 2006

Hi wal

Nein, kein Frame! Ich würde statt dessen ein Master-Div (Wraper) erstellen, der alles weitere (also das was Du schon hast) erfasst und diesen selbst beispielsweise zentriert setzen. War das verständlich?

ciao
Naoo

Zuzler · 17. Oktober 2006

Mach einfach einen Container, der alles andere umschließt.

Code

<div style='margin: 1em auto;'>
<!-- hier kommt dein content rein -->
</div>

Dann ist die Seite zentriert.

Weiterführende Literatur zum Thema CSS, frameless Design & Boxmodell: KLICK MICH

Mfg, Zuzler

wal3d · 17. Oktober 2006

Hi Naoo, hi Zuzler,

ich denke mal ihr beide meint das selbe - gehe ich richtig dieser Annahme?
Also müsste ich ein übergeordnetes DIV erstellen ... würde dies dann direkt nach dem BODY-Tag kommen und somit die gesamte Seite einschliessen? Aber dann habe ich doch immer noch das Problem, das das andere DIV seine Positionswerte anhand der Browsergröße berechnet oder liege ich da falsch?

Viele Grüße
Wolfgang

Naoo · 18. Oktober 2006

Hi wal

1. Ja.
2. Nein.
Sollte so klappen, aber ich denke Zuzler kennt sich damit besser aus als ich.

ciao
Naoo

wal3d · 18. Oktober 2006

Hi Naoo,

vielen Dank für die Antworten.

Wenn ich mir allerdings das "2. Nein" anschaue ... hmmm ... gehört dies zu meiner Frage ob es direkt nach dem <BODY> - Tag kommen soll oder gehört es alös Antwort zu meiner letzten Frage, ob es dann korrekt die Abstände berechnet? Kann's nicht so ganz zuordnen ...

Leider sitze ich auch gerade nicht an meinem Rechner und kann es erst heute Abend ausprobieren ...

Aber mal sehen ... aber erstmal danke!

Viele Grüße
Wolfgang

Naoo · 18. Oktober 2006

Hi wal

Ups -- ich meinte mit 2. die 3. Frage.

und 2. Ja

ciao
Naoo

wal3d · 18. Oktober 2006

Hi Naoo,

danke für die Info. So, habe es jetzt mal ausprobiert ... grrr hilft nichts. ich muss wohl irgendetwas falsch machen. Ich habe jetzt mal zwei Screenshots gemacht. Das mit dem grünen Haken ist positioniert und das mit dem gelben File ist dann passiert, wenn ich die Größe vom Browserfenster verändere. Ich habe wie ihr gesagt habt, ein weiteres DIV direkt im Body-Tag eingebaut.

Der Hintergrund ist eine Tabelle mit Bildern drinnen.

Was müsste ich noch machen? Habt ihr noch weitere Ideen?

Bin schon am verzweifeln ...

Viele Grüße
Wolfgang

wal3d · 18. Oktober 2006

Ach ja ...

und hier mal der Auszug aus den CSS und HTML Seiten

Css:

Code

...#zeit { position: absolute;		top: 140px;		left: 190px;		color: #ffffff;		font-size: 10px;		visibility: visible;}#ani {	position: absolute;		top: 278px;		left: 351px;}...

HTML:

Code

...
<body bgcolor="c1c1c1">
    <div style="margin: 1em auto";>
		<div id="zeit">
			<script language="JavaScript" type="text/JavaScript">
				<!-- vor alten Browsern verstecken
				heute = new Date();
				MonatInJahr = heute.getMonth();
                           ...
                           	// -->
			</script>
		</div>
		<div id="ani">
			<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="240" width="320">
				<param name="src" value="(EmptyReference!)">
				<param name="autoplay" value="true">
				<param name="controller" value="false">
				<embed height="240" pluginspage="http://www.apple.com/quicktime/download/" src="Ani/Text_4_3_sorensen3.mov" type="video/quicktime" width="320" controller="false" autoplay="true" bgcolor="#000000"> 
			</object></div>


		<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#c1c1c1">
			<tr>
				<td><img id="LO" src="Content/HG_LO.jpg" alt="LO" name="LO" height="201" width="201" border="0" /></td>
				<td><img id="LO1" src="Content/HG_LO1.jpg" alt="LO1" name="LO1" height="201" width="200" border="0" /></td>
				<td><img id="LO2" src="Content/HG_LO2.jpg" alt="LO2" name="LO2" height="201" width="200" border="0" /></td>
				<td><img id="RO" src="Content/HG_RO.jpg" alt="RO" name="RO" height="201" width="199" border="0" /></td>
			</tr>
			<tr>
                      ...
			</tr>
			<tr>
                       ...
			</tr>
		</table>
		<p></p>
	</div>	
	</body>
...

Alles anzeigen

Das war's dann auch schon mit dem Code dieser Seite ...

Viele Grüße
Wolfgang

Hallo Gast,

gefällt dir der Thread, willst du was dazu schreiben, oder möchtest du noch mehr in diesem Forum sehen und kostenlose Downloads?

Dann melde dich bitte an.
Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du das Forum uneingeschränkt nutzen.

Hello Guest,

Do you like the thread, do you want to write something about it, or do you want to see more in this forum and free downloads?

Then please sign in.
If you don't have an account yet, please register, after activation you can use the forum without any restrictions.

DIV positionieren

Teilen

Tags