Haumis wbb hilfe (http://haumis-wbb-hilfe.de/wbb2/index.php)
- ...:::Trainingscenter-wbb2:::... (http://haumis-wbb-hilfe.de/wbb2/board.php?boardid=75)
-- Erläuterungen zum Seitenaufbau (http://haumis-wbb-hilfe.de/wbb2/board.php?boardid=76)
--- Schritt 3 (http://haumis-wbb-hilfe.de/wbb2/thread.php?threadid=1063)


Geschrieben von haumi am 15.11.2010 um 21:23:

  Schritt 3

Ich hab nun die abgespeckten Buttons im Header eingefügt.
Mit abgespeckt meine ich das NUR das Bild (der Button) aus dem imagesordner in Verbindung mit dem Linkaufruf eingebaut wurde.

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
<div>

<table>
     <tr>
          <td><img src="images/logo.gif" /></td>
    </tr>

   <tr>
     <td>
          <a href="usercp.php"><img src="images/top_usercp.gif"  /></a>
          <a href="pms.php"><img src="images/top_pms.gif" /></a>
          <a href="calendar.php"><img src="images/top_calendar.gif" /></a>
          <a href="memberslist.php"><img src="images/top_members.gif" /></a>
          <a href="team.php"><img src="images/top_team.gif" /></a>
          <a href="search.php"><img src="images/top_search.gif" /></a>
          <a href="misc.php?action=faq"><img src="images/top_faq.gif" /></a>
          <a href="index.php"><img src="images/top_start.gif" /></a>
   </td>
  </tr> 

</table>
<hr  />


Hier mal der Link zum Board.
Das bleibt nun erst mal zwei Tage so stehen um eventuelle Fragen dazu behandeln zu können.

Die Buttons sind voll funktionsfähig.
Nur wenn man darauf klickt erscheinen die aufgerufenen Seiten OHNE Formatierung, bzw, mit der voreingestellten Formatierung des Browsers.
Ich habe ja die css.tpl noch nicht eingebaut und dafür erst mal die basic.tpl, die später ausgetauscht wird.

Im Anschluß wird der Mittelteil sprich das index.tpl ausgebaut aber auch nur in abgespeckter Version, damit man das Ganze erst mal in den Kopf bekommt.

das basic-template wurde auch etwas angepasst, damit die Sachen erst mal mittig ausgerichtet werden.

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:
<style type="text/css">
 <!--

hr {
width:50%;
}
p {
color:red;
}

body {
background-color: #EEE8AA;
}

table,tr,td {
margin: auto;
text-align: center;
}

div {
table-layout: fixed;
width:1000px;
border-collapse: separate;
border:solid 3px;
}

-->
</style>


Damit man mal sieht welchen Platz das Ganze einnimmt,
habe ich alles in eine div-Box gepackt, welche im header beginnt
und im footer endet.
Den footer habe ich hier nicht noch extra reingestellt.
Es wurde nur als letzte abschließende Zeile das </div> eingebracht.
Die Formatierung ist dem basic-template zu entnehmen.

Das was man nun sieht ist folgendes:



LG
haumi



Geschrieben von haumi am 17.11.2010 um 08:29:

 

Frage 1: Wie bekomme ich einen kleinen Abstand zwischen dem oberen Rand und dem Banner?
Frage2: Wie bekomme ich einen kleinen Abstand zwischen dem Banner. und der Buttonreihe?
Frage3: Warum ist ein Rand um den Buttons herum und wie bekomme ich ihn weg?

LG
haumi


Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH