Tabelle für Gästebuch anpassen

Unregistriert

Hallo ihr,

ich habe eine Frage.
Für eine Website habe ich ein Gästebuchscript im Internet gefunden, dass man frei benutzen darf.
Ich hab die CSS Datei schon meinen Wünschen entsprechend angepasst.
Allerdings gefällt mir das Formular nicht vom Aussehen.

Es sieht so aus:

PHP

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onSite G&auml;stebuch</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<a name="top" id="top"></a>
<div id="whole">
    <?php echo $obj_gb->getHtmlMessage(); ?>
    <form action="index.php" method="post" name="form_entry" id="form_entry">
    <input type="hidden" name="action" value="1" />
        <table class="newentry" align="center" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <th class="headline"><big><strong>Neuen Eintrag verfassen</strong></big></th>
          </tr>
          <tr>
            <td class="entry"><table width="100%">
                <tr>
                  <td align="right">Name:</td>
                  <td><input class="input" type="text" size="30" name="name"  value="<?php echo $obj_gb->getName(); ?>" maxlength="30" /></td>
                </tr>
                <tr>
                  <td align="right">E-Mail:</td>
                  <td><input class="input" type="text" size="30" name="email" value="<?php echo $obj_gb->getEmail(); ?>" maxlength="30" /></td>
                </tr>
                <tr>
                  <td align="right">Homepage:</td>
                  <td><input class="input" type="text" size="30" name="hp" value="<?php echo $obj_gb->getHp(); ?>" maxlength="40" /></td>
                </tr>
                <tr>
                  <td colspan="2">&nbsp;</td>
                </tr>
                <tr>
                  <td align="center" colspan="2"><table align="center" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td class="nospan"><input type="radio" name="icon" value="icon1" /></td>
                        <td class="nospan"><img src="images/mood/icon1.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon2" /></td>
                        <td class="nospan"><img src="images/mood/icon2.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon3" /></td>
                        <td class="nospan"><img src="images/mood/icon3.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon4" /></td>
                        <td class="nospan"><img src="images/mood/icon4.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon5" /></td>
                        <td class="nospan"><img src="images/mood/icon5.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon6" /></td>
                        <td class="nospan"><img src="images/mood/icon6.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon7" /></td>
                        <td class="nospan"><img src="images/mood/icon7.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                      </tr>


                      <tr>
                        <td class="nospan"><input type="radio" name="icon" value="icon8" /></td>
                        <td class="nospan"><img src="images/mood/icon8.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon9" /></td>
                        <td class="nospan"><img src="images/mood/icon9.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon10" /></td>
                        <td class="nospan"><img src="images/mood/icon10.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon11" /></td>
                        <td class="nospan"><img src="images/mood/icon11.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon12" /></td>
                        <td class="nospan"><img src="images/mood/icon12.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon13" /></td>
                        <td class="nospan"><img src="images/mood/icon13.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                        <td class="nospan"><input type="radio" name="icon" value="icon14" /></td>
                        <td class="nospan"><img src="images/mood/icon14.gif" alt="icon" width="15" height="15" /></td>
                        <td>&nbsp;</td>
                      </tr>
                    </table></td>
                </tr>
                <tr>
                  <td colspan="2">&nbsp;</td>
                </tr>
                <tr>
                  <td align="right" valign="top">Kommentar:</td>
                  <td><textarea name="text" cols="40" rows="8"><?php echo $obj_gb->getText(); ?></textarea></td>
                </tr>
                <tr valign="top">
                  <td colspan="2">&nbsp;</td>
                </tr>
                <tr valign="top">
                  <td><p>Um SPAM zu verhindern geben Sie bitte <br />
                      die Zeichenfolge ohne
                      Leerstellen in das <br />
                      Formularfeld ein:</p></td>
                  <td><?php echo $obj_gb->getCaptchaCode(); ?></td>
                </tr>
                <tr>
                  <td colspan="2">&nbsp;</td>
                </tr>
                <tr>
                  <td colspan="2" align="center"><input name="Submit" type="image" src="images/admin/eintragen.jpg" alt="Eintragen" /></td>
                </tr>
              </table></td>
          </tr>
        </table>
  </form>
      <br clear="all" />
	  <div class="navigation"><?php echo $obj_gb->getNavigation(); ?></div>

      <?php while($obj_gb->listEntry()) { ?>

      <table width="100%" cellpadding="0" cellspacing="0" class="comment">
        <tr>
          <th class="left"> <img src="images/mood/<?php echo $obj_gb->getEntryData("icon"); ?>.gif" alt="icon" width="15" height="15" />&nbsp;
            Eintrag Nr. <?php echo $obj_gb->getEntryData("entry_nr"); ?> von

            <?php if($obj_gb->getEntryData("email")){ ?>
        <a href="mailto: <?php echo $obj_gb->getEntryData("email"); ?>">
	            <big><?php echo $obj_gb->getEntryData("name"); ?></big></a>
			<?php }else{ ?>
				<big><?php echo $obj_gb->getEntryData("name"); ?></big>
			<?php } ?>


           &nbsp;vom <?php echo $obj_gb->getEntryData("date"); ?> um <?php echo $obj_gb->getEntryData("time"); ?> Uhr
            <?php if($obj_gb->getEntryData("homepage")){ ?>
            <br />
            <a href="<?php echo $obj_gb->getEntryData("homepage"); ?>" target="_new" rel="nofollow"><?php echo $obj_gb->getEntryData("homepage"); ?></a>
          <?php } ?></th>
          <th class="right"><a href="#top"><img src="images/admin/hoch.jpg" alt="icon" border="0" /></a></th>
        </tr><tr>
          <td class="entry" colspan="2">
            <p><?php echo $obj_gb->getEntryData("text"); ?></p>

    		<?php if($obj_gb->getEntryData("comment")){ ?>
            <p>&nbsp;</p><small><i>
            Kommentar von <?php echo $obj_gb->getEntryData("comment_user"); ?>: <br />
            <hr noshade="noshade" width="40%" align="left" />
            <?php echo $obj_gb->getEntryData("comment"); ?> </i></small></p>
            <?php } ?>

          </td>
      </tr></table>
      <?php } ?>
      <div class="navigation"><?php echo $obj_gb->getNavigation(); ?></div>
      <div id="admin">[ <a href='admin/login.php' target='gb_admin'>Administrator Login</a> ]</div>
