XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Layout: Tabelle -> CSS | ohne Schönheitsfehler? (http://xhtmlforum.de/showthread.php?t=41081)

Knickedi 03.08.2006 03:07

Layout: Tabelle -> CSS | ohne Schönheitsfehler?
 
Hi alle zusammen,

Bin hier durch einen Feund gelandet und finds hier auch ganz nett.
Man hat ihm ein paar Tutorials Fürs Layout empfohlen und da hab ich gelich mal reingeschaut, da ich selber Anfänger bin! Anscheinend soll man ja alles mit CSS schaffen, wenn man nur weis wie... Ich hab Probleme wenn es um die Dynamik in der Breite geht:

http://www.knickedi.m00.de/beispiele...t-tabelle.html
http://www.knickedi.m00.de/beispiele...t-mit-css.html

Die Dateinamen verraten es schon...
Beide Codes sind XHTML Strict konform.


Wenn man die Dokumente öffnet, sieht das ziemlich gleich aus, aber da gibt es kleine Einzelheiten im CSS Layout, die nicht gleich auffallen, die mich aber stören:

- Ich krieg die Hintergrunfarbe vom Inhalt (neben der Navigation) und unter dem Footer niht verschieden
- Die Seite soll sich dem Banner komplett anpassen, also ab 800px komplett scrollbar sein
- aus dem 2ten Punkt folgt das Nächste: zieht mal das Fenster bei CSS zusammen und scrollt da nach rechts... hässlich find ich das


Ich vermute, dass ich da zu unerfahren bin, aber kriegt man das wirklich wie bei der Tabelle hin?
Bei Layouts mit fester Breite ist die Sache mit CSS gar nicht schwer, aber bei solcher Dynamik verzweifle ich daran!

Ist es so schlimm mal Tabelle fürs Layout zu nutzen?
Der Vorteil der geringeren Größe, wirkt nur dann wenn ich die Formatierung in einer Datei auslagere und selbst dann ist der Unterschied gering. (Schon klar, dass bei mach anderem Layout die Tabellen einfach riesig werden, aber da wüsste ich, wie ich CSS anwenden kann!)


Über Verbesserungsvorschläge bezüglich des Codes bin ich sehr dankbar!
Bin Anfänger und muss noch lernen^^


Vielen Dank im Voraus
MfG Knickedi

fricca 03.08.2006 10:01

Willkommen im Forum!

Zitat:

Zitat von Knickedi
Man hat ihm ein paar Tutorials Fürs Layout empfohlen und da hab ich gelich mal reingeschaut,

Wenn eines dieser Tutorials empfohlen hat, die gesamte Seite als Liste aufzubauen, dann solltest du dieses bitte nicht mehr verwenden.
Bitte ändere deinen Seitenaufbau. Zur Strukturierung von zusammengehörenden Bereichen eignet sich das div-Element.
Für diese Bereiche vergib dann bitte sinnvolle Namen. Warum heißt der Bereich deiner Navigation "outer"? Und der Inhalt "inner"?

Für mich sieht das, was du da machst, sehr danach aus, dass du verschiedene Layouttechniken mischst, ohne wirklich verstanden zu haben, was da jeweils passiert. Zeig doch bitte deine Vorbilder her.
Ein Beispiel: die Eigenschaften, die du auf #content anwendest, dienen eigentlich dazu, gleichlange Spalten zu erzeugen. Das machst du aber dadurch zunichte, dass du der Navigation eine andere Hintergrundfarbe gibst und das clear innerhalb von #content vergisst.
Bitte arbeite die FAQ dieses Forums durch, dort findest du auch viel Information zu float und clear.

Zitat:

- Die Seite soll sich dem Banner komplett anpassen, also ab 800px komplett scrollbar sein
Dafür brauchst du eine Mindestbreite (min-width).


Zitat:

Ist es so schlimm mal Tabelle fürs Layout zu nutzen?
Ja, das ist eine Sünde. ;) Tabellen sind für die Strukturierung tabellarischer Daten und für sonst nichts.
Wenn du eine Darstellung willst, die sich wie Tabellen/-zellen verhält, dann gibt es die entsprechenden display-Eigenschaften. Das scheitert dann nur an der mangelnden Unterstützung durch einen weit verbreiteten Browser.

Grüße
fricca

Knickedi 03.08.2006 11:18

Zitat:

Warum heißt der Bereich deiner Navigation "outer"? Und der Inhalt "inner"?
Das hatte ich irgendwo aufgeschnappt und im Sinne von "ein Kontainer drin und einer draußen" übernommen. Hast aber recht, sieht kacke aus...

Zitat:

Dafür brauchst du eine Mindestbreite (min-width)
Das wird aber vom IE nicht genommen, oder?

Zitat:

Bitte arbeite die FAQ dieses Forums durch, dort findest du auch viel Information zu float und clear.
Hätte ich eigentlich gleich machen müssen (es war spät^^).
Mach ich jetzt mal, versuch mich nochmal an dem layout und meld mich am besten danach nochmal.


PS:
Zitat:

Zeig doch bitte deine Vorbilder her.
Vorbild? Ich! ... Wo soll ich mich da orientieren bei der Fülle an Infos?
Bin auch nicht sooo lange dabei.

MfG

fricca 03.08.2006 11:23

Zitat:

Zitat von Knickedi
[min-width] Das wird aber vom IE nicht genommen, oder?

Dafür gibt es Workarounds.
Aber bitte versteh erst einmal die Grundlagen, bevor du dich an die Fehlerbehebung für den IE machst.

Zitat:

Vorbild? Ich! ...
Auf die negative Verschiebung des Navigationsbereiches bist du doch nicht selbst gekommen?

Knickedi 03.08.2006 11:40

Zitat:

Zitat von fricca
Auf die negative Verschiebung des Navigationsbereiches bist du doch nicht selbst gekommen?

Ich hab alles Mögliche durchgelesen und da bin ich mal auf negative Angaben gestoßen. Ich glaub, dass ich diese Idee von einem Beispiel-Layout abgekupfert habe...

MfG Knickedi

fricca 03.08.2006 11:45

Zitat:

Zitat von Knickedi
Ich glaub, dass ich diese Idee von einem Beispiel-Layout abgekupfert habe...

Ja, eben. Dann such dieses Beispiel-Layout raus und versuch genau zu verstehen, was dort gemacht wird. Wenn du etwas nicht verstehst, dann frag nach - anhand des Vorbildes kann man dir sicher mehr erklären.
Was du im Moment machst, verfehlt das Ziel.

E|H 03.08.2006 12:12

Schön wäre es auch, wenn du dein HTML nicht am Design orientierst, sondern an der Dokumentstruktur. Die hängt nur vom Inhalt ab.

Daher ist die Aussage, divs seien dafür geeignet, etwas gefährlich. Das ist in einer ziemlich div-Suppe ausgeartet.

Es kommt auch vor, daß man seine Designvorstellungen über den Haufen wirft, nachdem man sich einige Gedanken dazu gemacht hat:

http://www.vorsprungdurchwebstandard.../retro-coding/

Unser Lieblingslink zum Thema Semantik. :D

Knickedi 03.08.2006 12:19

Zitat:

Zitat von fricca
Was du im Moment machst, verfehlt das Ziel.

Warum? Ich will so ein Layout, wie das oben (erster Beitrag), das ich mit Tabelle problemlos hinbekommen habe.

Das Layout von dem ich abgekupfert habe, hat eine feste Breite. Hat Header und Footer und genau den selben auf Aufbau mit den negativen Werten für Navigation. Da Problem an diesem Layout ist, dass es eine Feste Breite hat und dass sich der Footer nur dem Inhalt anpasst, aber bei längerer Navigation fehlerhaft dargestellt wird...

Aber bevor ich mitreden kann, les ich lieber noch ein bisschen.
Hab immer noch nicht die FAQ gelesen...

MfG Knickedi

fricca 03.08.2006 12:25

Zitat:

Zitat von Knickedi
Zitat:

Was du im Moment machst, verfehlt das Ziel.
Warum?

Weil du nicht verstanden hast, welchen Sinn die negative Verschiebung hat. Siehe oben.
Im Moment ist das alles völlig daneben - du floatest und verschiebst jetzt den #content-Bereich.

Enferne bitte erstmal alle deine padding-divs.
Setz für deinen "Header" eine h1-Überschrift ein.
Setz für deine Navigation eine Liste ein.
Verwende p-Elemente für Textabsätze.
Vergiss das b-Element.
Enferne pt als Einheit für die Schriftgröße - dafür eignen sich em oder %.

Knickedi 03.08.2006 12:50

Alles klar, bis auf...

Zitat:

Zitat von fricca
Enferne bitte erstmal alle deine padding-divs.

Wie soll ich das dann regeln? Der IE addiert ja padding zu width...
Oder komm das auch später?

Ist es ratsam <!--[if IE]> zu benutzen?


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023