zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem ein div über eine tabelle zu legen und relative/absolute zu setzen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.02.2011, 00:33
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 10.02.2011
Beiträge: 3
spike befindet sich auf einem aufstrebenden Ast
Standard Problem ein div über eine tabelle zu legen und relative/absolute zu setzen
Hallo ich hoffe Ihr könnt mir vielleicht helfen ;(

Hab jetzt schon stundenlang gegoogelt und rumprobiert, aber bekomme es einfach nicht hin.

Ich möchte eine flashbox als div-Element über eine tabelle legen. Das klappt auch soweit, allerdings nur wnen ich alles absolute setze. nur möchte ich ja das sich bei Auflösungsveränderung die flashbox wie auch schon das table weiter zentriert (angepasst an die Browserfenstergröße.

Mit 2 div boxen klappt das auch sprich ich setze die flashbox in einen anderen divkasten und setze den divkasten absolute und den flashboxdiv relative zu diesem.

Allerdings klappt das irgendwie nicht mit einem div und einem Table.

Mein Homepage-Design besteht leider komplett aus einem table.

Wie bekomme ich nun das table absolute psitioniert und dennoch stets gecentert bei sich ändernder Auflösung(Browserfenstergröße) und den divcontainer mit dem flashobjekt darüber mit relativer Positionierung zum table damit sich die flashbox bei veränderter Brwoserfenstergröße gleichmässig am table ausgerichtet mitverschiebt ?

Vielen Dank im Voraus !

MFG

spike

P.S:

hier der quelltext

HTML-Code:
<html>
<head>
<title>Homepagetitel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">

#flashbox {
position:absolute;
left:687px;
top:10px;
height:180px;
width:600px;
margin: center auto;
z-index:-2;
}

#tablediv {
position:absolute;
top: 0px;
left: 400px;
margin: center auto;
z-index:-1;

}



#divbox {
position: relative;
left: 670px;
top: 4px;
height: 200px;
width: 580px;
border: 1px solid black;
z-index: 0;
margin: center auto;
visibility:hidden;
}
<!--
body {
	background-image: url(Bilder/background3.jpg);
	background-position: center;
	margin: center auto;
	}
-->



</style>
</head>




<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('Bilder/index_03_over.jpg','Bilder/index_04_over.jpg','Bilder/index_05_over.jpg','Bilder/index_06_over.jpg','Bilder/index_07_over.jpg','Bilder/index_08_over.jpg','Bilder/index_15_over.jpg','Bilder/index_18_over.jpg')">
<!-- Save for Web Slices (Home_neueButtons_sliced_over.psd) -->

<div id="flashbox">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="540" height="180" id="tech" border ="1">
		<param name="allowScriptAccess" value="sameDomain" />
		<param name="movie" value="test1.swf" />
		<param name="quality" value="high" />
		<embed src="test1.swf" quality="high" width="540" height="180" name="tech"  allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object> 
</div>

<div id="divbox">
</div>



<div id="tablediv">

<table align="center" valign="top" id="Tabelle_01" width="855" height="901" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="Bilder/index_01.jpg" alt="" width="275" height="205" border="0" usemap="#Map"></td>
		<td colspan="8">
			<img src="Bilder/index_02.jpg" width="580" height="205" alt=""></td>
	</tr>
	<tr>
		<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','Bilder/index_03_over.jpg',1)"><img src="Bilder/index_03.jpg" alt="Startseite" name="Image29" width="165" height="47" border="0" usemap="#Image29Map"></a></td>
		<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','Bilder/index_04_over.jpg',1)"><img src="Bilder/index_04.jpg" alt="Wir über uns" name="Image30" width="132" height="47" border="0" usemap="#Image30Map"></a></td>
		<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','Bilder/index_05_over.jpg',1)"><img src="Bilder/index_05.jpg" alt="Lieferservice" name="Image31" width="132" height="47" border="0" usemap="#Image31Map"></a></td>
		<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','Bilder/index_06_over.jpg',1)"><img src="Bilder/index_06.jpg" alt="Feste & Events" name="Image32" width="131" height="47" border="0" usemap="#Image32Map"></a></td>
		<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image33','','Bilder/index_07_over.jpg',1)"><img src="Bilder/index_07.jpg" alt="Unser Sortiment" name="Image33" width="131" height="47" border="0" usemap="#Image33Map"></a></td>
		<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image34','','Bilder/index_08_over.jpg',1)"><img src="Bilder/index_08.jpg" alt="Kontakt" name="Image34" width="164" height="47" border="0" usemap="#Image34Map"></a></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="Bilder/index_09.jpg" width="855" height="78" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/index_10.jpg" width="58" height="488" alt=""></td>
		<td colspan="9">
			<img src="Bilder/index_11.jpg" width="726" height="488" alt=""></td>
		<td>
			<img src="Bilder/index_12.jpg" width="71" height="488" alt=""></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="Bilder/index_13.jpg" width="855" height="11" alt=""></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="2">
			<img src="Bilder/index_14.jpg" width="483" height="35" alt=""></td>
		<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image35','','Bilder/index_15_over.jpg',1)"><img src="Bilder/index_15.jpg" alt="Email" name="Image35" width="149" height="23" border="0"></a></td>
		<td colspan="3" rowspan="2">
			<img src="Bilder/index_16.jpg" width="223" height="35" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/index_17.jpg" width="149" height="12" alt=""></td>
	</tr>
	<tr>
		<td colspan="11"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','Bilder/index_18_over.jpg',1)"><img src="Bilder/index_18.jpg" alt="Impressum" name="Image36" width="855" height="36" border="0" usemap="#Image36Map"></a></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="58" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="107" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="110" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="22" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="132" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="54" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="77" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="72" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="59" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="93" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="71" height="1" alt=""></td>
	</tr>
</table>

</div>
<!-- End Save for Web Slices -->

<map name="Image29Map"><area shape="rect" coords="43,9,158,33" href="index.html" target="_self">
</map>
<map name="Image30Map"><area shape="rect" coords="14,12,123,37" href="wir_ueber_uns.html" target="_self">
</map>
<map name="Image31Map"><area shape="rect" coords="13,12,122,33" href="lieferservice.html" target="_self">
</map>
<map name="Image32Map"><area shape="rect" coords="8,9,127,33" href="feste_und_events.html" target="_self">
</map>
<map name="Image33Map"><area shape="rect" coords="18,11,108,33" href="sortiment.html" target="_self">
</map>
<map name="Image34Map"><area shape="rect" coords="31,12,103,34" href="kontakt.html" target="_self">
</map>
<map name="Image36Map"><area shape="rect" coords="9,8,76,24" href="impressum.html" target="_self">
</map>
<map name="Map"><area shape="rect" coords="44,56,253,138" href="index.html" target="_self">
</map></body>
</html>
Geändert von spike (11.02.2011 um 11:54 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.02.2011, 16:16
{ display: random;}
XHTMLforum-Kenner
  
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard
Mit Tabellen habe ich noch nie gerne gearbeitet.
Ein Tipp: Schieb das flash doch irgendwo in die Tabelle, laß diese wie gewohnt automatisch zentrieren und gebe der Tabellenzelle, in der sich das Flash-div befindet, ein position:relative mit. Mit pos:absolute kannst Du dann das div entsprechend positionieren und es wird mitwandern.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.02.2011, 19:10
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 10.02.2011
Beiträge: 3
spike befindet sich auf einem aufstrebenden Ast
Standard
erstmal danke für die schnelle Antwort !

Genau soweit bin ich mittlerweile auch, dass ich denke die flashbox muss in eine tabellenzelle.

Nur wie müsste das vom quellcode ca. aussehen ?

Da ich die Flashbox direkt im header ausgerichtet haben möchte wäre das bei mir die Zelle in der das index_02.jpg (was den header darstellt) steckt.

HTML-Code:
<table align="center" valign="top" id="Tabelle_01" width="855" height="901" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="Bilder/index_01.jpg" alt="" width="275" height="205" border="0" usemap="#Map"></td>
		<td colspan="8">
			<img src="Bilder/index_02.jpg" width="580" height="205" alt=""></td>
	</tr>
und das wäre das Flashelement ansich

HTML-Code:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="540" height="180" id="tech" border ="1">
		<param name="allowScriptAccess" value="sameDomain" />
		<param name="movie" value="test1.swf" />
		<param name="quality" value="high" />
		<embed src="test1.swf" quality="high" name="tech"  allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Abermals vielen Dank im Voraus !
Mit Zitat antworten
  #4 (permalink)  
Alt 13.02.2011, 12:25
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 10.02.2011
Beiträge: 3
spike befindet sich auf einem aufstrebenden Ast
Standard
kann mir keiner sagen wie ich ein div element in eine tabellenzelle bringe ? also wie das beispielhaft vom quelltext her aussehen müsste siehe meinen codeschnipseln.

LG

spike
Mit Zitat antworten
  #5 (permalink)  
Alt 13.02.2011, 22:25
Benutzerbild von digmed08
Benutzer
neuer user
  
Registriert seit: 15.05.2010
Ort: Mannheim
Beiträge: 41
digmed08 befindet sich auf einem aufstrebenden Ast
Standard
Ich würde dir ganz dringend empfehlen, von Tabellen abstand zu nehmen! Da habe ich auch immer wieder Probleme mit gehabt, da wird an einer Stelle was geändert und plötzlich...
Wenn du dein div absolut positionieren willst, muss es nicht zwagsläufig in der Tabelle stehen. Ich würde es einfach aus der tabelle rausnehmen und direkt ansprechen
#xyz {
position: absolute;
margin-top: 500px;
margin-left: 135px;
}

Dann wird das schon richtig dargestellt.
Ist natürlich auch nicht unbedingt provessionell, aber dann hast du ein Ergebnis.
__________________
SEO auf Twitter
Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
float Problem? Div "wächst" nicht mit inhalt mit. Garlandt CSS 2 11.04.2011 15:02
Tabelle ragt über DIV hinaus broesel (X)HTML 1 24.11.2009 10:39
inneres div soll äußeres div nach untern überlagern (Problem im Internet Explorer) Waldgeist CSS 6 14.02.2007 19:19
html tabelle in div steht im firefox rechts neben div Holger (HMR) CSS 2 08.01.2005 18:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:56 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2023, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023