</div>
<?php echo $obj_gb->getCopyright(); ?>
</body>
</html>

Alles anzeigen

ich hätte gerne, dass das Formular irgendwie so zentriert wie möglich dargestellt wird und möglichst alles schön untereinander ist. Die Reihe mit den Smilies würde ich gerne nicht mehr haben. Und auch der Spamschutztext sollte nach Möglichkeit unter dem Spamcode zentriert geschrieben stehen.

Kann mir da jemand weiterhelfen? Ich habe schon ein bisschen rumgedoktort aber leider bin ich da mit meinem HTML am Ende ;)...

Viele Grüße,

bazo

MyXoToD

Also die Smiles bekommstr du selbst ohne Hilfe raus. Das würde sogar jemand ohne jegliche HTML-Kenntnisse schaffen.
Ich weiß ja nicht wie breit du das alles haben willst aber ich würde es so machen:

Code

#whole {
    width: 400px; /* Jenachdem wie breit du es gern haben willst */
    margin: 0 auto;
}

Hab das jetzt nicht getestet aber damit sollte das alles zentriert sein Ansonsten kannst du Text oder Inhalte mit "text-align: center;" (css) zentrieren.

Unregistriert

Hey,

ja das mit den Smilies krieg ich hin. Auch die Buttongrafik hab ich mir entfernt...
Wo genau muss dein Code rein?

Vielen Dank schonmal!

threadi

In deine CSS-Datei.

Unregistriert

Jetzt sieht es so aus:

http://ensemble-vocapella.de/gastebuch/

habe noch die Smilies gelöscht. ? Was stimmt da nicht?

threadi

Der HTML-Code des Gästebuchs enthält einen kleinen aber problematischen Fehler:
http://validator.w3.org/check?verbose=…uch%2Findex.php

Unregistriert

Hallo,

jetzt sieht es wieder besser aus.
Gibt es jetzt noch die Möglichkeit alle Eintragsfelder zentriert darzustellen? Also unabhängig davon, was davor steht...?

Und eine zweite Frage: Kann man das einrichten, dass wenn Beiträge gepostet werden, das Fenster einfach immer größer wird und nicht anfängt das scrollen zu erlauben?

Viele Grüße,
bazo

Unregistriert

Zitat von Unregistriert

Gibt es jetzt noch die Möglichkeit alle Eintragsfelder zentriert darzustellen? Also unabhängig davon, was davor steht...?

Ja, gibt es.

Zitat von Unregistriert

Kann man das einrichten, dass wenn Beiträge gepostet werden, das Fenster einfach immer größer wird und nicht anfängt das scrollen zu erlauben?

Ja, kann man.

threadi

Zitat von Unregistriert

Gibt es jetzt noch die Möglichkeit alle Eintragsfelder zentriert darzustellen? Also unabhängig davon, was davor steht...?

Dazu wurde oben schon etwas geschrieben.

Zitat

Und eine zweite Frage: Kann man das einrichten, dass wenn Beiträge gepostet werden, das Fenster einfach immer größer wird und nicht anfängt das scrollen zu erlauben?

Du meinst nicht "Fenster" sondern iframe. Und nein, die iframe-Höhe kann sich nicht dynamisch anpassen.

Unregistriert

Hallo,

vielen Dank für die Antwort threadi!

Den Tip von oben hab ich schon in die CSS Datei eingefügt. Aber die Tabelle sieht immernoch so aus wie vorher...
kann es sein, dass es einen anderen Eintrag gibt, der das blockiert oder so?

hier die css:

