zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout: Tabelle -> CSS | ohne Schönheitsfehler?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.08.2006, 03:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 26
Knickedi befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.08.2006, 10:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.08.2006, 11:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 26
Knickedi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 03.08.2006, 11:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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?
Mit Zitat antworten
  #5 (permalink)  
Alt 03.08.2006, 11:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 26
Knickedi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 03.08.2006, 11:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.08.2006, 12:12
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.328
E|H befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 03.08.2006, 12:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 26
Knickedi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 03.08.2006, 12:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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 %.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.08.2006, 12:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.08.2006
Beiträge: 26
Knickedi befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Frage zu CSS Layout ignore CSS 1 07.05.2007 18:02
Mein erstes CSS Layout Sonriente CSS 0 03.04.2007 02:01
CSS layout was 'mit geht' Iceman* CSS 2 30.12.2005 09:36
includes bei css layout dan CSS 2 10.03.2004 19:21
Tabelle mit CSS zentrieren to.ni CSS 8 27.02.2004 11:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:06 Uhr.