Peter Mairhofer: Thema: Seitenlayout mit div+CSS

SELF-Forum

Thema: Seitenlayout mit div+CSS

Peter Mairhofer
– Informationen zu den Bewertungsregeln

Hi,

Ich arbeite gerade wieder an einem Webprojekt und bin dabei, dieses (nach Jahren Design mit Tabellen) komplett auf CSS zu machen.

Dabei stoße ich aber an relativ große Probleme, v.a. mit Zentierung von Elementen, Bildern usw.

Daher hab ich die Frage ob jemand einen super Link zu dem Thema kennt, am besten für "Umsteiger" wie mich,, weniger eine Referenz, sondern eher, wie man eine Seite mit div's strukturiert, Erklärungen, konkrete Anwendungsgebiete, ...

Im Internet findet sich viel und nichts; zumeist irgendwelche Forenbeiträge, zu oberflächliche Artikel, kurzum: ich habe bis jetzt noch nichts brauchbares gefunden.

lg,
Peter

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Thema: Seitenlayout mit div+CSS

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Ich arbeite gerade wieder an einem Webprojekt und bin dabei, dieses (nach Jahren Design mit Tabellen) komplett auf CSS zu machen.

    Dabei stoße ich aber an relativ große Probleme, v.a. mit Zentierung von Elementen, Bildern usw.

    Das grosse Problem bei so einem Vorhaben ist der Versuch ein Tabellenlayout möglichst identisch mit CSS umzusetzten. Mein Tipp lass es!
    Entweder bleib bei den Tabellen oder versuche ein Layout zu entwickeln, dass die Möglichkeiten die du mit CSS hast nutzt.

    Das größte Problem dabei ist, du hast mit einer Tabelle ein Raster, sowas kannst du nur schwer mit CSS abbilden. CSS Elemente sind fliessend und passen sich an, d.h. du bist viel flexibler als mit einer Tabelle. Nur muss das Layout das zulassen.

    Struppi.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Thema: Seitenlayout mit div+CSS

      Peter Mairhofer
      – Informationen zu den Bewertungsregeln

      Ich arbeite gerade wieder an einem Webprojekt und bin dabei, dieses (nach Jahren Design mit Tabellen) komplett auf CSS zu machen.

      Dabei stoße ich aber an relativ große Probleme, v.a. mit Zentierung von Elementen, Bildern usw.

      Das grosse Problem bei so einem Vorhaben ist der Versuch ein Tabellenlayout möglichst identisch mit CSS umzusetzten. Mein Tipp lass es!

      Nein, das einzige Problem ist, dass ich für das Projekt ein Design vorgegeben habe und ich dieses eben möglichst genau implementieren sollte.

      Falls manche Kleinigkeiten nicht gehen ist das nicht so schlimm, aber z.B. dass es nicht möglich ist, innerhalb eines div's weitere Elemente zu zentrieren kann ich natürlich niemandem erklären.

      Und jetzt hab ich mit CSS bereits angefangen und möchte es auch so fertig machen :)

      lg,
      Peter

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Thema: Seitenlayout mit div+CSS

        Struppi Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Das grosse Problem bei so einem Vorhaben ist der Versuch ein Tabellenlayout möglichst identisch mit CSS umzusetzten. Mein Tipp lass es!

        Nein, das einzige Problem ist, dass ich für das Projekt ein Design vorgegeben habe und ich dieses eben möglichst genau implementieren sollte.

        d.h. dein Layout ist schon auf die Eigenschaften von CSS zugeschnitten.

        Falls manche Kleinigkeiten nicht gehen ist das nicht so schlimm, aber z.B. dass es nicht möglich ist, innerhalb eines div's weitere Elemente zu zentrieren kann ich natürlich niemandem erklären.

        Das ist auch ohne Probleme möglich

        Struppi.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Thema: Seitenlayout mit div+CSS

          Peter Mairhofer
          – Informationen zu den Bewertungsregeln

          Nein, das einzige Problem ist, dass ich für das Projekt ein Design vorgegeben habe und ich dieses eben möglichst genau implementieren sollte.

          d.h. dein Layout ist schon auf die Eigenschaften von CSS zugeschnitten.

          Ich weiss jetzt leider nicht ob du das ironisch meinst oder nicht ;-) Aber ich habe in Papierform ein Design das ich in HTML anwenden muss.

          Falls manche Kleinigkeiten nicht gehen ist das nicht so schlimm, aber z.B. dass es nicht möglich ist, innerhalb eines div's weitere Elemente zu zentrieren kann ich natürlich niemandem erklären.

          Das ist auch ohne Probleme möglich

          Und wie?

          Ich versuche das schon seit längerem mit vertical-align, text-align und auch margin: auto.
          Keine Chance :-( Meine Angaben scheinen ignoriert zu werden :(

          lg,
          Peter

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Thema: Seitenlayout mit div+CSS

            Struppi Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Nein, das einzige Problem ist, dass ich für das Projekt ein Design vorgegeben habe und ich dieses eben möglichst genau implementieren sollte.

            d.h. dein Layout ist schon auf die Eigenschaften von CSS zugeschnitten.

            Ich weiss jetzt leider nicht ob du das ironisch meinst oder nicht ;-) Aber ich habe in Papierform ein Design das ich in HTML anwenden muss.

            Naja, wie gesagt, CSS hat ein paar Eigenschaften, die sich weder mit Tabellen noch mit Papier darstellbar sind. Das HTML ist im Prinzip nur zur Auszeichnung des Inhaltes da.

            Falls manche Kleinigkeiten nicht gehen ist das nicht so schlimm, aber z.B. dass es nicht möglich ist, innerhalb eines div's weitere Elemente zu zentrieren kann ich natürlich niemandem erklären.

            Das ist auch ohne Probleme möglich

            Und wie?

            CSS

            #layout {  
border:1px solid black;  
}  
#layout p {  
width:50%;  
margin:0 auto;  
border:1px solid black;  
}

            HTML

            <div id="layout">  