Code

@charset "UTF-8";
@media all
{
/**
 * onSite Gstebuch CSS
 *
 *
 * LICENSE: $Licensetext:$
 * 
 * @author     Michael Lmmlein <ml@onsite.org>
 * @copyright  2009  onSite.org
 * @license    $Licenselink:$  $Licensename:$
 * @version    CVS: $Id:$
 */
 
body {
	background-color : #FFFFFF;
	font-family : Times New Roman, Arial, Helvetica, sans-serif;
	font-size : 14px;
	color : #000;
}


#whole {
    width: 400px; /* Jenachdem wie breit du es gern haben willst */
    margin: 0 auto;
}




div#whole {
	background-color : #E0E0E0;
	text-align : left;
	padding: 10px;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #333;
}


th.left {
	background-color : #E8E8E8;
	padding-left : 10px;
	padding-right : 10px;
	padding-top : 5px;
	padding-bottom : 2px;
	text-align : left;
	font-size : 14px;
	border-top-width: 1px;
	border-bottom-width: 5px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999;
	border-bottom-color: #999;
	border-left-color: #999;
}


th.right {
	background-color : #E8E8E8;
	padding-right : 10px;
	text-align : right;
	font-size : 14px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #999;
	border-right-color: #999;
	border-bottom-color: #999;
}


th.headline {
	background-color: #E8E8E8;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 2px;
	text-align: left;
	font-size: 14px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 5px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #999;
}


th.caption {
	background-color : #E8E8E8;
	border-top : none;
	border-left : none;
	border-right : none;
	border-bottom : none;
	padding-left : 10px;
	padding-right : 10px;
	padding-top : 5px;
	padding-bottom : 2px;		
}


div.navigation {
	font-size : 14px;
	background-color : #E8E8E8;
	height: 40px;
	padding: 11px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px solid #999;
}
table.comment {
	margin-top: 5px;
	margin-bottom: 5px;
}




td {
	background-color : #F0F0F0;
	padding-left : 10px;
	padding-right : 10px;
	font-size : 10pt;
}


td.nospan {
	background-color : #F0F0F0;
	padding-left : 2px;
	padding-right : 2px;
}


td.entry {
	background-color : #F0F0F0;
	padding-left : 10px;
	padding-right : 10px;
	padding-top : 10px;
	padding-bottom : 20px;
	text-align : left;
	border-right-width: 1px;
	border-bottom-width: 5px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #999;
}


a {
	text-decoration : none;
	color : #006;
}


a:hover {
	text-decoration : none;
	color : #900;
}


input.input {
	border : 1px solid Black;
}


textarea {
	border : 1px solid Black;
}


div.page_count {
	text-align: center;
	height: 20px;
	margin-right: auto;
	margin-left: auto;
}


div.page_count div.activ
{
	font-size: 12px;
	font-weight: bold;
	color: #FF0000;
	float: left;
	margin: 2px;
	padding: 2px;
}


div.page_count a {
	float: left;
	font-size: 12px;
	font-style: normal;
	margin: 2px;
	background-color: #FFFFFF;
	border: 1px solid #999999;
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 2px;
	padding-left: 3px;
}


div.error_message {
	color: #990000;
	background-color: #FFD2D2;
	text-align: center;
	padding: 5px;
	border: 1px dotted #FF0000;
	font-weight: bold;
	font-size: 12px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 15px;
	margin-left: 5px;
}


div.error_message h3 {
	font-size: 14px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}


div#admin {
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	text-align: right;
}


div#copyright {
	text-align: center;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
}


div#copyright h1 {
	font-size: 11px;
	font-style: normal;
	font-weight: normal;	
}


div#rss {
	font-size: 11px;
	text-align: center;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
}


}

Alles anzeigen

Vielleicht hast du ja mal kurz Zeit zum drüberschauen.

Viele Grüße

threadi

Also bei mir wird das zentriert. Was genau willst Du noch zentrieren?

Unregistriert

Hallo,

ich hätte es gerne so, dass die Eingabefelder zentriert sind. Also entweder irgendwie alle gleich breit oder eben so übereinander, dass die kleineren von der Ausrichtung her so über dem breitesten Feld stehen, dass links und rechts etwas übersteht. Die Felder also in der Vertikalen nicht alle links an der gleichen Stelle anfangen.
Verstehst du, wie ichs meine? Sonst muss ich mal ein Bild malen...

Lg

PS: Also z.B. wie hier in dem Antwortfenster. Das Textfeld ist ja das Größte. Und das Feld "Titel:" müsste (wenn es so wie bei mir sein soll) weiter nach rechts gerückt werden z.B.

threadi

Damit sie alle die gleiche Breite haben, musst Du nur für jedes Feld die selbe Breite angeben. Per CSS natürlich. Also:

Code

input, textarea { width: 200px; }

Den px-Wert bitte an deine Wünsche anpassen.

Tabelle für Gästebuch anpassen

Tags

Benutzer online in diesem Thema