Haumis wbb hilfe (http://haumis-wbb-hilfe.de/wbb2/index.php)
- ...:::Trainingscenter-wbb2:::... (http://haumis-wbb-hilfe.de/wbb2/board.php?boardid=75)
-- html (http://haumis-wbb-hilfe.de/wbb2/board.php?boardid=81)
--- Html in 2 Spalten (http://haumis-wbb-hilfe.de/wbb2/thread.php?threadid=2473)


Geschrieben von Horsty am 29.05.2013 um 23:01:

  Html in 2 Spalten

Hallo

Ich habe da mal eine Frage. Bin gerade dabei eine Neue Seite bei mir in mein Forum einzubauen.
Habe da aber meine kleinen Probleme.

Nun wollt ich mal Fragen wer mir da Tipps geben kann.

Also ich will eine Seite erstellen wo Links ein Menue ist und Rechts das grosse Textfeld wo die Texte drin stehen.
Die Seite will ich dann via ACP direkt ändern im TPL
Mein Problem ist ich bekomme die 2 spalten nicht hin.

Die Linke spalte sollte 30% haben der Rest soll das Textfeld sein.

Ich hoffe mir kann da einer bei Helfen bzw. Tipps zu geben.

Danke euch

Gruss Horsty



Geschrieben von Listiger_Falke am 30.05.2013 um 00:06:

 

Ich gehe mal davon aus, das Du eine dem Design angepasste Seite möchtest. Da Du des weiteren ein Menü links willst, denke ich mir, das Du in der Seite wechselnde Inhalte darstellen möchtest.

Dazu gehst Du wie folgt vor.

1. Eine PHP erstellen. (Mit einem Editor Deiner Wahl, ich selbst benutze dazu das Freewareprogramm ConText)
Inhalt:

php:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
<?php
$filename="XXX.php";
require("global.php");
require('./acp/lib/class_parse.php');
if (!$wbbuserdata['userid']) access_error();

eval("\$XXXnavi = "".$tpl->get("XXXnavi")."";");


if(isset($_REQUEST['action'])) $action=$_REQUEST['action'];
else $action="index";

if($action=="index") {
    eval("\$tpl->output("".$tpl->get("XXX_index")."");");
}
if($action=="1") {
    eval("\$tpl->output("".$tpl->get("XXX_1")."");");
}
if($action=="2") {
    eval("\$tpl->output("".$tpl->get("XXX_2")."");");
}
?>



Erklärung dazu:
$filename="XXX.php"; <------- das XXX in Deinen gewollten Dateinamen ändern, wenns eine Ligaseite sein soll z.B. liga.php

require("global.php"); <------- Bindet die global und deren Funktionen mit ein, umbedingt NOTWENDIG!

require('./acp/lib/class_parse.php'); <------- bindet die class_parse.php mit ein, nur notwendig, wenn Codes auch geparst werden sollen/müßen. Diesen Teil drin zu lassen bringt aber auch keine Nachteile, also selbst wenn nicht unbedingt notwendig ruhig bestehen lassen.


if (!$wbbuserdata['userid']) access_error(); <--------- Abfrage, ob der Besucher User oder Gast ist, bei Gästen erfolgt Fehlermeldung ....... Ihnen ist der Zutritt zur Seite nicht gestattet ........... sollen auch Gäste diese Seite sehen, einfach diese Zeile entfernen.


eval("\$XXXnavi = \"".$tpl->get("XXXnavi")."\";"); <--------- wie haben hier eine einfache Variable erstellt, für eine Navigation. Auch hier das XXX gegen das gewünschte tauschen, also bei besagter Ligaseite einfach liganavi

if($action=="index") {
eval("\$tpl->output(\"".$tpl->get("XXX_index")."\");");
} <---------- Eine Veränderungsanweisung, um verschiedene Templates innerhalb der PHP auf zu rufen, über den Zusatz "Action" ......... Erklärung weiter unten.

Die PHP nun so abspeichern, wie sie oben unter $filename="XXX.php"; benannt wurde, in unserem Beispiel also liga.php .... danach ins Root hoch laden.
===================================

Nun erstellen wir ein erstes Template

Inhalt: Die Navigation für Deine Seiten. Der Name dieses Templates muß den Namen der Variablen für die Navigation erhalten, die oben in der PHP eingetragen wurde.
eval("\$XXXnavi = \"".$tpl->get("XXXnavi")."\";"); <------- Wenn wir dieses wieder als Beispiel mit Liga annehmen, dann müßte nun das Template als liganavi.tpl abgespeichert werden.

Inhalt des Templates als Beispiel:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
<table cellpadding="{$style['tableincellpadding']}" cellspacing="{$style['tableincellspacing']}" border="{$style['tableinborder']}" style="width:100%" class="tableinborder">
<tr>
<td align="left" style="width: 100%" class="tabletitle"><span class="normalfont"><b>Navigation</b></span></td>
</tr>
<tr>
<td align="left" class="tablea"><a href="XXX.php"><span class="smallfont"><b>Hauptseite</b></span></a></td>
</tr>
<tr>
<td align="left" class="tablea"><a href="XXX.php?action=1"><span class="smallfont"><b>Unterseite 1</b></span></a></td>
</tr>
<tr>
<td align="left" class="tablea"><a href="XXX.php?action=2"><span class="smallfont"><b>Unterseite 2</b></span></a></td>
</tr>
</table>



Die Seite als liganavi.tpl (Beispielname) speichern, in die Templates laden und cachen.

Erklärung dazu: Hier wurden 3 Links ersrstellt, alle auf die XXX.PHP (liga.php) verweisend, aber mit 3 verschiedenen actionaufrufen. Die erste Verlinkung verweist dabei auf XXX.php ohne eine Aktion, dabei wurde in der PHP selbst definiert, das ein Aufruf ohne Aktion auf das Template XXX_index verweist. XXX_index.tpl ist also die Startseite.
Wird hinter dem Link nun ein Zusatz hinter der PHP geschrieben, in der Form ?action=1 .... ?action=2 .... werden dann jeweils andere Templates aufgerufen.


===================================

Nun erstellen wir ein weiteres Template, quasi einen Rohling für alle weiteren Unterseiten.

Grundinhalt:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
<?xml version="1.0" encoding="{$lang->items['LANG_GLOBAL_ENCODING']}"?>
<!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" dir="{$lang->items['LANG_GLOBAL_DIRECTION']}" lang="{$lang->items['LANG_GLOBAL_LANGCODE']}" xml:lang="{$lang->items['LANG_GLOBAL_LANGCODE']}">
<head>
<title>$master_board_name | XXX</title>
$headinclude
</head>
<body>
 $header
<table cellpadding="{$style['tableincellpadding']}" cellspacing="{$style['tableincellspacing']}" border="{$style['tableinborder']}" style="width:{$style['tableinwidth']}" class="tableinborder">
 <tr>
  <td class="tablea"><table cellpadding="0" cellspacing="0" border="0" style="width:100%">
   <tr class="tablea_fc">
    <td align="left"><span class="smallfont"><b><a href="index.php{$SID_ARG_1ST}">$master_board_name</a> &raquo;Name Deiner Seite</b></span></td>
    <td align="right"><span class="smallfont"><b>$usercbar</b></span></td>
   </tr>
  </table></td>
 </tr>
</table><br />
<table cellpadding="0" cellspacing="0" border="0" style="width:{$style['tableinwidth']}">
 <tr>
<td align="left" style="width: 200px" valign="top">$XXXnavi</td>
<td align="center" style="width: 10px"><img src="{$style['imagefolder']}/spacer.gif" width="10" height="20" /></td>
<td align="left" valign="top">
<table cellpadding="{$style['tableincellpadding']}" cellspacing="{$style['tableincellspacing']}" border="{$style['tableinborder']}" style="width:100%" class="tableinborder">
   <tr class="tabletitle">
    <td align="left"><span class="normalfont"><b>Deine Überschrift</b></span></td>
   </tr>
   <tr class="tablea">
    <td align="center"><span class="normalfont"><b>Dein Inhalt</b></span></td>
	</tr>
</table>
</td>
   </tr>
  </table>
$footer
</body>
</html>


Erklärung dazu:

Ganz oben in der Zeile <title>$master_board_name | XXX</title> trägst Du statt des XXX Deinen Seitentitel ein, dieser wird dann auch im Browser angezeigt

Zeile <td align="left"><span class="smallfont"><b><a href="index.php{$SID_ARG_1ST}">$master_board_name</a> &raquo;Name Deiner Seite</b></span></td> <----- Das ist innerhalb der UserCP-Bar der Name der Seite, auch hier Name Deiner Seite anpassen.

Zeile <td align="left" style="width: 200px" valign="top">$XXXnavi</td> <------ Hier wird die Navigation eingebunden, das oben erstellte Template. Bitte statt $XXXnavi den Namen eintragen, der in der PHP dafür angegeben wurde. MIT $ davor, und OHNE .tpl dahinter! Ich habe hier statt Deiner 30% eine feste Breite von 200Pixel vorgegeben, weil Prozentwerte für eine Navigation nicht gut sind..... falls aber doch gewünscht, die 200px in 30% ändern.

Zeile <td align="center" style="width: 10px"><img src="{$style['imagefolder']}/spacer.gif" width="10" height="20" /></td> Ich habe hier mal 3 Spalten genommen, statt Deiner gewünschten 2, um zwischen den Zeilen einen Abstand zu bekommen, in diesem Fall 10 Pixel. Normalerweise sollte in jedem Imageordner ein spacer.gif liegen, falls das bei Dir nicht der Fall ist bitte eins in den entsprechenden Ordner hoch laden.

Zeile <td align="left"><span class="normalfont"><b>Deine Überschrift</b></span></td> <----- Das ist die Überschrift Deiner Seite, den Namen entsprechend ändern

Zeile <td align="center"><span class="normalfont"><b>Dein Inhalt</b></span></td> <------- Dein Seiteninhalt. Entsprechend ändern.


Diese Seite speicherst Du Dir nun einfach als Rohling für alle weiteren Seiten ab. Also auf dem PC z.B. für das Beispiel einfach als ligarohling.tpl speichern.


Nun kannst Du die Seite Deinen wünschen anpassen, als erste Seite z.B. die Hauptseite ..... passe die oben genannten Zeilen an, und wenn alles so ist wie gewünscht speichere Dir die Seite als die in der oben erstellten PHP genannten Hauptseite ab, in unserem Beispiel als liga_index.tpl
Danach hoch laden, und cachen..... nun kannst Du die erste Seite schon aufrufen, über den Link (in unserem Beispiel) liga.php
Links müßte nun die Navigation sein, und Rechts der Inhalt.


Nun kannst du die nächste Seite erstellen, wieder den Rohling nehmen, und anpassen...... wenns fertig ist als liga_1.tpl abspeichern..... Aufruf dann als Link eben über liga.php?action=1

Du kannst nun beliebig viele Seiten erstellen. Wenn Du weitere Seiten als die in der PHP schon eigetragenen 3 Seiten erstellst, mußt Du in der PHP jeweils einen weiteren Aufruf dazu schreiben, also für Seite 4 dann
if($action=="3") {
eval("\$tpl->output(\"".$tpl->get("XXX_3")."\");");
}

usw. Und dann natürlich die Links jeweils in das Navigationstemplate liganavi.tpl eintragen:
jeweils ÜBER das </table> eine weitere Spalte einfügen:

<tr>
<td align="left" class="tablea"><a href="XXX.php?action=3"><span class="smallfont"><b>Unterseite 3</b></span></a></td>
</tr>





Ich hoffe das ist so einigermaßen verständlich st8

Ansonsten kann ich Dir das auch erstellen und anhängen.... aber so lernt man es besser st7



Geschrieben von Horsty am 30.05.2013 um 00:57:

 

Vielen vielen Dank

Es ist sehr verständlich geschrieben so das es sogar auf anhieb geklappt hat.
Ich habe auch nicht mit so einer ausfühlichen Antwort gerechnet. Hoffe dieser Post wird erstmal nicht gelöscht und du hast mir gleich weitere Fragen damit beantwortet.


Also nochmal vielen Dank


gruss Horsty



€dit:


Habe da nochmal eine Frage!

Wie bekomm ich in den Template bilder eingefügt ????

Habe 2 varianten schon probiert aber keine von den geht.

code:
1:
<td class="tableb" align="center"><img src="../images/et.jpg" alt="" border="0"></td>   <div align="center"><img src="../images/et.jpg" alt="" border="0" height="376" width="500"></div>


oder bin ich da auf der Falschen spur?



Geschrieben von Listiger_Falke am 30.05.2013 um 16:17:

 

Der normale Code wäre


<img src="./images/et.jpg" width="xxx" height="xxx" alt="" />


xxx natürlich gegen die Höhe und Breite des Bildes ersetzen. Der Zusatz border="0" ist überflüssig, wenn es sich nicht um einen Link handelt.
In diesem Fall müßen die Bilder aber auch im Ordner images liegen. Kleiner Tip dazu: lege Dir doch im Ordner images einen Unterordner an, für die Bilder die Du innerhalb Deines Zusatzes benötigst. Dann natürlich den Pfad noch anpassen. Falls Du überhaupt keine Bilder aufrufen kannst, passe den Pfad einfach komplett an, also http://www.Deinedomain/wbb2/images/et.jpg
Der Nachteil ist natürlich, das Du wenn Du mal Deine Domain änderst, den Pfad anpassen mußt. Allerdings sollte der Pfad oben eigentlich funktionieren st12



Geschrieben von Horsty am 04.06.2013 um 19:40:

 

Danke für diese Antwort.
Funktioniert bestens.


Nun habe ich wieder eine Frage wo ich wieder am verzweifeln bin

Diese Seite hätte ich gern in meine ET_index rein haben.
Ist das ohne weiteres möglich?

Meine Seite

Oder währe das zu viel aufwand?



Geschrieben von Listiger_Falke am 04.06.2013 um 21:11:

 

Erkläre doch mal genauer, was Du möchtest....... Diese Seite als Iframe einbinden, oder in der Verlinkung?

Edit: Schaut so aus, als wenn Du es doch schon perfekt hinbekommen hast st12



Geschrieben von Horsty am 04.06.2013 um 21:20:

 

Erklären ist nicht so einfach.

Schau dir das mal an

Meine seite

Da siehst du die Server Anzeige nur funktionier die so nicht, lässt sich nicht aktualisieren u.s.w
Was ich wissen wollte kann man die Anzeige so irgendwie fest einbauen das die auch so dann funktioniert oder geht das nur über Iframe ?


Dank deiner Anleitung klappt alles prima :)



Geschrieben von Listiger_Falke am 04.06.2013 um 23:03:

 

Theoretisch sollte es auch innerhalb der et gehen, nur verweisen Deine Links ja nicht auf die et.php sondern auf die server1/index.php, daher geht es innerhalb des et nicht. Du müßtest also in Deiner Seite alle Links anpassen, dann sollte es gehen st12

Ich formuliere es noch mal genauer: Beispiel Refresh: Klickst Du auf Refresh, wird die server1/index.php (neu) geladen...... ändere den Link unter dem Refresh, das statt dessen die et.php neu geladen wird, dann geht es st1



Geschrieben von Horsty am 04.06.2013 um 23:39:

 

gelesen getan ..... so funktioniert es zwar nur aktualisiert er nix. Normal müsste sich der Ping ms ändern bei refresh. Tut sich nix und auch ist schon lange eine andere map am laufen.

habe muss ich auch dazu sagen nur den html text von der Server anzeige in die hauptseite reinkopiert



mfg



Geschrieben von Listiger_Falke am 05.06.2013 um 01:05:

 

Ich gehe mal davon aus, das die Originalseite eine PHP ist? Also dann den HTML-Text in die Seite zu kopieren wird nichts bringen (Keine Funktion, sprich auch, die angesprochene Ping ms dürfte ein normaler html-Eintrag sein, der sich ja dann nicht ändern kann)

Ich selbst bin nun kein PHP-Kenner (Könner) ... daher kann ich Dir nicht sagen, wie und ob der Originalcode Deiner PHP in das et kann. Ich selbst würde das ganze als Iframe realisieren, da wüßte ich dann auch, das alles geht st12



Geschrieben von Horsty am 05.06.2013 um 01:12:

 

wie würde das denn am besten funktionieren ?



Geschrieben von Listiger_Falke am 05.06.2013 um 02:06:

 

code:
1:
2:
3:
4:
5:
6:
7:
<center>
<iframe src="http://fun-gaming-germany.de/server1/index.php?" name="Serverstatus"style="border: 0px none;" frameborder="0" height="380" scrolling="no" width="520" ALLOWTRANSPARENCY="true">
</iframe>
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
  Sie k&ouml;nnen die eingebettete Seite &uuml;ber den folgenden Verweis
  aufrufen: <a href="http://fun-gaming-germany.de/server1/index.php?">Serverstatus</a></p>
</center>


Weitere Infos zu Iframes kannst Du hier finden st12



Geschrieben von Horsty am 05.06.2013 um 02:20:

 

Ich danke dir
Passt super :)
Die Seite( der link ) könnte mir schon bei vielen sachen helfen auch dafür danke

Mfg Horsty


Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH