nicht angemeldet
Ausrichtung:Block-Level-Elemente vs. Tabelle
Hallo,
ich habe nun schon einige male versucht meine Webseite nur mittels CSS zu erstelle, also beim Layout keine Tabelle mehr zu verwenden.
Allerdings stieß ich dabei immer wieder auf Probleme, welche ich nicht gelöst bekam (auch nicht Mithile des Archivs oder anderer Fachbeiträge etc.; Artikel http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/ kenne ich bereits).
Zwar klappt es im allgemeinen relativ gut, die Inhalte zu platzieren, was ja auch gegenüber den Tabellen eine viel geringere Schreibarbeit ist, aber wenn ich die Seite so gestalten möchte, dass diese vom Nutzer selbst in Punkto Schriftgröße etc. anpassbar ist, stoße ich immer wieder auf immense Probleme, d.h. z.B. dass sich z.B. beim Verändern der Schriftgröße der Text aus einem <div> herausragt, und sich über ein anderes <div> drüberlegt etc.
Mein pers. größtes Problem dabei ist die Ausrichtung zweier <div>-Elemente nebeneinander, z.B. links am Fensterrand die Navigation und rechts daneben ein <div> mit dem Inhalt. Ich habe es dann so gemacht, dass ich dem linken <div> ein float:left mitgab, somit stehen die Elemente zumindest einmal nebeneinander (in meinem Fall müssen es unbedingt <div>'s sein).
Wenn ich nun aber wie gesagt die Schriftgröße vergrößere, dann wird der Inhalt des Inhalt-divs ab der Stelle verschoben, an welcher der linke <div> zu Ende ist (Höhe). Ich kann zwar den Abstand zwischen den beiden <div>'s noch vergrößern, dann ist dieses Manko auch beseitigt, aber dann ist mir der Abstand bei "normaler" Schriftgröße (IE) wiederrum zu groß (Geschmackssache).
Ich schaffe es einfach nicht, Block-Level_Elemente so nebeneinander auszurichten, dass, egal bei welcher Vergrößerung, sich die Elemente nicht überlagern. Bei anderen Browsern wie bspw. Mozilla 1.4, wird der Text im <div> Inhalt nur beim Kleinerzoomen verschoben.
Deshalb habe ich letztendlich dann doch immer wieder irgendwie, wenn auch im geringeren Maße auf Tabellen zurückgegriffen.
Link zum Beispiel: http://felten-d.de/impressum.php
Auf dieser Seite sieht man das Problem am Besten, wegen des längeren Inhalts. Die Rahmen habe ich nur zur Verdeutlichung eingeschaltet!
Vielleicht kann mir ja jemand helfen? Wäre schön!
Mfg
Palme
-
Hallo,
ich habe nun schon einige male versucht meine Webseite nur mittels CSS zu erstelle, also beim Layout keine Tabelle mehr zu verwenden.
So 100% bist du noch nicht in der Materie drin. Solche Konstrukte sind mindestens genauso schlecht wie Tabellen als Layout Hilfsmittel:
<div id="menue">
<div class="box">
<a href="./montage/"> <span class="link1">Montage</span></a>
</div>Das was du da als Menü hast ist ganz einfach eine ungeordnete Liste <ul>, die du ohne Probleme mit CSS so gestalten kannst wie du es möchtest (einige Beispiele wie man mit CSS Listen als Menü gestaltet: http://css.maxdesign.com.au/listamatic/index.htm)
Und für die Größenangaben, auch für die Abstände soltest du immer em verwenden, kann zerreist es dir das Layout auch nciht bei Schriftgrößen Änderungen.
Struppi.
-
Hi,
wie Struppi schon gesagt hat: EM ist der Schlüssel für Flexibilität.
Vielleicht hilft Dir auch mein kleines Beispiel hierzu: http://www.1ngo.de/web/em.htmlfreundliche Grüße
Ingo-
Hallo,
wie Struppi schon gesagt hat: EM ist der Schlüssel für Flexibilität.
Auch das habe ich bereits in meinem Beispiel probiert.
Mfg
Palme
-