• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit DIVs und Tabellen!..

W

wekky

Neues Mitglied
Hallo Leute, ich bin seid mehreren Stunden beschäftigt mein Design für Webspell CMS 4.2.0f anzupassen. Es ist so, ich habe oben den Header, Menüleiste und zwei Boxen als Tabellen. Darunter soll in einer DIV der Contentbereich sein. Rechts im Contentbereich soll ein weiteres festes DIV sein, weil sich dort weitere Elemente befinden. Die Aber nicht wie bei einer Tabelle nach unten verzogen werden, wenn der Text rechts länger ist als die Tabelle.

Frage Grafisch:
http://img269.imageshack.us/my.php?image=frage.jpg

Das Design:
http://img33.imageshack.us/img33/3066/designw.jpg

Ich hoffe ihr könnt mir helfen. Ich bin mit DIVs und CSS einfach zu sehr angesprochen. Hier noch der Quellcode:

Code: 
<html>
<head>
<title>ekyo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    background-color: #556066;
}
-->
</style></head>
<center>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (ekyo.psd) -->
<table id="Tabelle_01" width="1101" height="251" border="0" cellpadding="0" cellspacing="0">
<tr>
        <td rowspan="4"><img src="Bilder/EKYO.DE_01.jpg" width="20" height="194" alt=""></td>
<td colspan="4" rowspan="4">
            <img src="Bilder/EKYO.DE_02.jpg" width="550" height="194" alt=""></td>
        <td height="20" colspan="6">
            <img src="Bilder/EKYO.DE_03.jpg" width="512" height="20" alt=""></td>
<td rowspan="3">
            <img src="Bilder/EKYO.DE_04.jpg" width="18" height="192" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="20" alt=""></td>
  </tr>
    <tr>
        <td height="156" colspan="2">
            <img src="Bilder/EKYO.DE_05.jpg" width="254" height="156" alt=""></td>