<p>Ein Element</p>  
</div>

            Ich versuche das schon seit längerem mit vertical-align, text-align und auch margin: auto.
            Keine Chance :-( Meine Angaben scheinen ignoriert zu werden :(

            Dann ist eventuell dein CSS Fehlerhaft, wenn du Firefox nutzt, der zeigt dir auch CSS Fehler in der Fehlerkonsole an.

            Struppi.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

    2. Thema: Seitenlayout mit div+CSS

      floater
      – Informationen zu den Bewertungsregeln

      Hallo,

      Das größte Problem dabei ist, du hast mit einer Tabelle ein Raster, sowas kannst du nur schwer mit CSS abbilden. CSS Elemente sind fliessend und passen sich an, d.h. du bist viel flexibler als mit einer Tabelle. Nur muss das Layout das zulassen.

      Struppi.

      Das Raster einer Tabelle lässt sich doch eigentlich ganz einfach nachbilden.
      Man kann per CSS Elementen u.a. Tabellen-, Reihen- und Zellen-Eigenschaften zuordenen.

      Leider interpretieren es (noch) nicht alle Browser, in FF funktioniert es.

      So konnte man mit DIVs eine Tabellenstruktur ganz einfach nachbauen.

      Gruß,
      Floater

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Thema: Seitenlayout mit div+CSS

        Thorsten Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo!

        So konnte man mit DIVs eine Tabellenstruktur ganz einfach nachbauen.

        Du meinst, so kann ich möglichst kompliziert etwas nachbauen, was ich aufgrund seiner Unflexibilität nicht mehr verwenden möchte? (Die Semantik mal weggelassen)
        Ja, das geht. Es macht einfach nur wenig Sinn.

        Viele Grüße
        Thorsten

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Thema: Seitenlayout mit div+CSS

          floater
          – Informationen zu den Bewertungsregeln

          Hallo,

          Du meinst, so kann ich möglichst kompliziert etwas nachbauen, was ich aufgrund seiner Unflexibilität nicht mehr verwenden möchte? (Die Semantik mal weggelassen)
          Ja, das geht. Es macht einfach nur wenig Sinn.

          Viele Grüße
          Thorsten

          also kompliziert nachzubauen ist das überhaupt nicht!!

          Ob du nun Tabellenelemente wie TABLE, TR und TD verwendest oder zum Beispiel <div class="tableDiv">, <div class="tableRowDiv"> sowie <div class="tableCellDiv">und diesem DIVs Tabelleneigenschaften zuordnest, das ist doch überhaupt KEIN Problem.

          Es macht wenig Sinn? Diese Äußerung ist unsinnig. Wenn ich an Auswertung von XML-Daten denke, dann macht es sogar besonders Sinn. Denn dann, wenn tabellarische Daten enthalten sind, die auch tabellarisch dargestellt werden sollen. Das kann, bzw. KÖNNTE ich mit CC machen.
          WENN es in allen Browsern funktionieren würde.

          Gruß,
          Floater

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Thema: Seitenlayout mit div+CSS

            floater
            – Informationen zu den Bewertungsregeln

            Hallo,

            Das kann, bzw. KÖNNTE ich mit CC machen.

            Tippfehler: ich meinte natürlich nicht CC sondern CSS ;)

            Gruß,
            Floater

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          2. Thema: Seitenlayout mit div+CSS

            Struppi Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Es macht wenig Sinn? Diese Äußerung ist unsinnig. Wenn ich an Auswertung von XML-Daten denke, dann macht es sogar besonders Sinn. Denn dann, wenn tabellarische Daten enthalten sind, die auch tabellarisch dargestellt werden sollen. Das kann, bzw. KÖNNTE ich mit CC machen.

            Warum nicht mit Tabellen?
            Dafür sind sie doch da.

            Struppi.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Thema: Seitenlayout mit div+CSS

    Thomas Luethi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Ich arbeite gerade wieder an einem Webprojekt und bin dabei, dieses (nach Jahren Design mit Tabellen) komplett auf CSS zu machen.

    Brav, brav! ;-) Und viel Spass beim Begreifen und Umschiffen
    von allen Browser-Bugs!

    Dabei stoße ich aber an relativ große Probleme, v.a. mit Zentierung von Elementen, Bildern usw.

    Grundsätzlich zum horizontalen Zentrieren:
    Ein Element zentrieren: * { margin-left:auto; margin-right:auto; }
    Den Inhalt eines Elements zentrieren: * { text-align:center; }

    Daher hab ich die Frage ob jemand einen super Link zu dem Thema kennt, am besten für "Umsteiger" wie mich,, weniger eine Referenz, sondern eher, wie man eine Seite mit div's strukturiert, Erklärungen, konkrete Anwendungsgebiete, ...

    Aus meinen Bookmarks (die ich v.a. hier eingesammelt habe):

    http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
    http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/
    http://www.positioniseverything.net/
    http://www.positioniseverything.net/articles/onetruelayout/
    http://www.alistapart.com/articles/holygrail
    http://www.dynamicdrive.com/style/layouts/
    http://www.lipfert-malik.de/webdesign/tutorial/bsp/drei-spalten-layout.html

    Ich hoffe, das hilft Dir weiter!

    Freundliche Grüsse
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln