div position:relativ

Status
Nicht offen für weitere Antworten.
K

Kussilein

Mitglied
Hallole,

Tabelle: 3Zeilen, 3 Spalten
in zeile2, spalte2 ist ein Bild. Darüber möchte ich einen Text schreiben. ich kann das bild nicht als hintergrundbild laden, weil da noch ein areamap drauf liegt.
Mit position:absolut ist das richtig. wenn aber der browser schmaler wird, verschiebt sich der text.
Mit position:relativ verschiebt sich der text nicht, aber das bild rutscht nach unten.

hier ist mein code:
HTML: 
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0" height="100%">
 <tr>
   <td bgcolor="#000000" width="50%"></td>
   <td width="800" height="600">
	<table border="0" width="800" id="table2" cellspacing="0" cellpadding="0" height="600">
                   <tr>
	           <td width="800" height="125">
		<table border="0" width="800" id="table5" cellspacing="0" cellpadding="0" height="125">
		     <tr>
			<td colspan="5" width="720" height="87" valign="top">
			
<div style="border-style:solid; border-width:0px; position: relative; left:375px; width:240px; height: 20px; z_index: 1; top: 15px" id="hello" ><center><font color="blue"><b>Hallo siggilein</b></font></center></div>	

		<map name="Homemap">
			<area href="pakete.php?UID=53417&SID=69" target="main" shape="rect" coords="6, 3, 271, 39">
			<area href="contact.php?UID=53417&SID=69"  target="main"shape="rect" coords="517, 16, 578, 29">
			<area href="impressum.php"  target="main"shape="rect" coords="591, 15, 674, 31">
			<area href="agb.htm"  target="main"shape="rect" coords="685, 15, 719, 30">
		</map>

		<img src="../images/logo_login.gif" border="0" width="720" height="87" usemap="#Homemap">
							
		</td>
		<td width="80" height="87" background="../images/pfeil_ende.gif">&nbsp;</td>
	</tr>
	<tr>
		<td bgcolor="#FF0000" align="center"></td>
		<td bgcolor="#FF0000" align="center"></td>
		<td bgcolor="#FF0000" align="center"></td>
		<td bgcolor="#FF0000" align="center"></td>
                	<td bgcolor="#FF0000" align="center"></td>
		<td width="80" height="38" bgcolor="#FF0000"></td>
	</tr>
</table>
					</td>
			</tr>
			<tr>
					<td width="800" height="475">
<!--INHALT//-->						
						
<!--INHALT ENDE//-->		
					</td>
				</tr>
			</table>
		</td>
		<td bgcolor="#000000" width="50%"></td>
	</tr>
	</table>


Kann mir bitte jemand helfen. Ich muß die Seite heute noch online stellen.

Vielen Dank
Nicole
 
Hallo Kussilein,
tut mir leid, dass ich erst so spät Bewegung in diesem Forum registriert habe.

Aber ohne CSS, ohne DOC-Typ kann ich dir da erst mal auch nicht weiterhelfen. Die blanke HTML-Tabelle tut eigentlich wenig zur Sache.

edit:
Doch jetzt habe ein keines Stück CSS gesehen!
 
Zuletzt bearbeitet:
Hallo,

ich habe den Text- und den IMG-Block mit der relativen Positionierung übereinandergelegt und das funktioniert auch ganz gut. Allerdings musst du um den Textblock (div="hello") noch einen zweiten DIV-Block (div="hello1") herumlegen um den Text mit der "margin"-Eigenschaft vertikal zentrieren zu können:
HTML: 
      <div style="height:87px;overflow:hidden;padding:0;margin:0;">
      		<map name="Homemap">
 			<area href="pakete.php?UID=53417&SID=69" target="main" shape="rect" coords="6, 3, 271, 39">
 			<area href="contact.php?UID=53417&SID=69" target="main"shape="rect" coords="517, 16, 578, 29">
 			<area href="impressum.php" target="main"shape="rect" coords="591, 15, 674, 31">
 			<area href="agb.htm" target="main"shape="rect" coords="685, 15, 719, 30">
      		</map>
      	<img src="../images/logo_login.gif" border="0" width="720" height="87" usemap="#Homemap">
      	<div id="hello1">
 		<div id="hello" ><font color="blue"><b>Hallo siggilein</b></font></div>
      	</div>
      </div>
Der dritte DIV-Blöck macht sich leider notwendig, da es fast zwecklos ist die temporäre Höhenaufweitung durch die relative Positionierung über die Höhenangaben der Tabelle zu regeln. Browserabhängig sind deutliche Unterschiede gerade in vertikaler Richtung zu sehen, das liegt aber sicherlich daran, dass die Browser die Höhenangaben in den Tabellen nicht einhalten. Es hat sicherlich auch keinen Sinn mit CSS da was flicken zu wollen - am besten man lässt die Tabellen ganz weg.
Im Header der HTML-Datei müsste noch der folgende CSS-Code untergebracht werden und dann müsste die Positionierung von Schrift- und Bildebene im Seitenkopf sicherlich funktionieren.
Code: 
      <style type="text/css">
      <!--
      html, body {
      	width: 100%;
      	height: 100%;
      	margin: 0;
      	padding: 0;	
      }
      #hello1 {
      	position: relative;
      	top: -87px;	/* gleiche Position wie IMG! */
      	left: 0px;
      	width: 718px;
      	height: 87px;	/* gleiche Größe wie IMG! */
      	margin: 0;	/* unbedingt 0 */
      	padding: 0;	/* unbedingt 0 */
      	text-align: center;	/* Textausrichtung */
      	z-index: 10;
      }
      #hello {
      	margin: 30px;	/* Textabstand zum Blockrand */
      	padding: 0;	/* unbedingt 0 */
      	z-index: 10;
      }
      img {
      	position: relative;
      	display: block;
      	z-index: 1;
      }
      table {
      	empty-cells: show;
      	table-layout: fixed;
      	border-collapse: collapse;
      }
      -->
      </style>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück