Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 17

Thema: Tabellen-Layout in DIV-Layout umändern...

  1. #1
    Peter_Pan
    Gast

    Standard Tabellen-Layout in DIV-Layout umändern...

    Folgendes Layout wollte ich in eines mit DIVs abändern, doch dies gelingt nicht so richtig

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Titel</title>
    <meta name="author" content="bla">
    
    <link rel="stylesheet" type="text/css" href="layout.css">
    
    </head>
    <body>
    
    <table class="rahmen" border="0" align="center" cellpadding="0" cellspacing="0">
       <tr>
          <td class="eck_1"></td>
          <td class="oben"></td>
          <td class="eck_2"></td>
       </tr>
       <tr>
           <td class="links"></td>
           <td class="hintergrund">
               <div style="text-align&#58;center">
                  <div class="inhalt">
    
    
    
    bla bla bla Inhalt mit Bilder usw.
    
    
    
                </div>
             </div>
          </td>
          <td class="rechts"></td>
       </tr>
       <tr>
          <td class="eck_3"></td>
          <td class="unten"></td>
          <td class="eck_4"></td>
       </tr>
    
    </table>
    
    </body>
    </html>

    Das dazugehörige CSS-File
    Code:
    /* BODY Hintergrund Links usw. */
    
    body,td,th &#123;
    font-family&#58; Verdana, Arial;
    font-size&#58; 14px;
    color&#58; #000000;
    background-color&#58; #FFFFFF;
    &#125;
    
    .hintergrund &#123;background-color&#58;#E1E1E1;&#125;
    
    div.inhalt &#123;margin&#58; 70px 50px 70px 50px;text-align&#58;left;&#125;
    
    table.rahmen &#123;min-width&#58;120px;max-width&#58;1200px;width&#58;75%;&#125;
    
    
    /* Layout Ecken, Kanten */
    
    td.eck_1 &#123;background&#58;url&#40;bilder/eck_1.gif&#41;;height&#58;59px;width&#58;48px;&#125;
    td.eck_2 &#123;background&#58;url&#40;bilder/eck_2.gif&#41;;height&#58;59px;width&#58;62px;&#125;
    td.eck_3 &#123;background&#58;url&#40;bilder/eck_3.gif&#41;;height&#58;62px;width&#58;48px;&#125;
    td.eck_4 &#123;background&#58;url&#40;bilder/eck_4.gif&#41;;height&#58;62px;width&#58;62px;&#125;
    
    td.oben &#123;background&#58;url&#40;bilder/oben.gif&#41;;&#125;
    td.unten &#123;background&#58;url&#40;bilder/unten.gif&#41;;&#125;
    td.links &#123;background&#58;url&#40;bilder/links.gif&#41;;&#125;
    td.rechts &#123;background&#58;url&#40;bilder/rechts.gif&#41;;&#125;


    Hier mein Versuch mit DIVs

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Titel</title>
    <meta name="author" content="bla">
    
    <link rel="stylesheet" type="text/css" href="layout_div.css">
    
    </head>
    <body>
    
    
    <div class="rahmen">
       <div class="eck_1"></div>
       <div class="eck_2"></div>
       <div class="oben"></div>
    
       <div class="links"></div>
       <div class="rechts"></div>
    
       <div class="hintergrund">
          <div class="inhalt">
    
    
    
    bla bla bla Inhalt mit Bilder usw.
    
    
          </div>
       </div>
       <div class="eck_3"></div>
       <div class="eck_4"></div>
       <div class="unten"></div>
    </div>
    
    
    </body>
    </html>


    Wieder das dazugehörige CSS-File
    Code:
    /* BODY Hintergrund Links usw. */
    
    body,td,th &#123;
    font-family&#58; Verdana, Arial;
    font-size&#58; 14px;
    color&#58; #000000;
    background-color&#58; #FFFFFF;
    &#125;
    
    div.rahmen &#123;min-width&#58;120px;max-width&#58;1200px;width&#58;75%;margin&#58; 0px auto;&#125;
    
    .hintergrund &#123;background-color&#58;#E1E1E1;margin&#58;59px 62px 62px 48px&#125;
    
    div.inhalt &#123;margin&#58; 70px 50px 70px 50px;text-align&#58;left;&#125;
    
    
    /* Layout Ecken, Kanten */
    
    div.eck_1 &#123;background&#58;url&#40;bilder/eck_1.gif&#41;;height&#58;59px;width&#58;48px;float&#58;left;&#125;
    div.eck_2 &#123;background&#58;url&#40;bilder/eck_2.gif&#41;;height&#58;59px;width&#58;62px;float&#58;right;&#125;
    div.eck_3 &#123;background&#58;url&#40;bilder/eck_3.gif&#41;;height&#58;62px;width&#58;48px;float&#58;left;&#125;
    div.eck_4 &#123;background&#58;url&#40;bilder/eck_4.gif&#41;;height&#58;62px;width&#58;62px;float&#58;right;&#125;
    
    div.oben &#123;background&#58;url&#40;bilder/oben.gif&#41;;height&#58;59px;line-height&#58;59px;vertical-align&#58;middle;text-align&#58;center;&#125; /* line-height ist ein Trick, da valign sonst nicht funktioniert! */
    div.unten &#123;background&#58;url&#40;bilder/unten.gif&#41;;height&#58;62px;&#125;
    div.links &#123;background&#58;url&#40;bilder/links.gif&#41;;float&#58;left;width&#58;48px;background-repeat&#58;repeat-y;height&#58;100%;&#125;
    div.rechts &#123;background&#58;url&#40;bilder/rechts.gif&#41;;width&#58;62px;float&#58;right;background-repeat&#58;repeat-y;&#125;

    Wäre schön wenn ihr mir dabei weiterhelfen könnten!



    PS:Wie kann ich zentrierte Blockschrift bewekstelligen, ohne dafür zwei Tags zu benutzen?[/code]
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hast du deine versuche irgendwo online oder kannst sie online stellen ?
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  3. #3
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard

    Das was Du grad machst ist eine Div-Suppe. Du solltest erst mal die korrekte Nutzung Tags erlernen. Die Formatierung mit CSS hinterher ist dann kein so großes Problem mehr.

  4. #4
    Peter_Pan
    Gast

    Standard

    Online stellen ist grad nicht so gut...

    Also es soll einfach ein Rahmen aus Grafiken um den Inhalt sein, also die 4 Ecken des Rahmen sind jeweils eine Grafik. Und die 4 Außenkanten sind jeweils eine 1 Pixel-Dicke Grafik, welche sich dann wiederholt.


    Ja, dass ich mit DIVs noch nicht richtig umzugehen weiß ist mir klar, allerdings hab ich nirgends ne gute Erklärung / Anleitung dazu gefunden. Wäre gut wenn mir dies jemand anhand des Beispiels mal vorstellen könnte.

  5. #5
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    1px dicke grafik ? also nen rahmen ?

    warum machst net einfach border:1px solid #000000; ?
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  6. #6
    Forum Guru
    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    wenn das div sich nicht stark in der höhe ändern soll, könntest du es so machen wie im anhang dargestellt.

    für div#top machst du dann
    Code:
    height&#58; Xpx; /* X = höhe des bildstücks */
    background-position&#58; top;
    (+ alles weitere notwendige)

    bei div#content schaust du was die minimale grösse, bzw. die maximale grösse des containers sein wird, dann machst du das bild so lang wie die maximale grösse.

    dann beim css:

    Code:
    height&#58; auto;
    background-position&#58; bottom;
    (+ alles weitere notwendige)

    so wird vom unteren stück genauso viel angezeigt wie nötig, der rest bleibt versteckt.


    je nach layout empfielt sich aber evtl. eine andere variante. diese ist eher für kleine content containers oder menüs mit runden ecken gedacht.

    so long
    Angehängte Grafiken Angehängte Grafiken

  7. #7
    Gast

    Standard

    @driver
    Du hast mich falsch verstanden, die Grafik ist z.B. 50x1px also z.B. ein Farbverlauf welchen es dann z.B. auf der linken Seite bis nach unten durchzieht, also immer wiederholt...

    Es soll halt alles möglichst dynamisch sein, also egal ob ich z.B. nur "Hallo" in den Inhalt-DIV oder 100 Bilder reinmach. Dass sich das design daran anpasst...

  8. #8
    Forum Guru
    Registriert seit
    13.01.2005
    Ort
    Schweiz
    Beiträge
    5.240
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    wenn die breite fix ist kannst du bei meinem beispiel einfach wie das obere div ein unteres machen. dann hast du div#oben, div#foot und div#content. die packst du dann noch in einen "obercontainer". also:

    Code:
    <div id="main">
      <div id="top"></div>
      <div id="content"></div>
      <div id="foot"></div>
    </div>
    wenn "top" und "foot" keinen inhalt haben kannst du auch ein <span> verwenden.

    so long

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Versuch mal folgendes:
    Erstelle eine Hintergrundgrafik mit den Grafiken von links und rechts und zwischen beiden einen "Balken" mit der Hintergrundfarbe für den Inhalt.
    Diese Grafik fügst du dann als background in den Ihalt. Damit "wächst" sie mit diesem.
    Siehe "faux columns"

  10. #10
    Peter_Pan
    Gast

    Standard

    Hab's nun ein ewnig anders versucht, aber ich komm einfach nicht drauf!!

    Und versteh auch nicht 100%ig eure Tipps, leider.

    Allerdings wollte ich es so machen wie mit der Tabelle auch, da dies am dynamischsten ist und die kleinsten Bilder hat. Die Frage ist nur "Wie mache ich das mit DIVs?"

    So wie ichs nun hab ist's ja fast OK es fehlt halt noch der linke und rechte Rahmen. Dieser sollte dann allerdings bis zur unteren Kante angezeigt werden. Das sollte doch nicht so schwer sein, ich könnt echt noch verzweifeln!


    Code:
    <div class="rahmen">
    
    <div class="top">
       <div class="eck_1"></div>
       <div class="eck_2"></div>
       <div class="oben"></div>
    </div>
       <div class="links"></div>
       <div class="rechts"></div>
    
    
       <div class="hintergrund">
          <div class="inhalt">
    
             AAAAAAAAAAABBBBBBBBBBBBBBCCCCCCCCCCC
             bla bla bla...
    
          </div>
       </div>
    
    
    <div class="foot">
       <div class="eck_3"></div>
       <div class="eck_4"></div>
       <div class="unten"></div>
    </div>
    Code:
    div.top &#123;background-position&#58; top;&#125;
    div.foot &#123;background-position&#58; bottom;&#125;
    
    
    div.eck_1 &#123;background&#58;url&#40;bilder/eck_1.gif&#41;;height&#58;59px;width&#58;48px;float&#58;left;&#125;
    div.eck_2 &#123;background&#58;url&#40;bilder/eck_2.gif&#41;;height&#58;59px;width&#58;62px;float&#58;right;&#125;
    div.eck_3 &#123;background&#58;url&#40;bilder/eck_3.gif&#41;;height&#58;62px;width&#58;48px;float&#58;left;&#125;
    div.eck_4 &#123;background&#58;url&#40;bilder/eck_4.gif&#41;;height&#58;62px;width&#58;62px;float&#58;right;&#125;
    
    div.oben &#123;background&#58;url&#40;bilder/oben.gif&#41;;height&#58;59px;&#125; 
    div.unten &#123;background&#58;url&#40;bilder/unten.gif&#41;;height&#58;62px;&#125;
    div.links &#123;background&#58;url&#40;bilder/links.gif&#41;;width&#58;48px;float&#58;left;&#125;
    div.rechts &#123;background&#58;url&#40;bilder/rechts.gif&#41;;width&#58;62px;float&#58;right;&#125;

Ähnliche Themen

  1. Schreiben in Tabellen-Layout
    Von ralf-fennig im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 14.04.2008, 00:07
  2. Tabellen Layout: IE richtig, FF falsch
    Von Christian B im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 10.03.2006, 19:04
  3. Tabellen Layout
    Von Kanzler im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 19.03.2005, 20:31
  4. Layout / Tabellen
    Von Reen im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 01.09.2004, 15:44
  5. Neues Layout - Tabellen - Browserunterstützung Probs
    Von snakey im Forum HTML & CSS Forum
    Antworten: 18
    Letzter Beitrag: 25.06.2004, 14:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •