Bild über Bild

rafa · #1 (**permalink**) 24.01.2010, 18:19

Hallo zusammen,

Auf meiner Seite haben User auf ihren Profil bis zu 3 Bilder die sie von sich aus Präsentieren können. Ich hab das so gemacht das ein Startbild vorliegt und 3 Bilder sind daneben aber in einer kleinen größe. Klickt man das kleine Bild an, dann wird das Bild mit dem Startbild ersetzt und wird groß angezeigt.

Das Problem das auftritt, ist das wenn man ein anderes Bild anklickt es drüber angezeigt wird. Ich möchte dass das andere Bild das unter dem Bild ist verschwindet.

Hier mal Visuell zum besseren Verständnis:

Link 1 zeigt wies normal aussieht:

Link 2 zeigt wies aussieht, wenn man ein anderes kleines Bild anklickt sodass es einfach über dem anderen Bild drauf gelegt wird.(darunter liegende Bild soll jedoch weg gehen)

Der CODE:

Code:

<style type="text/css">
/* needed for IE to make :active state work first time */
a, a:visited {
	color:#000;
	text-align: left;
}

/* kleine bilder an der seite*/
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#F33; text-decoration:none; border:1px solid #000; width:90px;  float:left; margin:2px; z-index:50;}


a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #F33;}



/* styling for RIGHT gallery */
#container_right {position:relative; width:400px; height:200px; }

#container_right img {border:0;}

#container_right .thumbs {width:100px; position:absolute; right:0; top:0;}

#container_right a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:-430px; padding:5px; font-style:italic; z-index:100;}


/*Bild nach links und rechts verschieben!!! bei dem left*/


#container_right div.thumbs em.default, #container_right a.gallery:active em, #container_right a.gallery:focus em {display:block; position:absolute; width:250px; height:370px; top:5px; left:-270px; padding:5px; border-bottom-color:#F00; z-index:50;}

</style>

<style>
a:hover {text-decoration:underline; color:green;}
a {text-decoration:none;}
</style>
<style> 
.myse {
border: 1px solid #000;

}
</style>

Code:

       <? 
if ($dateiname != NULL){
echo "<a class='gallery slidea' href='#nogo'><img src='img/$dateiname'  width='90' /><em><img src='img/$dateiname'   /></em></a>";

}
?>
            <? 
if ($bild_1 != NULL){
echo "<a class='gallery slidea' href='#nogo'><img src='img/$bild_1'  width='90' /><em><img src='img/$bild_1'  /></em></a>";

}
?>
            <? 
if ($bild_2 != NULL){
echo "<a class='gallery slidea' href='#nogo'><img src='img/$bild_2'  width='90' /><em><img src='img/$bild_2'   /></em></a>";
}
?>

LG

Cocoon · #2 (**permalink**) 24.01.2010, 18:37

Poste mal einen Link zu der Problemseite oder das komplette HTML ohne PHP/JS (aus dem Browser kopieren, nicht aus dem Editor).

rafa · #3 (**permalink**) 24.01.2010, 18:46

ok hier, seitenquelltext von einen Profil:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/start.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<META Name="Content-Type" Value="text/html;charset=utf-16">














 
<title>SEELebanon| wo sich Libanesen begegnen...</title>
				
<link rel="shortcut icon" type="image/x-icon" href="../icon3.png">
<!-- InstanceBeginEditable name="doctitle" -->
<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    language:   "de-CH",
    players:    ["qt"],
	players:    ["img"]
});
</script>


<script language="JavaScript" type="text/javascript"> 
<!-- 
function MM_showHideLayers() { //v2.0 
  var i, visStr, args, theObj; 
  args = MM_showHideLayers.arguments; 
  onmouseover="MM_showHideLayers('impr','','show');" 
  onmouseout="MM_showHideLayers('impr','','hide');" 
  for (i=0; i<(args.length-2); i+=3) { //with arg triples (objNS,objIE,visStr) 
    visStr   = args[i+2]; 
    if (navigator.appName == 'Netscape' && document.layers != null) { 
      theObj = eval(args[i]); 
      if (theObj) theObj.visibility = visStr; 
    } else  if (document.getElementById) { // NEU
      if (visStr == 'show') visStr = 'visible'; //convert vals 
      if (visStr == 'hide') visStr = 'hidden'; 
      theObj = document.getElementById(args[i+1]);  // NEU
      if (theObj) theObj.style.visibility = visStr; 
  } } 
} 
//--> 
</script>
<script src="scriptsjs/jquery-latest.js" type="text/javascript"></script>
<script src="scripts/thickbox.js" type="text/javascript"></script>
<link href="css/thickbox.css" rel="stylesheet" type="text/css" />
<style type="text/css">

.buttonscontaine {width: 500px;} /*BREITE DES MENUE*/

.buttoe a {color: #00F;/*Textfarbe*/
background-color: #FFF;/*Hintergrundfarbe des MENUE*/
padding: 2px;
padding-left: 3px;
font: 13px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;
}

.buttons a:hover {background-color: #F00;/*HINTERGRUND FARBE BEIM DR�BER GEHEN*/
color: #FFF;/*BREITE DES MENUE*/
text-decoration: none;}
</style>


<style type="text/css">
hr{
 border: 0px; /* F�r Firefox und Opera */
 border-top: solid 1px green;
 border-bottom: solid 1px #FFFFFF; /* F�r I.Explorer (Seiten-Hintergrundfarbe!) */
 width:715px;
 
}
</style>


<style type="text/css">
table.profil{font-size:12px;
color:#000;
}

</style>
<style type="text/css">

.buttonscont {width: 200px;} /*BREITE DES MENUE*/

.butt a {
	color: #333;/*Textfarbe*/
	background-color: #FFF;/*Hintergrundfarbe des MENUE*/
	padding: 2px;
	padding-left: 3px;
	display: block;
	border-bottom: 1px solid green;/*trennlinie f�r die menue*/
	font: 13px Arial, sans-serif;
	font-weight: bold;
	text-decoration: none;
}

.butt a:hover {background-color: #FFF;/*HINTERGRUND FARBE BEIM DR�BER GEHEN*/
color: #000;/*BREITE DES MENUE*/
text-decoration: none;}

</style>

<style type="text/css">
table{font-size:12px;}
</style>




<!--Profildiashow-->
<style type="text/css">
/* needed for IE to make :active state work first time */
a, a:visited {
	color:#000;
	text-align: left;
}

/* kleine bilder an der seite*/
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#F33; text-decoration:none; border:1px solid #000; width:90px;  float:left; margin:2px; z-index:50;}


a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #F33;}



/* styling for RIGHT gallery */
#container_right {position:relative; width:400px; height:200px; }

#container_right img {border:0;}

#container_right .thumbs {width:100px; position:absolute; right:0; top:0;}

#container_right a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:-430px; padding:5px; font-style:italic; z-index:100;}


/*Bild nach links und rechts verschieben!!! bei dem left*/


#container_right div.thumbs em.default, #container_right a.gallery:active em, #container_right a.gallery:focus em {display:block; position:absolute; width:250px; height:370px; top:5px; left:-270px; padding:5px; border-bottom-color:#F00; z-index:50;}

</style>

<style>
a:hover {text-decoration:underline; color:green;}
a {text-decoration:none;}
</style>
<style> 
.myse {
border: 1px solid #000;

}

</style>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<script src="../SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" href="css/start.css">
 <script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="scriptsjs/jquery-latest.js" type="text/javascript"></script>
<script src="scripts/thickbox.js" type="text/javascript"></script>

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

<script src="../SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />

<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

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

<script src="../SpryAssets/SpryValidationRadio.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationRadio.css" rel="stylesheet" type="text/css" />

<style type="text/css">
div.bg {
background-image: url(../button_new.png);
width:180px;
height:20px;
padding:inherit;
/*border:1px solid green;*/
}
</style>


<style type="text/css">

.buttonscontaine {width:295px;} /*BREITE DES MENUE*/

.button a {color: #FFF;/*Textfarbe*/
padding: 2px;
padding-left: 3px;
border-right:1px solid #FFF;
font: 13px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;
}

.button a:hover {/*HINTERGRUND FARBE BEIM DR�BER GEHEN*/
color: #000;/*BREITE DES MENUE*/
text-decoration: none;}


</style>


<!--Dieses ist f�r die untere AGB FUNKTIONSPRINZIP USW:::-->
<style type="text/css">

.buttonscon {width: 550px;} /*BREITE DES MENUE*/

.but a {color: #FFF;/*Textfarbe*/
padding: 2px;
padding-left: 3px;
border-right:1px solid #FFF;
font: 13px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;}

.but a:hover {
color: #FFF;/*BREITE DES MENUE*/
text-decoration: none;}


</style>





<style type="text/css">

.buttonscx {width: 250px;} /*BREITE DES MENUE*/

.buttx a {color: #FFF;/*Textfarbe*/
padding: 2px;
padding-left: 3px;
font: 11px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;}

.buttx a:hover {
color:#000;/*BREITE DES MENUE*/
text-decoration: none;}


</style>


<style type="text/css">

.buttonscontainer {width: 200px;} /*BREITE DES MENUE*/

.buttons a {color: #000;/*Textfarbe*/
background-color: #FFF;/*Hintergrundfarbe des MENUE*/
padding: 2px;
padding-left: 3px;
display: block;
border-bottom: 1px solid #CCC;/*trennlinie f�r die menue*/
font: 13px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;}

.buttons a:hover {background-color: #FFF;/*HINTERGRUND FARBE BEIM DR�BER GEHEN*/
color: #333;/*BREITE DES MENUE*/
text-decoration: none;}

</style>



<style>
.mysel {
border: 1px solid red;

}
</style>

<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auff�llung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color: #000000;
	background-color: #FFF;
}

/* Tipps f�r elastische Layouts:
1. Da die Gesamtgr��e elastischer Layouts von der Standardschriftgr��e des Benutzers abh�ngt, sind diese Layouts weniger berechenbar. Bei korrekter Verwendung haben sie au�erdem f�r Personen, die gr��ere Schriften ben�tigen, einen h�heren Nutzwert, weil die Zeilenl�nge proportional bleibt.
2. Die Gr��e der divs in diesem Layout basiert auf der Originalschriftgr��e (100%) im Body-Element. Wenn Sie die Textgr��e durch eine Einstellung wie font-size: 80% im Body-Element oder im #container global verringern, wird das gesamte Layout proportional verkleinert. Sie sollten die Breiten der verschiedenen divs vergr��ern, um hierf�r einen Ausgleich zu schaffen.
3. Wenn Sie in den einzelnen divs unterschiedliche Werte f�r die Schriftgr��e angegeben, anstatt die Schriftgr��e im Design global zu �ndern (z. B. wenn #sidebar1 die Schriftgr��e 70% zugewiesen wird und #mainContent die Gr��e 85%), so wird die Gesamtgr��e der einzelnen divs proportional ge�ndert. Sie sollten anhand der endg�ltig gew�hlten Schriftgr��e entsprechende Anpassungen vornehmen.
*/
.thrColElsHdr #container { 
	width: 72.5em;  /* Mit dieser Breite wird ein Container erstellt, der in ein 800 Pixel breites Browserfenster passt, sofern f�r den Text die Standardschriftgr��e des Browsers �bernommen wird. */
	background: #FFF ; /*main*/
	margin: 0 auto; /* Durch automatische R�nder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	border: 1px solid green; /*DER RAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAND*/
	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element �berschrieben. */
} 
.thrColElsHdr #header { 
	background:#FFF ; 
	border-bottom: 1px solid green;
	padding: 0 10px;  /* Diese Auff�llung entspricht der linksb�ndigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auff�llung entfernen. */
} 
.thrColElsHdr #header h1 {
	
	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, k�nnen Sie das Auftreten unerwarteter Abst�nde zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unn�tig, weil dieser Rahmen die gleiche Wirkung hat. */
	padding: 10px 0; /* Durch die Verwendung der Auff�llung anstelle von R�ndern l�sst sich gew�hrleisten, dass das Element die Kanten des div nicht ber�hrt. */
}

/* Tipps f�r sidebar1:
1. Wenn Sie f�r dieses div eine Schriftgr��e festlegen, wird die Gesamtbreite des div entsprechend angepasst.
2. Da wir mit Gevierten (ems) arbeiten, ist es empfehlenswert, f�r die Randleiste selbst keine Auff�llung zu verwenden. Sie wird bei standardgerechten Browsern der Breite hinzugef�gt, und dies wiederum f�hrt zu einer unbekannten tats�chlichen Breite. 
3. Zwischen der Kante des div und den darin liegenden Elementen kann ein Abstand eingef�gt werden, indem Sie diesen Elementen wie in ".thrColElsHdr #sidebar1 p" demonstriert einen linken und rechten Rand zuweisen.
*/
.thrColElsHdr #sidebar1 {
	float: left;
	width: 12.5em; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
	background: #FFF; /* Die Hintergrundfarbe wird nur f�r die L�nge des Spalteninhalts angezeigt. */
	border-right: 1px solid green;
	border-bottom: 1px solid green;
	padding: 15px 0; /* Durch die Auff�llung oben und unten entsteht in diesem div ein visueller Leerraum. */
	text-align: center;
}
.thrColElsHdr #sidebar2 {
	float: right; 
	width: 12.5em; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
	border-left: 1px solid green;
	border-bottom:1px solid green;
	background: #FFF; /* Die Hintergrundfarbe wird nur f�r die L�nge des Spalteninhalts angezeigt. */
	padding: 15px 0; /* Durch die Auff�llung oben und unten entsteht in diesem div ein visueller Leerraum. */
}
.thrColElsHdr #sidebar1 h3, .thrColElsHdr #sidebar1 p, .thrColElsHdr #sidebar2 p, .thrColElsHdr #sidebar2 h3 {
	margin-left: 10px; /* F�r jedes Element, das in den seitlichen Spalten platziert wird, sollten ein linker und ein rechter Rand angegeben werden. */
	margin-right: 10px;
}

/* Tipps f�r mainContent:
1. Wenn Sie diesem #mainContent-div nicht denselben Schriftgr��enwert wie dem #sidebar1-div zuweisen, basieren die R�nder des #mainContent div auf der Schriftgr��e des #mainContent-div, und die Breite des #sidebar1-div basiert auf der Schriftgr��e des #sidebar1-div. Sie sollten die Werte dieser divs anpassen.
2. Der Abstand zwischen mainContent und sidebar1 entsteht durch den linken Rand des mainContent-div. Der Spaltenbereich bleibt unabh�ngig von der Inhaltsmenge des sidebar1-div immer gleich. Sie k�nnen diesen linken Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 f�llen soll, wenn der Inhalt in #sidebar1 endet.
3. Zur Vermeidung von Float-Drops m�ssen Sie gegebenenfalls die ungef�hre maximale Bild-/Elementgr��e anhand eines Tests ermitteln, weil dieses Layout auf der vom Benutzer angegebenen Schriftgr��e und den von Ihnen festgelegten Werten basiert. Wenn der Benutzer die Browser-Schriftgr��e aber auf einen Wert eingestellt hat, der unter dem Normalwert liegt, steht im #mainContent-div weniger Platz zur Verf�gung als beim Test erkennbar.
4. Im unten stehenden bedingten Kommentar f�r Internet Explorer wird die Zoom-Eigenschaft verwendet, um mainContent die Eigenschaft hasLayout zuzuweisen. Dadurch wird das potenzielle Auftreten verschiedener IE-spezifischer Fehler verhindert.
*/
.thrColElsHdr #mainContent {
	margin: 0 12em 0 12em; /* Der rechte Rand kann in Gevierten (ems) oder Pixel angegeben werden. Durch ihn entsteht der Abstand am rechten Seitenrand. */
	color: #333;
} 
.thrColElsHdr #footer { 
	padding: 0 10px; /* Diese Auff�llung entspricht der linksb�ndigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
	background:#FFF;
		border-top:1px solid green;
} 
.thrColElsHdr #footer p {
	margin: 0; /* Wenn Sie die R�nder des ersten Elements in der Fu�zeile auf 0 einstellen, k�nnen Sie unerwartete Abst�nde zwischen divs vermeiden. */
	padding: 10px 0; /* Durch die Verwendung der Auff�llung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
}

/* Verschiedene wieder verwertbare Klassen */
.fltrt { /* Mit dieser Klasse k�nnen Sie ein Element auf der Seite nach rechts flie�en lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse k�nnen Sie ein Element auf der Seite nach links flie�en lassen. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schlie�en eines Containers sein, der wiederum einen vollst�ndigen Float enthalten sollte. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
	color: #FFF;
}
weis {
	color: #FFF;
}
.thrColElsHdr #container #header table tr td p {
	color: #FFF;
}
.thrColElsHdr #container #header table tr td p {
	font-weight: bold;
}
.thrColElsHdr #container #header table tr td h3 {
	color: #FFF;
}
.thrColElsHdr #container #header table tr td h2 {
	color: #FFF;
}
.thrColElsHdr #container #sidebar1 h3 .buttonscontainer .buttons h6 h8 {
	font-size: x-small;
}
.thrColElsHdr #container #sidebar1 h3 .buttonscontainer .buttons h6 {
	font-size: x-small;
}
.klein {
	font-size: small;
}
.kleiner {
	font-size: xx-small;
	font-family:Tahoma, Geneva, sans-serif;
}
.thrColElsHdr #container #sidebar1 table tr td {
	font-size: x-small;
}
--> 
</style><!--[if IE]>
<style type="text/css"> 
/* F�gen Sie CSS-Korrekturen f�r alle IE-Versionen in diesen bedingten Kommentar ein. */
.thrColElsHdr #sidebar1, .thrColElsHdr #sidebar2 { padding-top: 30px; }
.thrColElsHdr #mainContent { zoom: 1; padding-top: 15px; }
/* Mit der obigen propriet�ren Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
</style>
<![endif]-->


<!--Smilies-->

<script language="JavaScript">
<!--
function SmilieEinfuegen(Smilie)
{
    document.Formular.mache_gerade.value += Smilie+" ";
    document.Formular.mache_gerade.focus();
}
//-->
</script>
<script language="JavaScript">
<!--
function SmilieEinfuegena(Smilie)
{
    document.maus.blogchat.value += Smilie+" ";
    document.maus.blogchat.focus();
}
//-->
</script>
<style>
#menucontainer11 {
width:200px;
margin:5px;
line-height:45px;
color:#ffffff;
}
#menucontainer11 {
float:left;
}
.menutitle11
{
margin:-5px -5px 5px -5px;
text-align:center;
font-weight:bold;
border-bottom:1px solid green;
font-size:9px;
color:#000;
}
</style>

<style>
#menucontainer12 {
width:200px;
margin:5px;
color:#000;
}
.menutitle12
{
line-height:30px;
margin:-5px -5px 5px -5px;
padding:2px;
text-align:center;
font-weight:bold;
border-bottom:1px solid green;
font-size:9px;
color:#000;
}
</style>

<style>
#menucontainer13 {
width:140px;
margin:5px;
color:#ffffff;
}
#menucontainer13 {
float:left;
}
.menutitle13
{
	line-height:30px;
margin:-5px -5px 5px -5px;
padding:2px;
text-align:center;
font-weight:bold;
border-bottom:1px solid green;
font-size:9px;
color:#000;
}
</style>
<style type="text/css">

.such_button {
background-color:green;
color:#FFF; 
border:1px solid #060;
text-decoration:none; 
width: 84px;
height: 20px;
}
.fett {
	font-weight: bold;
}
.fett {
	font-weight: bold;
}
.fett {
	font-weight: bold;
}
.fett {
	font-weight: bold;
}
.fett {
	font-weight: bold;
}
</style>
<style>
.mysel {
border: 1px solid #CCC;

}
</style>
<script type="text/javascript">
function oeffnefenster (url) {
 fenster = window.open(url, "fenster1", "width=775,height=400,status=yes,scrollbars=yes,resizable=yes");
 fenster.focus();
}
</script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />




</head>
<body class="thrColElsHdr">

<div id="container">
  <div id="header">
  
<table  style="background:url(../banner1.png)"  width="1150" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="750" align="right">&nbsp;</td>
    <td width="109" align="right">
    
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#"><strong>Einstellung</strong></a>
        <ul>

      <li><a href="bilderhochladen.php">Bilder hochladen</a></li>
      <li><a href="einstellungen.php">Privatsph&auml;re</a></li>
      <li><a href="account.php">Mein Account</a></li>
      <li><a href="treffendaten.php"><img src="../event16.gif" width="16" height="16" border="0" />Meetings</a></li>
        </ul>
      </li>

</ul>

    </td>
    
    <td width="280"><div class="buttonscontaine">
        <div class="button">
       
         <a href="meineseite.php">*Wael* *Habaya*</a>      
        <a href="einfache_suche.php">suche</a> 
        <a href="kontakt.php" >hilfe?</a>
        <a href="/profilmitdiashow.php?doLogout=true&id=1830" target="_parent">abmelden</a> </div>

      </div></td>
  </tr>
  <tr>
    <td>      <br></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>

    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td align="center">      <div class="buttonscx">
        <div class="buttx">
       
        <a href="start.dwt.php">Start</a>       
        <a href="nachrichteneingang.php">Mails</a> 
        <a href="meine_freunde.php" >Freunde</a>
        <a href="meetings.php">Meetings</a> </div>

      </div>
      
      </td>
    
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="1"></td>
  </tr>
  <tr>

    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td></td>
  </tr>

  <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td></td>

  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>

    <td></td>
  </tr>
    </table>


    <!-- end #header -->
  </div>
  
  <!-- Wenn Billiard php �ffnet dann die Sidbar weg machen!-->
  
   
      
  <div id="sidebar1">


<table width="170" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td> </td>
  </tr>
  <tr>
    <td>    </td>
  </tr>

</table>


    <a href="karte.PHP?height=400&width=950" class="thickbox" rel="thickbox_slide1" target="_blank" style="text-decoration: none;">
<font color="#000000" size="1"><strong>Mitglieder finden?</strong> klick hier!</font>
</a>
    <div align="left">
      
      <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="186" height="250">
      <param name="movie" value="../libannon.swf" />
      <param name="quality" value="high" />

      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und h�her auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht w�nschen, dass die Benutzer diese Aufforderung sehen, l�schen Sie dieses Tag. -->
      <param name="expressinstall" value="../Scripts/expressInstall.swf" />
      <!-- Das n�chste Objekt-Tag ist f�r Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="../libannon.swf" width="186" height="250">
        <!--<![endif]-->
        <param name="quality" value="high" />

        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="../Scripts/expressInstall.swf" />
        <!-- Im Browser wird f�r Benutzer von Flash Player 6.0 und �lteren Versionen der folgende alternative Inhalt angezeigt. -->
        <div>
          <h4>F&uuml;r den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
        </div>

        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
</div>
    <p>
          </p>
    <p><br /> 
      
      <div class="buttonscontainer">
  <div class="buttons">

    <p>&nbsp;</p>
    <p>&nbsp;</p> 
       <p><a href="games.php" ><img src="../spiele.JPG" width="28" height="22" border="0"> Spiele</a>
         <a href="http://www.sawtelghad.com.au/streaminglinks/listen_8000_windowsm.asx" target="_blank" >  <img src="../radioseleb.JPG" width="28" height="33" border="0"> Radio</a>  
         
                  <a href="chatblogpop.PHP?height=400&width=700" class="thickbox" rel="thickbox_slide1" target="_blank">  <img src="../blog.JPG" width="30" height="30" border="0"> Chatblog</a> 
</p>

  </div>

</div>
      
      
    </p>
    <div align="center">
      
      <div id="menucontainer12">
      <div align="center">
      
      <br />

<!--
        <img src="../neueste_aktiv1.png" width="160" height="20" />
        -->
       </div>





 <!--<a href="games.php">Spiele</a>-->

  </div>
  
  <br />
 
<div id="menucontainer12">
      <div align="center">

        <img src="../public1.png" width="160" height="20" /></div>


<iframe  align="left" src ="chatblogsite.php" width="190px" scrolling="no" frameborder="0" height="1200px" > </iframe>
  </div>

<p><br />  
  </p>
<p>&nbsp;</p>
<p><br />
</p>
</div> 
      
      
      
      
      



  <!-- end #sidebar1 --></div>
  
  
  
  
  <div id="sidebar2"> 

 <div id="menucontainer13">

   <img src="../gerade_online1.png" width="160" height="20" /></div>
<table width="160"  align="left" border="0">
  <tr>
 <td width="154" style="text-align: center">
 <div align="center">
 <iframe  align="left" src ="regristrierteuser.php" width="170px" scrolling="no" frameborder="0" height="180px" > </iframe>
 </div>
  <div id="menucontainer13">

 
    <img src="../registrierte_Mitglieder1.png" width="160" height="20" /></div>

<div align="left">
<iframe align="center" src ="onlineuser.php" width="170px" scrolling="no" frameborder="0" height="180px"> </iframe>
</div>

<br />
<font color="#000000" size="+2">Neu hier...</font>
<table width="200" border="0">
        <tr>
          <td width="45"><a href='profilmitdiashow.php?id=3261' ><img class="links" src='kleinebilder/326119images.jpg'  alt='Nabil ******* ' border='0' /></a></td>
          <td width="145"><div align="left"><font color = '#0000' size = '-2'>Nabil  ******* </font></div></td>

        </tr>
        <tr>
          <td><a href='profilmitdiashow.php?id=3259' ><img class="links" src='kleinebilder/325915habibi.jpg'  alt='AymenA...' border='0' /></a></td>
          <td><div align="left"><font color = '#0000' size = '-2'>Aymen A...</font></div></td>
        </tr>
        <tr>
          <td><a href='profilmitdiashow.php?id=3251'><img class="links" src='kleinebilder/325118P1000747.JPG'  alt='HamudiEl Mouss' border='0' /></a></td>
          <td><div align="left"><font color = '#0000' size = '-2'>Hamudi El Mouss</font></div></td>

        </tr>
        <tr>
          <td><a href='profilmitdiashow.php?id=3250' ><img class="links" src='kleinebilder/325013ibo.jpg'  alt='babyfacehabib' border='0' /></a></td>
          <td><div align="left"><font color = '#0000' size = '-2'>babyface habib</font></div></td>
        </tr>
      </table>
      
      
     <span style="text-align: center"></span><br/>

     
   </p> 

   </td>  
  </tr>

</table>  


<p>&nbsp;</p>


  <!-- end #sidebar2 --></div>
  
    
  
  <div id="mainContent">


  <!-- InstanceBeginEditable name="bearbeitbar" -->
 <!--hier muss select from DATABASE stehen!!!-->


<!-- ENDE VOM QUELLCODE DES INSERT DER DATENBANK! -->

<!--Zuordnung der SMILIES -->

<br />



<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0"><span style="color:#000">Gilbert's Profil</span></li>
      
       <li class="TabbedPanelsTab" tabindex="0"><span style="color:#000">Fotoalbum</span></li>

     <li class="TabbedPanelsTab" tabindex="0"><span style="color:#000">Freunde</span></li>
    <li class="TabbedPanelsTab" tabindex="0"><span style="color:#000">G&auml;stebuch</span></li>
        
	</ul>
  <div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">



<!--*************************ANZEIGE PROFIL TEILWEISE SICHTBAR!!*****************************************--->





<!--TESTEN OB ER GESPERRT WURDE!-->

          
       
<form id="form1" name="form1" method="get" action="">
  <table class="profil" width="737" border="0" cellpadding="2" cellspacing="3">
    <tr>
      <td colspan="3" align="left" background="../px160px20.png"><strong><span style="color: #000">Allgemein</span></strong></td>
      <td width="53%"><marquee scrollamount="3" und="und" scrolldelay="1">

              </marquee></td>
      <td width="2%"></td>
    </tr>
    <tr>
      <td></td>
      <td width="17%"></td>
      <td width="9%"></td>
      <td width="53%" rowspan = "15" >

          
          
          
      
        <div id="container_right">
          <div class="thumbs">
            <em class='default'><img src='img/183012Mr.Hachem2.jpg'    /></em>            <a class='gallery slidea' href='#nogo'><img src='img/183012Mr.Hachem2.jpg'  width='90' /><em><img src='img/183012Mr.Hachem2.jpg'   /></em></a>                                   
           
  
         
            
            </div>
          </div>
          
 
          
          
      </td>
    </tr>
    <tr>

      <td width="17%">Name:</td>
      <td colspan="2"><strong>Gilbert</strong> <strong>H.</strong>            </td>
      <td width="2%">&nbsp;</td>
      </tr>
    <tr>

      <td>Mitglied seit:</td>

      <td><strong>28.10.2009</strong></td>
      <td>1830</td>
      <td></td>
    </tr>
    <tr>
      <td>Letztes Update:</td>
      <td>

      letzte Woche      </td>
      <td>        </td>
    </tr>
    <tr>
      <td>Geschlecht:</td>
      <td><strong>männlich</strong></td>
      <td>        </td>

    </tr>
    <tr>
      <td>Geburtsdatum:</td>
      <td>0         -         1993</td>
      <td>
            </td>
    </tr>
    <tr>

      <td>Heimatland:</td>
      <td>Libanon</td>
      <td>        </td>
    </tr>
    <tr>
      <td>Heimatstadt:</td>
      <td colspan="2">-        <a href="gebiet.php?gebiet="><font color='green'>

                </font></a><a href="heimatstadt.php?heimatstadt=Debel"><font color='green'>
        (Debel)
        </font></a></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Familienstad:</td>
      <td>-</td>

      
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Suche nach:</td>
      <td>-</td>
      <td>&nbsp;</td>
    </tr>
    <tr>

      <td>Relegion:</td>
      <td>Christentum</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>

    </tr>
    <tr>
      <td colspan="3" align="left" background="../px160px20.png"><strong><span style="color: #000">Kontakt</span></strong></td>
      <td>&nbsp;</td>
      <td width="1%">&nbsp;</td>
    </tr>
    <tr>
      <td >E-Mail:</td>

      <td>&nbsp;</td>
      <td>&nbsp;   </td>

    </tr>
    <tr>
      <td>Land:</td>
      <td>-</td>
      <td>&nbsp;</td>

    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Bundesland:</td>

      <td colspan="2">        <a href="bundesland.php?selbe_gebiet=Nordrhein-Westfalen"><font color='green'>
        Nordrhein-Westfalen        </font></a></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Stadt/Dorf:</td>
      <td>        <a href="ort.php?selbe_ort=Düsseldorf"><font color='green'>

        Düsseldorf        </font></a></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>

    <tr>
      <td colspan="3" align="left" background="../px160px20.png" ><strong><span style="color: #000">Einzelheiten</span></strong></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Beruf:</td>
      <td>Schüler(in)</td>

      <td>&nbsp;</td>
      <td  ></td>
    </tr>
    <tr>
      <td>Figurtyp:</td>
      <td>-</td>
      <td> </td>

      <td  align="center" >
  
     
     
        </td>
    </tr>
    <tr>
      <td>Raucher:</td>
      <td>  -</td>
      <td align="center" >

   
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Alkohol:</td>
      <td colspan = "2">-</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>

    </tr>
    <tr>
      <td>Kinder:</td>
      <td><a href="gal.PHP?height=750&amp;width=700&amp;id=1830" class="thickbox" rel="thickbox_slide1"></a>
      -      </td>
      <td >&nbsp;</td>
      <td >&nbsp;</td>
    </tr>

    <tr>
      <td>Einkommen:</td>
      <td>-</td>
      <td>&nbsp;</td>
       <td>&nbsp;</td>
    </tr>
    <tr>
      <td >&nbsp;</td>

      <td colspan="" >&nbsp;</td>
      <td >&nbsp;</td>
      <td rowspan="3">

                    <a href="popup_mail_query.PHP?height=400&amp;width=700&amp;id=1830" class="thickbox" rel="thickbox_slide1">
		  
         &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <img src="../message.png" width="25" height="19" border="0" /> Nachricht schicken </a>
          
          
          <a href="newfriend_query.PHP?height=350&amp;width=700&amp;id=1830" class="thickbox" rel="thickbox_slide1">

		  
          <img src="../friend_03.jpg" width="24" height="19" border="0" />  als Freund hinzuf&uuml;gen </a>
           
          
       
          
          
 
             <p>
                              </p>
             <p><a href="ignore.PHP?height=250&amp;width=500&amp;id=1830&amp;name=Gilbert" class="thickbox" rel="thickbox_slide1">
			 
           &nbsp;&nbsp; &nbsp;  &nbsp; &nbsp; <img src="../ignore_01.jpg" width="20" height="19" /> 
			 
			  ignorieren </a></p>

             
               
          
      
      </td>
    </tr>
    <tr>
      <td colspan="3" align="left" background="../px160px20.png"><strong><span style="color: #000">Statistik</span></strong></td>
      <td >&nbsp;</td>
      <td >&nbsp;</td>
      <td >&nbsp;</td>
    </tr>

    <tr>
      <td>Account Typ:</td>
      <td>Normal Account</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Netzwerk:</td>

      <td>-</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Freunde:</td>
      <td>
      1  
      </td>

      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Gaestebuch:</td>
      <td>
      0 
      </td>
      <td>&nbsp;</td>

      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>

      <td></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  
  <p>&nbsp;</p>
</form>
















</div>

<div class="TabbedPanelsContent">

      				  
                  






<div align="center">

<table width="600" border="0"><!--�U�ERE TABELLE--->
  <tr>
    <td>
    
    
<table cellpadding="10" cellspacing="5"><!--INNERE TABELLE--->
  <tr>

           




  </tr>

</table>



</td>
  </tr>
</table>

					
		</div>
        							
				


</div>



<div class="TabbedPanelsContent">

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

#menucontainer1{
border:1px solid #999;
background-color:#CCC;
width:100px;
padding:5px;
margin:5px;
line-height:30px;
text-align:center;
color:#000;
font-size:9px;
}
#menucontainer1 {
float:left;
}

#menucontainer1 a{ color: #000000; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<p>
  





    
    
    
    
















 

        


    
    
    
<div align="center">   

<table width="600" border="0">

  <tr>
    <td width="132">
    
         <a href='profilmitdiashow.php?id=1889' >
	<img src='kleinebilder/188920bat160ca.jpg'  border = 0 /></a>

    
    </td>
    <td width="239">Nickname: Wael  Haddad </td>
    <td width="104">&nbsp;</td>
    <td width="107">

    
    <a href="popup_mail_query.PHP?height=400&width=700&id=1889" class="thickbox" rel="thickbox_slide1">
    <img src="../message.png" width="25" height="19" border = "0" />
    </a>
    
    <a href="newfriend_query.PHP?height=350&width=700&id=1889" class="thickbox" rel="thickbox_slide1">
    <img src="../friend_03.jpg" width="24" height="19" border = "0" />
    </a>
    
       
    </td>
  </tr>
</table>

     </div> 


    


</body>
</html>
</div>

    <div class="TabbedPanelsContent">      
     
        
         <br />
      
      <table width="700" border="0">
        <tr>
          <td>
                    
                    
		<div class='buttonscontaine'>

		<div class='buttoe'>
			<a href="geintrag.PHP?height=175&amp;width=700" class="thickbox" rel="thickbox_slide1">Eintragen</a>   
		</div>
		</div>

              
                      </td>
          <td>&nbsp;</td>
        </tr>
        <tr>

          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <br />
      
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>


<style type="text/css">
<!--
.fett {
	font-weight: bold;
}
-->
</style>
<style type="text/css">
table{font-size:12px;
color:#000;}
</style>

</head>
<body>
<p>
 



  
 

<font color="#000000" size="-2">



</p>
<p>&nbsp;</p>

</body><span colo
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>
</body>
</html>      <p>&nbsp;</p>


    </div>
  </div>

</div>






   




   
  <script type="text/javascript">
<!--

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
  </script>
  
    
  
    
  
  
  <!-- InstanceEndEditable -->
<!-- end #mainContent -->









</div>
	<!-- Dieses clear-Element sollte direkt auf das #mainContent-div folgen, um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen. --><br class="clearfloat" />
   <div id="footer">
     <table style="background:url(../footer_bg.png)"  width="1149" border="0">
      <tr>
        <td width="307" height="24">&nbsp;</td>

        <td width="489"><div class="buttonscon">
	<div class="but">
	<a href="seelebteam.php" >Team</a>
	<a href="impressum.php">Impressum</a>
    <a href="kontakt.php">Kontakt</a>
    <a href="faq.php">FAQ<span class="kleinn">(h&auml;ufig gestellte fragen</span>)</a>

    <a href="banner_in.php">Banner</a>
	<a href="agb_in.php">AGB</a>
</div>
</div>

</td>
        <td width="301">&nbsp;</td>
      </tr>
    </table>
     <!-- end #footer -->

  </div>
<!-- end #container --></div>

<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
//-->
</script>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {enableAnimation:false});
swfobject.registerObject("FlashID");
//-->
</script>


</body>
<!-- InstanceEnd --></html>

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild durch Bild ersetzten! (a:hover)	Prof. Awesome	CSS	11	16.03.2011 14:33
Bild als Active makieren	siriussmarty	CSS	0	08.07.2010 14:37
Bild über Bild legen mit position: relative (IE6 Problem)	naitsab	CSS	3	09.06.2009 13:20
Bild mit Rahmen aus Bild	Holger (HMR)	CSS	3	21.05.2008 12:55
Verflixter Rahmen um ein Bild	Webelix	CSS	6	22.07.2007 12:32