CSS Homepage, Tabellen ersetzen?

[martinli]

Hallo,
als erstes einmal vorweg, ich habe bisher (leider) kaum Erfahrung mit CSS.
Nach reichlicher Überlegung will ich meine alte Homepage nun neu gestalten. Für den Inhalt nutze ich jetzt Typo3 (hab ich schon bei einer anderen Seite erfolgreich eingesetzt, da aber ohne CSS).
Jetzt möchte ich den Aufbau der Seite mit CSS gestalten.
Dabei stellen sich mir einige Fragen.
Einfach ist es, den Body in CSS zu definieren, Sowie Links.
Wenn ich jetzt aber das alte Tabellen System durch CSS ersetzen will, dann stoße ich sehr schnell an meine Wissensgrenzen.

Kürz beschrieben möchte ich eine etwa folgendermaßen Aufgebaute Homepage basteln (sehr vereinfacht):

|---------------------------------------|

Kopflogo mit Bild
Home
---------------------------------------
Aktuelles
Geschichte
Über Mich
Lebenslauf
Ausbildung
Kontakt
---------------------------------------
Impressum
---------------------------------------

Mit Tabellen ist das natürlich sehr einfach zu erreichen.
Aber ohne weiß ich irgendwie nicht so recht, wie ich das ganze aneinander fügen soll.
Nehme ich da einfach ein
<div>Kopflogo</div>
<div class="menue1"><span class="act">Home</span><span class="notact">Thema1</span>...</div>
<div><span></span class="untermenue"><span class="inhalt"></span></div>
<div class="impressum">Impressum</div>

oder bin ich da jetzt total auf dem Holzweg?
über ein paar Tipps würde ich mich sehr freuen.
Ich hoffe es kommt jetzt keiner auf die Idee mir zu sagen, dass ich keine Ahnung hab und besser bei den Tabellen bleibe!
Vielen Dank schon mal im Voraus an alle Helfer!
Martin

[Dieter Raber]

Hallo martinli,

Im Grunde machst du den gleichen Fehler, den die meisten machen, die von Tabellen- auf CSS-Layouts umsteigen wollen, du stellst die falsche Frage, naemlich die nach dem Layout.
Wenn du HTML von guter Qualitaet schreiben willst und es gleichzeitig einen relativ schmerzfreien Umstieg haben willst, solltest du so vorgehen:

• Stelle zuerst fest, was die Inhalte deiner Seite sind.
• Uebertrage diese in semantisch korrektes in HTML, also etwa so
  <h1>Überschrift 1. Grades</h1>
  //Navigation in ungeordneter Liste
  <ul>
    <li>, evtl mit Submenues
    ....
  // Content
  <h2> - <h6>
    <p>....
  // Footer

Dann packst du die einzelnen Teilbereiche jeweils in einen <div>-Container (Header, Navigation, Content, Footer), evtl alle zusammen in einen Gesamtcontainer. Das ist zwar nicht immer unbedingt notwendig, duerfte es dir als Anfaenger aber erheblich leichter machen.

Bis dahin hast du an Design und Layout noch keinen Gedanken verschwendet, hast aber immerhin schon eine funktionierende Webseite.

Jetzt kommt das CSS. Du faengst an mit Body, was in etwa padding, margin, font und Hintergrund enthalten wird. Dann gibst du deinem Gesamtcontainer eine Breite und setzt ihn mit margin:auto in die Mitte (zumindest ist das ein gaengiges Konzept, hier geht's mehr ums Beispiel. Dann formtierst du nach und nach Header, Navigation usw. Gehe erst zu naechsten Block, wenn der aktuelle Block in alldeinen Testbrowsern 100%ig ist.

Und das war' eigentlich schon.

Gruß,

Dieter

[Gunnar Bittersmann]

Hello out there!

Wenn ich jetzt aber das alte Tabellen System durch CSS ersetzen will, dann stoße ich sehr schnell an meine Wissensgrenzen.

Der Abschnitt <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=Mehrspaltige CSS-basierte Layouts> sollte diese erweitern.

<div>Kopflogo</div>

"ich möchte eine überschrift sein, bitte bitte lass mich ein <hX> sein!" [wahsaga] 'h1' in diesem Falle.

<div class="menue1"><span class="act">Home</span><span class="notact">Thema1</span>...</div>

Ich möchte gern eine Liste sein, bitte bitte lass mich ein 'ul' ('ol') sein!

<div><span></span class="untermenue"><span class="inhalt"></span></div>

Ich auch, mich auch!

<div class="impressum">Impressum</div>

"ich möchte auch eine überschrift sein. damit mein vorgänger mich nicht für zu anmaßend hält, würde es mir vollkommen reichen, eine überschrift von der ordnung X-1 zu sein ..." [wahsaga]

oder bin ich da jetzt total auf dem Holzweg?

Auf dem Holzweg der Divitis, ja.

Ich hoffe es kommt jetzt keiner auf die Idee mir zu sagen, dass ich keine Ahnung hab und besser bei den Tabellen bleibe!

Nein, mit CSS bist du auf dem völlig richtigen Weg.

See ya up the road,
Gunnar

[martinli]

Hallo,
erstmal vielen Dank für eure Hilfe.
Ich habe jetzt mal ein wenig mit div's gebastelt.
Dabei sind 2 Probleme aufgetreten:
1. Ich habe mehrere Divs übereinander. Ein mal das Top und dann das Menü. Deren Ausrichtung ist natürlich oben.
Da drunter soll dann das Untermenü neben dem Inhalt stehen.
Irgendwie schaffe ich es nicht, dass beides nebeneinander/Platzfüllend ist.
Und dann habe ich am unteren Ende der Seite das Impressum als Div.
Dabei habe ich das Problem, dass es entweder nicht unten ist, oder es ist breiter als 100%. Das verstehe ich nicht so ganz. Leider!
Und dann soll es natürlich so sein, dass der Freiraum zwischen Menüleiste und Impressum komplett durch das Untermenü/Textinhalt gefüllt wird. Aber wenn ich da auch 100% als height angebe, dann wird es nicht füllend!
Hier mal der Quelltext, also nur der betreffende Teil.

<div style=" width:100%; height:100%;border:1px solid black; float:top;">
<div style=" width:100%; height:100px;border:1px solid black; float:top;">Top wahrscheinlich als Bild</div>
<div style=" width:100%; height:25px;border:1px solid black; background-color: #eeeeee;" align="center" >Home | Thema1 | Forum | Suche</div>
<div  style=" width:200px; height:200px;border:1px solid black;">
<div>Aktuelles</div>
<div>Geschichte</div>
<div>Über mich</div>
<div style="text-align:left; margin-left:10px;">Lebenslauf</div>
<div style="text-align:left; margin-left:10px;">Ausbildung</div>
</div>
<div style="border:1px solid black;"><h1>Überschrift</h1>Text, ganz viel text...</div>
<div  style=" width:100%; height:25px;border:1px solid black; position:absolute; bottom:0px" align="center" >Impressum</div>
</div>

Vielen Dank wieder im Voraus!
Martin

[Harlequin]

Yerf!

<div style=" width:100%; height:100%;border:1px solid black; float:top;">

float:top gibt es nicht (wozu auch?)
height:100% bezieht sich auf das umgebende Element (vermutlich Body), wie hoch ist das? Hier fehlt vermutlich ein height:100% für body und html.

<div style=" width:100%; height:100px;border:1px solid black; float:top;">Top wahrscheinlich als Bild</div>

sollte dann evtl. auch ein <img> werden...

<div style=" width:100%; height:25px;border:1px solid black; background-color: #eeeeee;" align="center" >Home | Thema1 | Forum | Suche</div>

Hier würde siche statt <div> eine Liste <ul> anbieten, die <li> dabei dann mit float:left

<div  style=" width:200px; height:200px;border:1px solid black;">

Wenn dass das linke Menü werden soll, dann wird hier wohl noch ein float:left benötigt, damit sich der Inhalt daneben anordnet.

<div>Aktuelles</div>
<div>Geschichte</div>
<div>Über mich</div>
<div style="text-align:left; margin-left:10px;">Lebenslauf</div>
<div style="text-align:left; margin-left:10px;">Ausbildung</div>

Sollte wohl auch besser eine Liste sein... Dabei sollte das <ul> das <div> mit der 200px-Breite ersetzen und die <div>s danach sollten die <li>s werden

</div>
<div style="border:1px solid black;"><h1>Überschrift</h1>Text, ganz viel text...</div>

Das <div> zum Gruppieren der Überschrift und des Texts ist ok, evtl den text noch in mehrere Absätze <p> gliedern.

<div  style=" width:100%; height:25px;border:1px solid black; position:absolute; bottom:0px" align="center" >Impressum</div>
</div>

Das sollte mit den entsprechenden Höhenangaben für Body und Html eigentlich funktionieren, aber vorsicht mit der absoluten Positionierung, dadurch können unbeabsichtigt andere teile überdeckt werden, in diesem Fall sollte ein entsprechender unterer Abstand beim Haupttext sichergestellt werden.

Für die fertige Seite solltest Du aber die CSS-Angaben in ein externes Stylesheet auslagern und keine Style-Attribute verwenden. Dadurch lässt sich das Layout sehr einfach für jede neue Seite wiederverwenden. Außerdem steigert es die Übersichtlichkeit und hat noch ein paar andere Vorteile.

Das ist zwar jetzt einiges an "Gemecker", aber nimm es dir bitte zu Herzen. Eine DIV-Wüste ist auch nicht besser als ein Tabellen-Layout. Wenn man schon einen Neuanfang macht, dann richtig.

Gruß,

Harlequin

[martinli]

Hallo,
ich geb mir ganz viel Mühe das alles so gut wie möglich umzusetzen.
Im untermenü habe ich Div's eingesetzt, weil ich dafür schon eine gestaltung fertig habe. Da muss dann ja auch so etwas hinein wie:
"Wenn Link aktiv dann FETT und unterstrichen" Wenn man das genau so gut mit <li> machen kann, dann werd ich das noch ändern.
Allerdings würde ich da ungern Punkte haben, denn durch das einrücken erkennt man das ja auch schon so gut.
Dann, habe ich jetzt das <div style="Untermenü "><div> auch als  float:left gesetzt.
Jetzt erscheint auch der Inhalt (überschrift und Text) dort wo er soll.
Allerdings habe ich das Problem, dass bei längerem text dieser über die volle Breite geht, wenn das <div>Untermenü</div> zuende ist.
Das darf natürlich nicht sein.
Ich hätte es deshalb gern, dass die Sozusagen die oberen beiden <div>'s Kopf und Menü fest oben verankert sind, Dann sollte das <div>Impressum</div> unten verankert sein.
Dazischen sollen dann "Untermenü und Inhalt" den Platz ausfüllen.
Wenn viel Text ist, dann soll sich alles weiter ausweiten, so dass man scroolen muss. Das müsste doch eigentlich möglich sein oder?

Hier noch mal der jetzt verbesserte Quelltext und noch mal Vielen Vielen Dank!

<div style=" width:100%; height:100px;border:1px solid black;">Top wahrscheinlich  als Bild</div>
 <div style=" width:100%; height:25px;border:1px solid black; background-color: #FFFFFF;"  align="center" >Home | Thema1 | Forum | Suche</div>
 <ul  style=" width:200px; height:200px;border:1px solid black; float:left">
   <li>Aktuelles</li>
   <li>Geschichte</li>
   <li>Über mich</li>
   <li style="text-align:left; margin-left:10px;">Lebenslauf</li>
   <li style="text-align:left; margin-left:10px;">Ausbildung</li>
 </ul>
 <div style="border:1px solid black;"><h1>Überschrift</h1>Text, ganz viel text...</div>
 <div  style=" width:100%; height:25px;border:1px solid black; position:absolute; bottom:0px" align="center" >Impressum</div>

Viele Grüße
Martin

[Harlequin]

Yerf!

ich geb mir ganz viel Mühe das alles so gut wie möglich umzusetzen.
Im untermenü habe ich Div's eingesetzt, weil ich dafür schon eine gestaltung fertig habe. Da muss dann ja auch so etwas hinein wie:
"Wenn Link aktiv dann FETT und unterstrichen" Wenn man das genau so gut mit <li> machen kann, dann werd ich das noch ändern.

CSS ist es egal, auf welche Elemente man es anwendet. D.h. man muss evtl nur ein paar Selektoren anpassen, aber ansonsten sollte das keinen Unterschied machen.

Allerdings würde ich da ungern Punkte haben, denn durch das einrücken erkennt man das ja auch schon so gut.

Die kann man per CSS entfernen. Im Prinzip lässt sich mit CSS jede Darstellung erreichen, gerade deshalb sollte man die HTML Elemente nicht wegen dem Aussehen, sondern augrund des damit auszuzeichnenden Textes aussuchen.

Dann, habe ich jetzt das <div style="Untermenü "><div> auch als  float:left gesetzt.
Jetzt erscheint auch der Inhalt (überschrift und Text) dort wo er soll.
Allerdings habe ich das Problem, dass bei längerem text dieser über die volle Breite geht, wenn das <div>Untermenü</div> zuende ist.
Das darf natürlich nicht sein.

Hier gibt es 2 Möglichkeiten: entweder dem <div> um den Text auch ein float:left geben, oder aber ein margin-left, dass so breit ist, wie das Menü links daneben.

Ich hätte es deshalb gern, dass die Sozusagen die oberen beiden <div>'s Kopf und Menü fest oben verankert sind, Dann sollte das <div>Impressum</div> unten verankert sein.
Dazischen sollen dann "Untermenü und Inhalt" den Platz ausfüllen.
Wenn viel Text ist, dann soll sich alles weiter ausweiten, so dass man scroolen muss. Das müsste doch eigentlich möglich sein oder?

Also in etwa das hier : http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss

Allerdings mit einer min-height für den Inhalt... wie einfach das zu realisieren ist, weis ich nicht, ich hab es selber noch nicht probiert.

Gruß,

Harlequin

[martinli]

Hallo,
also eigentlich stimmt jetzt wirklich alles, bis auf die tatsache, dass das Impressum nicht nach Unten ausgerichtet ist.
Ich hätte es gern. dass das unten ist auch wenn nicht viel Inhalt im Inhalts Div ist. Aber leider habe ich das bisher noch mit keinem befehl geschafft.
<div  style=" clear: both;
    font-size: 0.9em;
    margin: 1; padding: 0.1em;
    text-align: center;
    background-color: #FFFFFF; border: 1px solid black;
    ">
    Impressum</div>
Dieses Teil müsste einfach noch am unteren ende fixiert sein, aber so frei sein, dass es auch weiter nach unten rutscht, wenn der text eben so lang ist, dass man scroolen müsste.

Aber ansonsten ist das soweit so gut! Vielen Dank!
Martin

[Harlequin]

Yerf!

Dieses Teil müsste einfach noch am unteren ende fixiert sein, aber so frei sein, dass es auch weiter nach unten rutscht, wenn der text eben so lang ist, dass man scroolen müsste.

Die einfschste Lösung wäre ein min-height für den Inhalt, wenn da nicht ein problem wäre: wie hoch muss diese sein? 100%-Kopfzeile-Fußzeile... CSS kann leider noch nicht rechnen :-(

Die einzige Lösung die ich mir im Moment vorstellen könnte wäre über das position:absolut, dass Du am Anfang drinnen hattest. Dazu müsste man dann den umgebenden Container auf eine Mindesthöh von 100% bringen[1] und dem Inhalt ein padding-bottom in der Höhe der Fußzeile, damit die letzten Zeilen des Textes nicht überdeckt werden.

Aber vielleicht weiß jemand anders hier noch eine Lösung?

Gruß,

Harlequin

[1] min-height ist hier die passende Angabe, wird aber vom IE6 noch nicht verstanden. Allerdings interpretiert der height wie andere min-height, womit man über CSS-Hacks oder ConditionalComments zum Ziel kommen kann.

[Gunnar Bittersmann]

Hello out there!

Wenn man das genau so gut mit <li> machen kann, dann werd ich das noch ändern.

Falsche Zeitform. Nicht Fur, sondern Präsens ist angesagt: „dann ändere ich das augenblicklich“.

Allerdings würde ich da ungern Punkte haben, denn durch das einrücken erkennt man das ja auch schon so gut.

_Erst_ schreibst du das HTML. Dabei benutzt du die Elemente, die die Dokumtnstruktur beschreiben: 'h1', 'h2', ... für Überschriften; 'p' für Textabsätze, 'ul'/'ol' für Listen; 'li' für Listenitems; ... – ohne Blick auf die später gewünschte Darstellung. (Ob du Bullets vor Listenitems haben möchtest oder nicht, spielt in diesem Stadium nicht die geringste Rolle.)

_Danach_ kümmerst du dich um die Gestaltung mit CSS. (Jetzt ist die Zeit, ungewünschte Bullets vor Listenitems wegzumachen. Dennoch bleiben diese auch ohne Bullets noch das, was sie sind: Listenitems 'li'.)

<div style=" width:100%; height:100px;border:1px solid black;">Top wahrscheinlich  als Bild</div>
<div style=" width:100%; height:25px;border:1px solid black; background-color: #FFFFFF;"  align="center" >Home | Thema1 | Forum | Suche</div>
<ul  style=" width:200px; height:200px;border:1px solid black; float:left">

Notiere CSS-Angaben NIEMALS in 'style'-Attributen!! Der Quelltext wird unleserlich; Fehlersuche sehr schwer.

Mach alle Angaben zentral im http://de.selfhtml.org/css/formate/einbinden.htm#zentral@title='style'-Element oder in einem <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=separaten Stylesheet>! Letzteres hat neben der besseren Lesbarkeit auch noch den Vorteil, dass du es für alle Seiten deiner Site verwenden kannst und spätere Änderungen nur an einer Stelle durchführen musst.

<li>Über mich</li>
   <li style="text-align:left; margin-left:10px;">Lebenslauf</li>
   <li style="text-align:left; margin-left:10px;">Ausbildung</li>

Nein, „Lebenslauf“ und „Ausbildung“ sind keine Items der ganzen Liste, sondern Unterpunkte zu „Über mich“. Das sollte auch im Markup ungesetzt sein.

Dein HTML sollte so aussehen:

<h1>Top wahrscheinlich  als Bild</h1>  
<ul id="Hauptnavigation">  
  <li>Home</li>  
  <li>Thema1</li>  
  <li>Forum</li>  
  <li>Suche</li>  
</ul>  
<ul id="Subnavigation">  
  <li>Aktuelles</li>  
  <li>Geschichte</li>  
  <li>Über mich  
    <ul>  
      <li>Lebenslauf</li>  
      <li>Ausbildung</li>  
    </ul>  
  </li>  
</ul>

Im Stylesheet dann deine Angaben wie z.B.

#Subnavigation  
{  
  width:  200px;  
  height: 200px;  
  border: 1px solid black;  
  float:  left;  
}

See ya up the road,
Gunnar

[Patrick Andrieu]

Hallo Gunnar!

Falsche Zeitform. Nicht Fur, sondern Präsens

^^^

Oh... eine neue Zeitform?

Viele Grüße aus Frankfurt/Main,
Patrick

[Harlequin]

Yerf!

Falsche Zeitform. Nicht Fur, sondern Präsens
                           ^^^

Oh... eine neue Zeitform?

Furrys sind die Zukunft!

*scnr*

Harlequin

[Gunnar Bittersmann]

Hello out there!

Falsche Zeitform. Nicht Fur, sondern Präsens
                           ^^^
Oh... eine neue Zeitform?

Nö, Legasthenie. Ich dachte, ich wäre schon beim zweiten 'u' gewesen.

See ya up the road,
Gunnar