✔ Grafiken/Text übereinander

StupidBoy · 25. November 2005

Hiho,
eins vorweg, ich arbeite mit GoLive, wer mit solchen Editoren ein Problem hat darf das gerne für sich behalten (hatte da schlechte Erfahrungen in manchen anderen Foren

).

Nun aber zu Sache, ich habe gerade ein Problem beim basteln einer Seite, und war möchte ich einige kleine Banner von Partnerseiten einabeun, ihr wisst schon, diese 100*30px Dinger.
Diese sollen über einer anderen Grafik (diese gehört zum Layout) angezeigt werden, habe es jetzt mit Ebenen versucht, das funktioniert im Prinzip auch, nur dass sich die Ebenen horizontal verschieben sobald ich die Fenstergröße meines Browsers verändere.
Ich habe dann versucht das Problem dadurch zu lösen dass ich per CSS-Style die Ebene formatiert habe, jedoch schlug das komplett fehl.
Das gleiche Problem habe ich auch mit der Sidebar bloß das hier Texte die Grafik überlagern soll.

Hoffe ich habe mich verständlich ausgedrückt und ihr könnt mir helfen.

Grüße SB

Maik · 25. November 2005

Für eine effektive Fehlerdiagnose wäre der HTML- und CSS-Code ganz hilfreich.

StupidBoy · 25. November 2005

Gerne, hier hast du den kompletten Code, ich hoffe das ist was du haben wolltest.
PS: Wie es funktioniert ist mir letztendlich egal, ob nun mit div-layer oder anders, Hauptsache es gibt überhaupt eine Lösung für einen y wie mich.

Grüße

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta http-equiv="imagetoolbar" content="no">
		<meta name="generator" content="Adobe GoLive">
		<title>Testseite</title>
		<style type="text/css" media="screen"><!--
#Ebene1 { visibility: visible; position: absolute; top: 795px; left: 5%; width: 102px; height: 35px }
--></style>
	</head>

	<body bgcolor="#cccccc">
		<div id="Ebene1">
			<img src="vwar.jpg" alt="" height="35" width="100" border="0"></div>
		<table border="0" cellspacing="0" cellpadding="0" cool gridx="16" gridy="16" showgridx showgridy width="1011" height="1601" align="center">
			<tr height="235">
				<td width="1009" height="235" colspan="5" valign="top" align="left" xpos="0"><img src="banner.jpg" alt="" height="235" width="980" align="middle" border="0"></td>
				<td width="1" height="235" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="235"></td>
				<td width="1" height="235"><spacer type="block" width="1" height="235"></td>
			</tr>
			<tr height="87">
				<td width="1009" height="87" colspan="5" valign="top" align="left" xpos="0"><img src="under_header.jpg" alt="" height="87" width="980" align="middle" border="0"></td>
				<td width="1" height="87" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="87"></td>
				<td width="1" height="87"><spacer type="block" width="1" height="87"></td>
			</tr>
			<tr height="4">
				<td width="246" height="5" rowspan="2" valign="top" align="left" xpos="0"><img src="left_0.jpg" alt="" height="5" width="209" border="0"></td>
				<td width="265" height="153" rowspan="20" valign="top" align="left" xpos="246"><img src="middle_grid_left.gif" alt="" height="151" width="251" border="0"></td>
				<td width="292" height="153" rowspan="20" valign="top" align="left" xpos="511"><img src="middle_grid_right.gif" alt="" height="151" width="251" border="0"></td>
				<td width="1" height="270" rowspan="33"></td>
				<td width="205" height="4" valign="top" align="left" xpos="804"><img src="right.jpg" alt="" height="4" width="176" border="0"></td>
				<td width="1" height="4" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="4"></td>
				<td width="1" height="4"><spacer type="block" width="1" height="4"></td>
			</tr>
			<tr height="1">
				<td width="205" height="24" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_top.gif" alt="" height="24" width="176" border="0"></td>
				<td width="1" height="1" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
			</tr>
			<tr height="23">
				<td width="246" height="24" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_top.gif" alt="" height="24" width="209" align="top" border="0"></td>
				<td width="1" height="23" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="23"></td>
				<td width="1" height="23"><spacer type="block" width="1" height="23"></td>
			</tr>
			<tr height="1">
				<td width="205" height="16" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_element.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="1" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
			</tr>
			<tr height="15">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="15" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="15"></td>
				<td width="1" height="15"><spacer type="block" width="1" height="15"></td>
			</tr>
			<tr height="1">
				<td width="205" height="16" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_element.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="1" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
			</tr>
			<tr height="15">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="15" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="15"></td>
				<td width="1" height="15"><spacer type="block" width="1" height="15"></td>
			</tr>
			<tr height="1">
				<td width="205" height="16" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_element.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="1" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
			</tr>
			<tr height="15">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="15" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="15"></td>
				<td width="1" height="15"><spacer type="block" width="1" height="15"></td>
			</tr>
			<tr height="1">
				<td width="205" height="16" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_element.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="1" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
			</tr>
			<tr height="15">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_end.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="15" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="15"></td>
				<td width="1" height="15"><spacer type="block" width="1" height="15"></td>
			</tr>
			<tr height="1">
				<td width="205" height="16" rowspan="3" valign="top" align="left" xpos="804"><img src="right_1_element.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="1" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
			</tr>
			<tr height="4">
				<td width="246" height="4" valign="top" align="left" xpos="0"><img src="left.gif" alt="" height="4" width="209" border="0"></td>
				<td width="1" height="4" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="4"></td>
				<td width="1" height="4"><spacer type="block" width="1" height="4"></td>
			</tr>
			<tr height="11">
				<td width="246" height="24" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_top.gif" alt="" height="24" width="209" border="0"></td>
				<td width="1" height="11" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="11"></td>
				<td width="1" height="11"><spacer type="block" width="1" height="11"></td>
			</tr>
			<tr height="13">
				<td width="205" height="16" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_element.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="13" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="13"></td>
				<td width="1" height="13"><spacer type="block" width="1" height="13"></td>
			</tr>
			<tr height="3">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="3" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="3"></td>
				<td width="1" height="3"><spacer type="block" width="1" height="3"></td>
			</tr>
			<tr height="13">
				<td width="205" height="16" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_end.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="13" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="13"></td>
				<td width="1" height="13"><spacer type="block" width="1" height="13"></td>
			</tr>
			<tr height="3">
				<td width="246" height="16" rowspan="3" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="3" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="3"></td>
				<td width="1" height="3"><spacer type="block" width="1" height="3"></td>
			</tr>
			<tr height="4">
				<td width="205" height="4" valign="top" align="left" xpos="804"><img src="right.jpg" alt="" height="4" width="176" border="0"></td>
				<td width="1" height="4" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="4"></td>
				<td width="1" height="4"><spacer type="block" width="1" height="4"></td>
			</tr>
			<tr height="9">
				<td width="205" height="24" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_top.gif" alt="" height="24" width="176" border="0"></td>
				<td width="1" height="9" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="9"></td>
				<td width="1" height="9"><spacer type="block" width="1" height="9"></td>
			</tr>
			<tr height="15">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_end.gif" alt="" height="16" width="209" border="0"></td>
				<td width="557" height="1077" colspan="2" rowspan="33"></td>
				<td width="1" height="15" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="15"></td>
				<td width="1" height="15"><spacer type="block" width="1" height="15"></td>
			</tr>
			<tr height="1">
				<td width="205" height="16" rowspan="3" valign="top" align="left" xpos="804"><img src="right_1_element.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="1" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
			</tr>
			<tr height="4">
				<td width="246" height="4" valign="top" align="left" xpos="0"><img src="left.gif" alt="" height="4" width="209" border="0"></td>
				<td width="1" height="4" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="4"></td>
				<td width="1" height="4"><spacer type="block" width="1" height="4"></td>
			</tr>
			<tr height="11">
				<td width="246" height="24" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_top.gif" alt="" height="24" width="209" align="top" border="0"></td>
				<td width="1" height="11" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="11"></td>
				<td width="1" height="11"><spacer type="block" width="1" height="11"></td>
			</tr>
			<tr height="13">
				<td width="205" height="16" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_element.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="13" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="13"></td>
				<td width="1" height="13"><spacer type="block" width="1" height="13"></td>
			</tr>
			<tr height="3">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="3" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="3"></td>
				<td width="1" height="3"><spacer type="block" width="1" height="3"></td>
			</tr>
			<tr height="13">
				<td width="205" height="16" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_element.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="13" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="13"></td>
				<td width="1" height="13"><spacer type="block" width="1" height="13"></td>
			</tr>
			<tr height="3">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="3" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="3"></td>
				<td width="1" height="3"><spacer type="block" width="1" height="3"></td>
			</tr>
			<tr height="13">
				<td width="205" height="16" rowspan="2" valign="top" align="left" xpos="804"><img src="right_1_end.gif" alt="" height="16" width="176" border="0"></td>
				<td width="1" height="13" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="13"></td>
				<td width="1" height="13"><spacer type="block" width="1" height="13"></td>
			</tr>
			<tr height="3">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="3" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="3"></td>
				<td width="1" height="3"><spacer type="block" width="1" height="3"></td>
			</tr>
			<tr height="13">
				<td width="205" height="38" rowspan="3" valign="top" align="left" xpos="804"><img src="right.jpg" alt="" height="38" width="176" border="0"></td>
				<td width="1" height="13" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="13"></td>
				<td width="1" height="13"><spacer type="block" width="1" height="13"></td>
			</tr>
			<tr height="16">
				<td width="246" height="16" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="16" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="16"></td>
				<td width="1" height="16"><spacer type="block" width="1" height="16"></td>
			</tr>
			<tr height="9">
				<td width="246" height="16" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_end.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="9" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="9"></td>
				<td width="1" height="9"><spacer type="block" width="1" height="9"></td>
			</tr>
			<tr height="7">
				<td width="206" height="16" colspan="2" rowspan="3" valign="top" align="left" xpos="803"><img src="right_2.gif" alt="" height="16" width="177" border="0"></td>
				<td width="1" height="7" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="7"></td>
				<td width="1" height="7"><spacer type="block" width="1" height="7"></td>
			</tr>
			<tr height="4">
				<td width="246" height="4" valign="top" align="left" xpos="0"><img src="left.gif" alt="" height="4" width="209" border="0"></td>
				<td width="1" height="4" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="4"></td>
				<td width="1" height="4"><spacer type="block" width="1" height="4"></td>
			</tr>
			<tr height="5">
				<td width="246" height="24" rowspan="2" valign="top" align="left" xpos="0"><img src="left_1_top.gif" alt="" height="24" width="209" border="0"></td>
				<td width="1" height="5" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="5"></td>
				<td width="1" height="5"><spacer type="block" width="1" height="5"></td>
			</tr>
			<tr height="19">
				<td width="206" height="702" colspan="2" rowspan="15" valign="top" align="left" xpos="803"><img src="right_3.gif" alt="" height="702" width="177" border="0"></td>
				<td width="1" height="19" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="19"></td>
				<td width="1" height="19"><spacer type="block" width="1" height="19"></td>
			</tr>
			<tr height="16">
				<td width="246" height="16" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="16" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="16"></td>
				<td width="1" height="16"><spacer type="block" width="1" height="16"></td>
			</tr>
			<tr height="16">
				<td width="246" height="16" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="16" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="16"></td>
				<td width="1" height="16"><spacer type="block" width="1" height="16"></td>
			</tr>
			<tr height="16">
				<td width="246" height="16" valign="top" align="left" xpos="0"><img src="left_1_end.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="16" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="16"></td>
				<td width="1" height="16"><spacer type="block" width="1" height="16"></td>
			</tr>
			<tr height="4">
				<td width="246" height="4" valign="top" align="left" xpos="0"><img src="left.gif" alt="" height="4" width="209" border="0"></td>
				<td width="1" height="4" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="4"></td>
				<td width="1" height="4"><spacer type="block" width="1" height="4"></td>
			</tr>
			<tr height="24">
				<td width="246" height="24" valign="top" align="left" xpos="0"><img src="left_1_top.gif" alt="" height="24" width="209" align="top" border="0"></td>
				<td width="1" height="24" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="24"></td>
				<td width="1" height="24"><spacer type="block" width="1" height="24"></td>
			</tr>
			<tr height="16">
				<td width="246" height="16" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="16" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="16"></td>
				<td width="1" height="16"><spacer type="block" width="1" height="16"></td>
			</tr>
			<tr height="16">
				<td width="246" height="16" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="16" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="16"></td>
				<td width="1" height="16"><spacer type="block" width="1" height="16"></td>
			</tr>
			<tr height="16">
				<td width="246" height="16" valign="top" align="left" xpos="0"><img src="left_1_element.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="16" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="16"></td>
				<td width="1" height="16"><spacer type="block" width="1" height="16"></td>
			</tr>
			<tr height="16">
				<td width="246" height="16" valign="top" align="left" xpos="0"><img src="left_1_end.gif" alt="" height="16" width="209" border="0"></td>
				<td width="1" height="16" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="16"></td>
				<td width="1" height="16"><spacer type="block" width="1" height="16"></td>
			</tr>
			<tr height="4">
				<td width="246" height="4" valign="top" align="left" xpos="0"><img src="left.gif" alt="" height="4" width="209" border="0"></td>
				<td width="1" height="4" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="4"></td>
				<td width="1" height="4"><spacer type="block" width="1" height="4"></td>
			</tr>
			<tr height="21">
				<td width="246" height="21" valign="top" align="left" xpos="0"><img src="left_2.gif" alt="" height="21" width="209" border="0"></td>
				<td width="1" height="21" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="21"></td>
				<td width="1" height="21"><spacer type="block" width="1" height="21"></td>
			</tr>
			<tr height="312">
				<td width="246" height="312" valign="top" align="left" xpos="0"><img src="left_3.gif" alt="" height="312" width="209" border="0"></td>
				<td width="1" height="312" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="312"></td>
				<td width="1" height="312"><spacer type="block" width="1" height="312"></td>
			</tr>
			<tr height="21">
				<td width="246" height="21" valign="top" align="left" xpos="0"><img src="left_4.gif" alt="" height="21" width="209" border="0"></td>
				<td width="1" height="21" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="21"></td>
				<td width="1" height="21"><spacer type="block" width="1" height="21"></td>
			</tr>
			<tr height="185">
				<td width="246" height="187" rowspan="2" valign="top" align="left" xpos="0"><img src="left_5.gif" alt="" height="187" width="209" border="0"></td>
				<td width="1" height="185" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="185"></td>
				<td width="1" height="185"><spacer type="block" width="1" height="185"></td>
			</tr>
			<tr height="2">
				<td width="206" height="242" colspan="2" rowspan="2" valign="top" align="left" xpos="803"><img src="right_4.gif" alt="" height="21" width="177" border="0"></td>
				<td width="1" height="2" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="2"></td>
				<td width="1" height="2"><spacer type="block" width="1" height="2"></td>
			</tr>
			<tr height="240">
				<td width="246" height="240" valign="top" align="left" xpos="0"><img src="left_6.gif" alt="" height="19" width="209" border="0"></td>
				<td width="1" height="240" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="240"></td>
				<td width="1" height="240"><spacer type="block" width="1" height="240"></td>
			</tr>
			<tr height="47">
				<td width="1009" height="47" colspan="5" valign="top" align="left" xpos="0"><img src="bottom.jpg" alt="" height="35" width="980" align="bottom" border="0"></td>
				<td width="1" height="47" valign="top" align="left" xpos="1009"><spacer type="block" width="1" height="47"></td>
				<td width="1" height="47"><spacer type="block" width="1" height="47"></td>
			</tr>
			<tr height="1">
				<td width="246" height="1" valign="top" align="left" xpos="0"><spacer type="block" width="246" height="1"></td>
				<td width="265" height="1" valign="top" align="left" xpos="246"><spacer type="block" width="265" height="1"></td>
				<td width="292" height="1" valign="top" align="left" xpos="511"><spacer type="block" width="292" height="1"></td>
				<td width="1" height="1" valign="top" align="left" xpos="803"><spacer type="block" width="1" height="1"></td>
				<td width="205" height="1" valign="top" align="left" xpos="804"><spacer type="block" width="205" height="1"></td>
				<td width="1" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
			</tr>
			<tr height="1" cntrlrow>
				<td width="246" height="1"><spacer type="block" width="246" height="1"></td>
				<td width="265" height="1"><spacer type="block" width="265" height="1"></td>
				<td width="292" height="1"><spacer type="block" width="292" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
				<td width="205" height="1"><spacer type="block" width="205" height="1"></td>
				<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
				<td width="1" height="1"></td>
			</tr>
		</table>
		<p></p>
	</body>

</html>

Maik · 25. November 2005

StupidBoy hat gesagt.:
habe es jetzt mit Ebenen versucht, das funktioniert im Prinzip auch, nur dass sich die Ebenen horizontal verschieben sobald ich die Fenstergröße meines Browsers verändere.

Der Grund ist die relative Positionsangabe left:5% für das DIV. Mit einer festen Angabe, wie z.B. px, wird die DIV-Box nicht horizontal verschoben.

StupidBoy · 25. November 2005

Habe ich probiert, wenn ich das jetzt richtig erkannt habe, richtet sich der Layer nach dem Fensterrand, der Rest der Seite jedoch ist zentriert.
Ich denke eine Möglichkeit wäre die gesamte Seite am linken Fensterrand auszurichten, allerdings sähe das nicht so gut aus. Ich habs aber nicht hinbekommen den Layer zu zentrieren, bisher habe ich immer nur den Inhalt zentriert gekriegt was ja aber nicht wirklich Sinn macht

Grüße

Maik · 25. November 2005

Du willst das DIV horizontal zentrieren? Kein Problem

Code:

#Ebene1 
{ 
visibility: visible; 
position: absolute; 
top: 795px; 
left: 50%; 
margin-left: -51px; /* negative Hälfte von width:102px */
width: 102px; 
height: 35px 
}

Mit der Positionsangabe left:50% sitzt der linke Element-Rand in der Fenstermitte, das Element ist somit außermittig, nach rechts verschoben. Mit dem linken Außenabstand margin-left:-51px wird das Element um seine halbe Breite mit negativem Vorzeichen nach links verschoben, und somit im Fenster horizontal positioniert.

Wird das Browserfenster nun horizontal verkleinert bzw. vergrössert, richtet sich das Element immer automatisch in der Fenstermitte aus.

StupidBoy · 25. November 2005

Danke für deine Mühen soweit es passt fast, aber leider nur fast.

Das Problem tritt jetzt zwar erst später auf, allerdings immernoch sobal die Fensterbreite bei unter 980px(breite des Layouts) liegt.
Außerdem war die Grafik nun in der Mitte was wohl daran lag, dass ich mich etwas unklar ausgedrückt hatte.
War aber lösbar >>

Code:

{ 
visibility: visible; 
position: absolute; 
top: 795px; 
left: 50%; 
margin-left: -490px; /* negative Hälfte von width:980px (breite des Layouts) */
width: 980px; 
height: 35px
}

Mein Gedanke war eigentlich, ob es möglich ist, das DIV per center-befehl oder ähnlichen in die Mitte der Seite zu bekommen. Hätte das DIV dann die gleiche Breite wie das restliche, bereits vorhandene Layout (980px), sü müsste es sich beim Verschieben doch eigentlich genauso verhalten wie der Rest der Seite.
Ob das umsetzbar ist ist die andere Frage :-(

Maik · 25. November 2005

Probier mal folgendes, um die Grafik in dem DIV horizontal zu zentrieren:

Code:

div#ebene1
{
visibility: visible;
position: absolute;
top: 795px;
left: 50%;
margin-left: -490px; /* negative Hälfte von width:980px (breite des Layouts) */
width: 980px;
height: 35px;
text-align: center;
}

StupidBoy · 25. November 2005

Das will auch nicht so recht, der Button ist noch immer in der Mitte der Seite und verschiebt sich sobal die Fensterbreite unter 980px ist.
Ich befürchte wir reden gerade ziemlich aneinader vorbei, deshalb hier mal ein kleines Bild wie ich mir das vorgestellt hatte.
Das soll der linke Rand des Layouts sein, über dem Button wäre die Sidebar, rechts vom Button der Content der Seite.

Grüße

StupidBoy · 25. November 2005

Muss mich entschuldigen, weiß nun woran es liegt, die Images waren nicht als Hintergrundbild eingefügt :-( :-( :-( *shame on me*
Sitze nun gerade drann das zu korrigieren.
Trotzdem ein dickes Danke für deine Hilfe.

Grüße SB

✔ Grafiken/Text übereinander

StupidBoy

Mitglied Gold

Maik

StupidBoy

Mitglied Gold

Maik

StupidBoy

Mitglied Gold

Maik

StupidBoy

Mitglied Gold

Maik

StupidBoy

Mitglied Gold

Anhänge

StupidBoy

Mitglied Gold

Neue Beiträge