<td rowspan="2">
            <img src="Bilder/EKYO.DE_06.jpg" width="2" height="172" alt=""></td>
        <td colspan="2">
            <img src="Bilder/EKYO.DE_07.jpg" width="252" height="156" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/EKYO.DE_08.jpg" width="4" height="172" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="156" alt=""></td>
    </tr>
    <tr>
        <td height="16">
            <img src="Bilder/EKYO.DE_09.jpg" width="186" height="16" alt=""></td>
  <td>
            <img src="Bilder/EKYO.DE_10.jpg" width="68" height="16" alt=""></td>
        <td>
            <img src="Bilder/EKYO.DE_11.jpg" width="184" height="16" alt=""></td>
        <td>
            <img src="Bilder/EKYO.DE_12.jpg" width="68" height="16" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="16" alt=""></td>
    </tr>
    <tr>
        <td colspan="6" rowspan="3">
            <img src="Bilder/EKYO.DE_13.jpg" width="512" height="56" alt=""></td>
        <td rowspan="3">
          <img src="Bilder/EKYO.DE_14.jpg" width="18" height="56" alt=""></td>
        <td height="2">
            <img src="Bilder/Abstandhalter.gif" width="1" height="2" alt=""></td>
  </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/EKYO.DE_15.jpg" width="20" height="54" alt=""></td>
        <td height="31">
            <img src="Bilder/EKYO.DE_16.jpg" width="98" height="31" alt=""></td>
  <td>
            <img src="Bilder/EKYO.DE_17.jpg" width="114" height="31" alt=""></td>
        <td>
            <img src="Bilder/EKYO.DE_18.jpg" width="138" height="31" alt=""></td>
        <td>
            <img src="Bilder/EKYO.DE_19.jpg" width="200" height="31" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="31" alt=""></td>
    </tr>
    <tr>
        <td height="23" colspan="4">
            <img src="Bilder/EKYO.DE_20.jpg" width="550" height="23" alt=""></td>
  <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
        <td height="3" colspan="12" background="Bilder/EKYO.DE_21.jpg">HIER SOLLEN DIE DIVS SEIN :(</td>
  <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>    </tr>
</table>
<table width="126%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr></tr><tr></tr>
</table>
</body>
</html>
 
wekky schrieb:
Es ist so, ich habe oben den Header, Menüleiste und zwei Boxen als Tabellen.
Zum Vergrößern anklicken....
Das ist ja auch schon im Sinne von HTML falsch.
Mit HTML werden nicht irgendwelche Boxen definiert, sondern der Inhalt wird strukturiert, dem Inhalt wird eine Bedeutung gegeben. Welches Tag man verwendet, hängt einzig vom Inhalt ab und nicht vom Layout. Daher ist es ja auch falsch, Tabellen für etwas anderes als tabellarische Daten zu verwenden. Und genauso ist es meist sinnfrei, alles mit divs vollzupflastern, denn dieses Tag wird verwendet, um mehrere Elemente zu gruppieren.

Wobei in Deinem Beispiel wahrscheinlich divs zur Gruppierung der verschiedenen News-Blöcke durchaus angebracht sind.

Aber die Frage hab ich noch nicht verstanden. Evtl. suchst Du Faux Columns? Das ist jetzt aber geraten aufgrund dessen dass Du irgendwas sagst von wegen "zieht sich nicht bis nach unten". Vielleicht kannst Du Deine Frage nochmal besser formulieren?
 
Efchen schrieb:
Das ist ja auch schon im Sinne von HTML falsch.
Mit HTML werden nicht irgendwelche Boxen definiert, sondern der Inhalt wird strukturiert, dem Inhalt wird eine Bedeutung gegeben. Welches Tag man verwendet, hängt einzig vom Inhalt ab und nicht vom Layout. Daher ist es ja auch falsch, Tabellen für etwas anderes als tabellarische Daten zu verwenden. Und genauso ist es meist sinnfrei, alles mit divs vollzupflastern, denn dieses Tag wird verwendet, um mehrere Elemente zu gruppieren.

Wobei in Deinem Beispiel wahrscheinlich divs zur Gruppierung der verschiedenen News-Blöcke durchaus angebracht sind.

Aber die Frage hab ich noch nicht verstanden. Evtl. suchst Du Faux Columns? Das ist jetzt aber geraten aufgrund dessen dass Du irgendwas sagst von wegen "zieht sich nicht bis nach unten". Vielleicht kannst Du Deine Frage nochmal besser formulieren?
Zum Vergrößern anklicken....

Hallo. Also es ist so. Ich will unter dem Header und Navi Bereich den Text anzeigen (Diese News mit den Autos). Wenn ich das nun in Tabellenform mache verzieht sich das komplette design, wenn es viele News sind. Ich habe gelesen wenn man eine Div erstellt und in dieser eine weitere und die nach rechts fixiert, ist das kein Problem. Leider bin ich in Programmieren eine 0 und weis nicht mehr weiter.

Hier mal ein Screen was passiert wenn ich viele News habe und es in Tabellenform angepasst hab. http://img269.imageshack.us/img269/5199/unbenanntjhy.jpg
 
Zuletzt bearbeitet:
Es mag ja sein, dass es so ist, aber das ändert nichts daran, dass man Layout nicht mit Tabellen macht :-)
Also entferne erstmal die Layouttabellen.

Scheitert es schon am nebeneinander ausrichten von zwei Block-Elementen? Das, was Du als DIV1 und DIV2 bezeichnet hast? Zwei BLock-Elemente lassen sich mit Hilfe der CSS-Eigesnchaft "float" nebeneinander positionieren. Aber ineinander verschachteln muss man die nicht.

Und was das Programmieren angeht, da kann ich Dich beruhigen. Weder HTML noch CSS sind Programmiersprachen und auch nicht annähernd so schwierig.
 
hi effchen
ich bin seit kurzem html-schreiber. habe alles mit buch gelernt.
dort wurde ich aber überall immer hingewiesen worden, dass mit tabellen pixelgenaues programmieren ermöglicht ist. frage: warum wird überall gesagt dass man mit html kein layout macht?
 
Weil HTML eine Auszeichnungssprache ist und keine Layoutsprache.

HTML ist nur für die Semantik deiner Seite zuständig, für das Layout ist CSS zuständig.

So hat man eine klare Trennung von Inhalt und Layout und kann das design verändern, ohne am Inhalt etwas ändern zu müssen.

Ausführlich nachzulesen auf dieser Seite (Einführung | Webdesign mit XHTML und CSS).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben