html template stil?

**nimrod_sb** · 25.06.2009, 08:19

hallo ich brauch mal einen rat von den webdesignern unter euch. ich hab mir ein html template erstellt. ich will einen möglichst professionellen internet auftritt erschaffen und deshalb will ich auch das template vom code her so gut wie möglich gestalten. ist eine kombination aus tabellen und div boxen. die div boxen werden dann über ein externes stylesheet gestaltet. wie ist dieser codestil? was würdet ihr anderst machen? tipps, anregungen, kritik, alles ist erwünscht da ich leider in webdesign nicht so bewand bin ( das soll sich jetzt aber ändern). danke an alle die sich mir annehmen!!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test</title>
</head>
<body>
<table
 style="width: 100%; height: 100%; text-align: left; margin-left: auto; margin-right: auto;"
 border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="height: 10%; width: 100%;">
      <div id="main_header">
      <div id="logo">###LOGO###</div>
      <div id="top">
###MENU_OBEN###
      </div>
      <div id="banner">###TRAILER###
      </div>
      <div id="klickpath">
###KLICKPFAD###
      </div>
      </div>
      </td>
    </tr>
    <tr>
      <td>
      <table style="text-align: left; width: 100%; height: 100%;"
 border="1" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td style="height: 100%; width: 15%;">
            <div id="left">
            <div id="menu_links">###MENU_LINKS###</div>
            <div id="info_links">###INFO_LINKS###</div>
            </div>
            </td>
            <td style="height: 100%; width: 70%;">
            <div id="content">###INHALT###</div>
            </td>
            <td style="height: 100%; width: 15%;">
            <div id="right">
            <div id="menu_rechts">###MENU_RECHTS###</div>
            </div>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
    <tr>
      <td style="height: 10%; width: 100%;">
      <div id="footer">###FOOTER###</div>
      </td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>

**meckpo** · 25.06.2009, 11:51

Hallo,

du wolltest ja eine ehrliche Antwort: Das sollte man KOMPLETT anders machen.

Layout-Tabellen sind glaube ich seit ca. 8 Jahren "out". Damit brauchst du gar nicht erst anfangen.

Der aktuelle Doctype sollte XHTML sein, nicht "HTML Transitional". Dann müssen deine Tags natürlich auch der XHTML-Syntax entsprechen.

Das Encoding sollte man vielleicht besser als UTF-8 wählen, aber gut - DAS ist nicht ganz so wichtig.

Tipp: Kauf dir ein gutes Buch (HTML & CSS) und fang mit nem kleinem Projekt an bei dem es keine so grossen Anforderungen gibt. Deine ersten 10 Templates können ganz einfach nicht perfekt sein, wahrscheinlich nicht einmal "gut". Auch wenn du dir noch so viel Mühe gibst. Wenn du magst kannst du auch auf ein Framework wie YAML zurückgreifen. Oder frag jemanden der sich damit auskennt.
Wünsch dir viel Erfolg!

**nimrod_sb** · 25.06.2009, 13:56

ich danke! hab mittlerweile auch mitbekommen das tabellen sowas von out sind

.
hab mir schon ein css buch bestellt

viele grüße

edit: was sagen profis dazu? ist mein versuch bevor ich zurück ins mittelalter gegangen bin :P

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="fileadmin/style.css">
</head><body>



<div id="main">
<div id="main_header">
<div id="logo">
###LOGO###
</div>
<div id="top">
###MENU_OBEN###
</div
<div id="banner">
###TRAILER###
</div>
<div id="klickpath">
###KLICKPFAD###
</div>
</div>

<div id="main_middle"
<div id="left">
<div id="menu_links">
###MENU_LINKS###
</div
<div id="info_links">
###INFO_LINKS###
</div>
</div>

<div id="middle">
<div id="content">
###INHALT###
</div>
</div>

<div id="right">
<div id="menu_rechts">
###MENU_RECHTS###
</div>
</div>
</div>

<div id="footer">
###FOOTER###
</div>
</div>

</body>
</html>

**ttb** · 25.06.2009, 22:52

Moin,

da liegt noch ein Stück Arbeit vor dir... Du hast quasi nichts anderes gemacht, als die td/tr-Tags durch div-Tags ersetzt, also vom Regen in die Traufe...

Die Umstellung von Tabellenlayouts auf CSS-basierte Layouts bedeutet aber, die vorhandenen xHTML-Tags so wie sie vorgesehen sind, einzusetzen und das Aussehen mit CSS zu regeln (nahezu jeden xHTML-Tag kann man mittels CSS (direkt) formatieren!), anstatt wild alles in (teils dreifach geschachtelte) div-Tags zu klatschen!* Wenn man letzteres macht, kann man auch gleich bei Tabellen bleiben!

* Vorausgesetzt man will keine abgerundeten Ecken machen, was bisher leider nur mit geschachtelten Tags geht.

**nimrod_sb** · 26.06.2009, 10:26

hallo nochmal,
hat mir mal jemand ein einfach beispiel wie ich z.b. den headerbereich in xhtml realisiere? mit stylesheet? oder vielleicht einen brauchenbaren link? ich wär sehr dankbar...

edit: kann man sowas hier als modern und gut bezeichnen?
Kurs:Die erste eigene Website/CSS/Layout "Gelbe Socke" â€“ Wikiversity

edit2: also soweit ich das überblicken kann sind extrem viele seiten mit verschachtelten divs und tables realisiert... ich versteh die welt nichtmehr?? wie mach ichs denn jetzt richtig ?? kommt mir langsamm so vor als sei das eher ne geschmackssache wie das template letztendlich gestaltet wird?

**nimrod_sb** · 26.06.2009, 17:36

also leute, sorry das ich hier so überlästig bin. wollte nurnoch mitteilen das ich mein problem in den griff bekommen habe.
hab mein layout jetzt mit wenigen zeilen code hinbekommen, wenn man css mal geschnallt hat ist es echt super!
viele liebe grüße
nimrod_sb

<!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>
<title>Unbenanntes Dokument</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="main_container">
<div id="top">
<div id="welcome">###WELCOME###</div>
<div id="menu_top">###MENU_TOP###</div>
</div>
<div id="header">###HEADER###</div>
<div id="menu_left">###MENU_LEFT###</div>
<div id="main_content">###CONTENT###</div>
<div id="info_right">###INFO_RIGHT###</div>
<div id="footer">###FOOTER###</div>
</div>

</body>
</html>