HTML üben (Tabellenlayout)

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von Psycot-X, 01.12.2009.

  1. #1 Psycot-X, 01.12.2009
    Zuletzt bearbeitet: 01.12.2009
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Da mich zurzeit gähnende Langeweile plagt habe ich mal wieder angefangen mit HTML zu arbeiten.
    Ich will einfach probieren und "meinen Horizont" erweitern.

    Folgende Idee.
    Ich möchte eine Seite mit Tabellenlayout erstellen:
    Ich hab mir überlegt eine Tabelle mit 3 Spalten zu machen, in den 2 äußeren sind jeweile farbige Hintergrundfarben (^^) und die Mitte soll wegen dem Content neutraler bleiben, Menu dann immer zu oberst der 2. Spalte.

    1. Frage: Wie bringe ich meinem Tabellenkonstrukt bei, dass es auch ohne Inhalt 100% des Bildschirms ausfüllt (nach unten)?
    In der Breite geht das schließlich auch!

    2. Frage: Wie schaffe ich es, dass er wirklich 100% des Bildschirms im Browser mit den Tabellen bestückt und nicht links, rechts und oben noch ein paar Pixel Platz lässt?

    Hier der Quellcode (ist völlig unstrukturiert, etc...)
    Code:
    <html>
    <head>
    <title>Tabellenlayout</title>
    </head>
    <body>
    <table width="100%" heigth="100px" border="0" cellspacing="0" cellpadding="4">
      <tr>
    
        <td width="10%" background="img/bg02.png">
        <p>LINKS<br>
        </td>
    
        <td width="80%" valign="top" bgcolor="#222222">
    <p>CONTENTSPALTE<br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
        </td>
    
        <td width="10%" background="img/bg02.png>
        <p>RECHTS<br>
        </td>
    
      </tr>
    </table>
    </body>
    </html>
    
     
  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. #2 xandros, 01.12.2009
    xandros

    xandros IT Consultant, Cisco Registered Partner
    Moderator

    Dabei seit:
    05.07.2007
    Beiträge:
    25.893
    Zustimmungen:
    91
    Ort:
    Umkreis Duisburg, neben Mannheim, hinter Hamburg
    zu 2) mit einer Tabelle nicht möglich, da eine Tabelle kein Layoutinstrument ist, sondern ein Strukturierungswerkzeug für tabellarische Daten.....
    Eventuell ist es da besser, wenn du drei Container verwendest, die du pixelgenau positionieren kannst. In den Containern kannst du dann ja mit drei einzelnen Tabellen weiter arbeiten.
    Dabei verwendest du die Tabellen aber auch wieder zweckentfremdet für das Layout. Kein guter Stil!
     
  4. #3 Psycot-X, 01.12.2009
    Zuletzt bearbeitet: 01.12.2009
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Ich will eben einfach erstma wieder bei HTML reinkommen und auf Frames hatte ich keine große Lust =/

    Welche Möglichkeiten habe ich denn da außer Tabellen noch um so etwas zu realisieren?
    (seperater Hintergrund für linken und rechten Rand, neutraler BG in der Mitte)

    Ich hab hier ma gepainted wie in etwa ich mir das vorgestellt hab:
    http://img189.imageshack.us/img189/8111/konzept.png
     
  5. #4 xandros, 01.12.2009
    xandros

    xandros IT Consultant, Cisco Registered Partner
    Moderator

    Dabei seit:
    05.07.2007
    Beiträge:
    25.893
    Zustimmungen:
    91
    Ort:
    Umkreis Duisburg, neben Mannheim, hinter Hamburg
    Die einfachste Version:
    Hintergrund für den Body-Tag definieren. Dann wird das flächendeckend für die komplette Seite dargestellt.
    Darauf einen Div-Container mit Breiten- und Höhenangaben positionieren für den Content....
    Wenn dann links/rechts noch weitere Sachen ergänzt werden sollen, können in den Bereichen immer noch Div-Container positioniert werden.
     
  6. #5 Psycot-X, 01.12.2009
    Zuletzt bearbeitet: 01.12.2009
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Also ich benutze als Referenz zur Fehlersuche meistens selfhtml, leider finde ich dort nichts über div-container...
    Kennst du eine Seite, auf der ich so etwas finde?
    Ich hab mich noch nie mit <div> beschäftigt.

    Danke =)

    PS: Ich werde mich zunächst hier mal umtun: http://www.css4you.de/wslayout1/index.html
    aber falls du was besseres hast ;D
     
  7. #6 xandros, 01.12.2009
    xandros

    xandros IT Consultant, Cisco Registered Partner
    Moderator

    Dabei seit:
    05.07.2007
    Beiträge:
    25.893
    Zustimmungen:
    91
    Ort:
    Umkreis Duisburg, neben Mannheim, hinter Hamburg
  8. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  9. #7 Psycot-X, 01.12.2009
    Zuletzt bearbeitet: 01.12.2009
    Psycot-X

    Psycot-X Erfahrener Benutzer

    Dabei seit:
    07.04.2007
    Beiträge:
    960
    Zustimmungen:
    0
    Container und Block als eins anzusehen kam mir auch nicht in den Sinn =O sorry^^

    Nunja, dass mit den div-containern ist ja echt simpel.
    Ich werd jetzt nur das Menu in eine Tabelle packen, mal sehn wie weit ich da komme... so ganz klappt es noch nicht^^

    *e: Doofe Frage, aber wie bringe ich einen Div-Container der per
    Code:
    style="position:absolute;bottom:0px;margin:0px auto;padding:4px;
    auf den Boden gesetzt wurde? Also fürs Impressum/Disclaimer versteht sich.
    ich habe sowohl im div-Tag alle möglichen Varianten von text-align:right; ausprobiert, sowie den Spaß schon in die Stylesheet-Datei gepackt... Leider alles ohne Erfolg =/

    Hier nochma der betreffende Quellcode:
    Code:
    <div style="position:absolute;bottom:0px;margin:0px auto;padding:4px;">
    <div id="impressum">Impressum</div>
    </div>
    
     
  10. #8 PC-Gerry, 10.12.2009
    PC-Gerry

    PC-Gerry Erfahrener Benutzer

    Dabei seit:
    15.09.2007
    Beiträge:
    3.627
    Zustimmungen:
    0
    Ort:
    Dortmund
    Hey.
    Also, ich habe dir mal eben auf die schnelle ein Standart dingen erstellt. Schau es dir mal und bastel daran rum. Das geht meistens besser als komplett selbst machen. :)


    <div style="width:100%; height:200px; background-color:#333;">
    <span>Hier kommt deine Headgrafik rein</span>
    </div>
    <div style="width:20%; height:800px; background-color:#444; float:left;">
    <span>Linke Leiste f&uuml;r zum Beispiel ein Men&uuml;</span>
    </div>
    <div style="width:80%; height:800px; background-color:#CCC; float:right;">
    <span>Contentbereich</span>
    </div>
    <div style="width:100%; height:50px; background-color:#333; clear:both;">
    <span>Footer</span>
    </div>
     
Thema: HTML üben (Tabellenlayout)
Besucher kamen mit folgenden Suchen
  1. mal tabelle üben

Die Seite wird geladen...

HTML üben (Tabellenlayout) - Ähnliche Themen

  1. Outlook 2003 druckt HTML Mails nicht richtig

    Outlook 2003 druckt HTML Mails nicht richtig: Hallo Leute, habe das Problem, das Outlook 2003 die HTML Mails nicht richtig druckt. Der Text wird gedruckt, die hinterlegten Bilder werden nur...
  2. Win Live Mail eml+html

    Win Live Mail eml+html: Hallo, bin die NEUE hier!! Frage an EUCH meine E-Mails die ich nicht löschen will, ziehe ich in einen Extra-Ordner. seit gestern kann ich diese...
  3. zahl von html mit c++ abfangen

    zahl von html mit c++ abfangen: soo, nun bin ich auch mal wieder da... guten abend zusammen, ich hoffe ihr könnt mir wieder einmal helfen. es geht um folgendes: gibt es eine...
  4. Spezielle Navigation (Html / Css)

    Spezielle Navigation (Html / Css): Wunderschönen Guten Abend. Ist es möglich das Menü von dieser Seite Musicbase.fm - Clubsection ohne JavaScript, also nur mit HTML & CSS, zu...
  5. HTML Field-Value zwischen zwei Forms teilen

    HTML Field-Value zwischen zwei Forms teilen: Hi, ich benötige den Wert eines Textfeldes, welcher bei zwei verschiedenen Submits mitgegeben werden soll. Ich habe gelesen, dass man ein...