ich habe vor eine Startseite für eine Homepage mit PHP zu erstellen. Zu ersteienma lhabe ich mich hingesetzt und mir einen Aufbau überlegt. Dabei ist folgendes herausgekommen:
Grundsätzlich strebe ich so etwas an:

Nachdem das nun soweit stand hab ich das ganze nochmal etwas ausgeschmückt, dass es schon eher nach etwas aussieht:

Farb-Erklärung:
Schwarz: ganz oben (header-bereich) soll als hintergrund dieses Bild haben: (header.png ->
) und ebenfalls Flaggen für dei Sprachauswahl. [COLOR="Green"]Grün:[/COLOR] Linke Seite: Navigation (selbsterklärend)
[COLOR="Red"]Rot:[/COLOR] Trennender Balken zwischen Navi und Hauptseite. (balken.png ->
)[COLOR="Blue"]Blau:[/COLOR] Mitte, Oben: Eine Grafik mit Willkommens-Gruß: (willkommen.png ->
)[COLOR="Orange"]Orange:[/COLOR] Mitte, Links: Nur Text
[COLOR="YellowGreen"]Hell Grün:[/COLOR] Mitte Rechts: Nur Text
[COLOR="Purple"]Lila:[/COLOR] Mitte, Mitte: Grafik mit zwei Buttons auf der Grafik, auf dem Bild als Gelbe abgerundete Rechtecke zu sehen. (mitte.png ->

[COLOR="Silver"]Grau:[/COLOR] Unten, links: Nur Text
[COLOR="Sienna"]Braun:[/COLOR] Unten, rechts: Text und Bilder.
Was ich nicht hinbekomme:
Schwarzer bereich: Flaggen ja aber dahinter noch das Bild, nein.
Grüner bereich: Navigationselemente ja, das das ganze an der linken seite steht geht aber irgendwie nicht.
Lila Grafik: Grafik erstellen, kein Problem, aber wi mach ich es, dass in der grafik zwei andere grafiken sind, die man anklicken kann um zu zwei verschieden seiten zu gelangen, bzw zwei versch. popups zu öffnen ?
Ansonsten könnt ihr ja mal selber sehen wie weit ich mit dem Seitenaufbau bin unter:
[url="http://beispielseite.co.de"]http://beispielseite.co.de[/url]
Nun nachdem das dann soweit geplant war, gab es noch zwei sachen die ich haben wollte.
Und zwar gibt es eine Registrier- und Login-Funktion.
Man könnte zwar einfach 2 Seiten erstellen, aber wenn man mehrere verschiedene "Server" hat wir das zu kompliziert. Man soll also vorher erstmal im popup auswählen können, auf welchem server man sich einloggen/registrieren will.
Skizze dazu erstmal fürs registrieren:

Erklärung:
Rund herum soll ein Rahmen angezeigt werden. Wie es ungefähr aussieht seht ihr auf der seite: http://beispielseite.co.de wenn ihr auf "Login" klickt. Leider ist es da nicht ganz fertig und ich weiß auch nicht wie ich es hinbekomme das der Rahmen auch an den seiten gezogen wird.
Es gibt drei auswahlmöglichkeiten, hier durch drei verschiedenfarbige Kästen angedeutet. Jede von den auswahlmöglichkeiten bekommt ein kleines Bild als Vorschau so zu sagen, und eine kurze Beschreibung unten drunter. Dann ein Auswahlfeld zum auswählen.
Unter den drei möglichkeiten dann zum eintragen: Name, E-Mail und Passwort und eine Checkbox zum Regeln akzeptieren.
Für den Rahmen hab ich drei Grafiken:
Oben:
oben.gif (
)(Eigentlich mitte, bekomm ich aber nicht hin) :
mitte.gif (
)Unten:
unten.gif (
)Und dann eben rechts in der Ecke den Anmelden button, der das ganze abschickt.
Leider konnte ich von diesem Popup noch überhauptnichts fertigstellen
Dann das Login-Popup:

Hab ich größtenteils schon so hinbekommen, nur eben auch hier das Problem mit dem Rand ...
Und dann bei beiden Popups noch ein Problem:
Oben ist ja schon so ein Feld mit nem X vorgesehn .. also das hier:
.. da sollte sich das ganze auch schließen wenn man dort drauf klickt. Leider funktioniert das auch nicht... Außerdem schiebt das popup-Fenster den rest der seite nach unten, obwohl das bei einem popup nicht sein sollte
Ach ja noch was ^^ Ihr seht es bestimmt selbst, die lila grafik in der mitte überdeckt rechts den text, der Text sollte aber eigentlich unten drunter sein, so wie auf den skizzen
Wenns helfen sollte: Hier noch die index.php:
- Code: Alles auswählen
<?php
session_start();
include "antet.php";
include "func.php";
$gen_stats1=gen_stats_1(120, 1);
$gen_stats2=gen_stats_2(120, 1);
$gen_stats3=gen_stats_3(120, 1);
//Popup Einloggen/Registrieren
$logincode='<div id="ce"><div class="l0"><map name="close"><area shape=rect coords="311,10,330,29" href="#" onClick="Close()" title="Schließen"></map><img src="sww1.gif" width="430" height="31" border="0" valign="top" usemap="#close"><img class="l1" src="auswahl.png" width="266" height="36" border="0"> <div class="l2"><a href="'.$serverurl2.'/login.php"><img src="auswahl1.png" width="430" height="51" border="0" alt=""></a><span class="l3"><table cellspacing="0" cellpadding="0" class="f10"><tr><td class="c0 t">Benutzer:</td><td width="50" class="c2 b r7">'.$gen_stats2[0][0].'</td></tr><tr><td class="c0 t">Gerade Aktiv:</td><td class="c2 b r7">'.$gen_stats2[2][0].'</td></tr></table><a href="'.$serverurl2.'/login.php" class="f10">» Einloggen </a></span></div></a> <div class="l2"><a href="'.$serverurl3.'/login.php"><img src="auswahl2.png" width="430" height="50" border="0" alt=""></a><span class="l3"><table cellspacing="0" cellpadding="0" class="f10"><tr><td class="c0 t">Benutzer:</td><td width="50" class="c2 b r7">'.$gen_stats3[0][0].'</td></tr><tr><td class="c0 t">Gerade Aktiv:</td><td class="c2 b r7">'.$gen_stats3[2][0].'</td></tr></table><a href="'.$serverurl3.'/login.php" class="f10">» Einloggen </a></span></div></a> <img src="sww3.gif" width="430" height="11" border="0"></div></div>';
$registratiecode='<div id="ce"><div class="l0"><map name="close"><area shape=rect coords="311,10,330,29" href="#" onClick="Close()" title="Schließen"></map><img src="sww1.gif" width="430" height="31" border="0" valign="top" usemap="#close"><img class="l1" src="auswahl.png" width="266" height="36" border="0"> <div class="l2"><a href="'.$serverurl2.'/anmelden.php"><img src="auswahl1.png" width="430" height="51" border="0" alt=""></a><span class="l3"><table cellspacing="0" cellpadding="0" class="f10"><tr><td class="c0 t">Benutzer:</td><td width="50" class="c2 b r7">'.$gen_stats2[0][0].'</td></tr><tr><td class="c0 t">Gerade Aktiv:</td><td class="c2 b r7">'.$gen_stats2[2][0].'</td></tr></table><a href="'.$serverurl2.'/anmelden.php" class="f10">» Anmelden </a></span></div> <div class="l2"><a href="'.$serverurl3.'/anmelden.php"><img src="auswahl2.png" width="430" height="50" border="0" alt=""></a><span class="l3"><table cellspacing="0" cellpadding="0" class="f10"><tr><td class="c0 t">Benutzer:</td><td width="50" class="c2 b r7">'.$gen_stats3[0][0].'</td></tr><tr><td class="c0 t">Gerade Aktiv:</td><td class="c2 b r7">'.$gen_stats3[2][0].'</td></tr></table><a href="'.$serverurl3.'/anmelden.php" class="f10">» Anmelden </a></span></div><img src="sww3.gif" width="430" height="11" border="0"></div></div>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testseite</title>
<meta name="content-language" content="en">
<link rel="shortcut icon" href="img/favicon.ico"/>
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="include/script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="unx.css">
</head>
<body>
<!-- Einloggen Mitte! -->
<p style="position:absolute; width:100px; height:100px; z-index:2; left: 345px; top: 280px;"><a href="#" id="link3" onClick="Serverwahl(1)"><img src="mitte.png" width="766" height="131" border="0" alt="Login"></a></p>
<!-- Oberer Balken (Länder) -->
<div id="ltop1" align="left">
<div id="ltime"><br />
<a href="http://beispielseite.co.de"><img src="button_de.gif" title="Deutschland"></a>
<a href="http://beispielseite.co.de"><img src="button_en.gif" title="England"></a>
<a href="http://beispielseite.co.de"><img src="button_cz.gif" title="Tschechien"></a>
<a href="http://beispielseite.co.de"><img src="button_dk.gif" title="Dänemark"></a>
<a href="http://beispielseite.co.de"><img src="button_fi.gif" title="Finnland"></a>
<a href="http://beispielseite.co.de"><img src="button_fr.gif" title="Frankreich"></a></div></div>
</div>
<!-- Login/Anmelden Popupfenster -->
<div class="div3">
<script type="text/javascript">
<!--
function Serverwahl(i)
{
myElement = document.getElementById("ce");
if(myElement != null)
{
if(i == 1){var new_server = '<?= $logincode; ?>';}
else if(i == 2){var new_server = '<?= $registratiecode; ?>';}
}
myElement.innerHTML=new_server;
}
-->
</script>
<div id="ce"></div>
</div>
<!-- Rest -->
<div id="lmidall">
<div id="lmidlc">
<!-- Navigation links -->
<div id="lleft">
<a href="<?= $weburl; ?>/index.php"><img class="logo" src="logo.gif"></a>
<table id="navi_table" cellspacing="0" cellpadding="0">
<tr>
<td class="menu">
<a href="<?= $weburl; ?>/index.php">Startseite</a>
<a href="<?= $weburl; ?>/impressum.php">Impressum</a>
<a href="#" id="link1" onClick="Serverwahl(1)">Login</a>
<a href="#" id="link2" onClick="Serverwahl(2)"><span class="c5">Anmelden</span></a>
<br /><br />
<a href="http://beispielseite.co.de" target="_blank" >Forum</a>
</td>
</tr>
</table>
</div>
<div id="lmid1">
<div id="lmid3">
<!-- Mitte-->
<div align="center"><img src="willkommen.png" width="765" height="54"></div>
<table width="100%">
<tr valign="top">
<td colspan="3" width="60%">
<h5>Was bietet dir diese Seite?</h5>
<p class="f9"><font="arial"><strong>Text</strong> Text Text Text Text Text Text Text Text <br />
Text Text Text Text Text Text Text Text Text <br />
Text Text Text Text Text Text Text Text Text Text <br />
<font size="3">» Text Text Text</font> <font size="1" color="#aeaeae">(Text)</font>
<br /><br /></font>
<?= $lang['wat_is_travian_2']; ?>
</p>
<h5>Aktuelles</h5>
<li class="f9">ABCDEFGHIJKLMNOPQRSTUVWXYZ <br />spielbar.</li>
<li class="f9">Text Text 2 Text<br />0815 Text.</li>
<li class="f9">Heute ... <br />Mehr Text.</li>
<!--<li class="f9"></li>-->
</td>
<td width="40%" valign="top">
<p>So viele Besucher waren schon hier:</p>
<p class="p2">
<table width="100%" cellspacing="0" cellpadding="1" class="f9">
<tr>
<td class="s7">Besucher:</td>
<td><b><? echo ($gen_stats2[0][0]+$gen_stats3[0][0]);?></b></td>
</tr>
<tr>
<td class="s7">Anegmeldet:</td>
<td><b><? echo ($gen_stats2[1][0]+$gen_stats3[1][0]);?></b></td>
</tr>
<tr>
<td class="s7">Momentan Online:</td>
<td><b><? echo ($gen_stats2[2][0]+$gen_stats3[2][0]);?></b></td>
</tr>
</table>
<p>
<table width="100%" cellspacing="0" cellpadding="0" class="f10">
<tr>
<td>
<h5>Screenshots</h5>
<p>Hier werden screenshots folgen ;) </p>
</td>
</tr>
</table>
</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Das Problem ist ich kann kein CSS daher weiß ich nicht wie ich weiter machen soll ...
Ich danke schonmal im Voraus und freue mich auf euere Hilfe
Grüße
KillaKoray
