Du bist nicht angemeldet.

[Diskussion] layouten per Tabelle oder Div

  • 1
  • 2

Ingo

Fortgeschrittener

Beiträge: 570

  • Private Nachricht senden

21

Dienstag, 8. Juni 2004, 06:39

Hi,
mein kleiner "Code-Generator" ist zwar noch nicht ganz fertig, aber jetzt schon mal online:
http://www.1ngo.de/web/css-layout.html
Zwar längst nicht so schön wie Zen-Garden, aber die Intention ist ja auch eine ganz andere: zu zeigen, mit welch relativ kleinen Änderungen eine Seitenaufteilung über CSS geändert werden kann.

btw.: der style-switcher funktioniert leider in meinem Opera 7.11 nicht. Wie sieht's in neueren Operas aus? Oder weiß jemand, wieso der

Quellcode

 
1

document.getElementsByTagName("style")[0].disabled = true;

nicht versteht?
Gruß
Ingo

Progman

Schüler

Beiträge: 88

  • Private Nachricht senden

22

Mittwoch, 9. Juni 2004, 20:00

Zitat von »memowe«

Kein sehr schöner Code-Stil, ich habe Euch gewarnt: http://www.memowe.de/css-clan/

Los, macht es besse! :)

Gruß
Mirko


Quellcode

 
1

<link rel="stylesheet" href="style.css" type="text/css" media="all" />


Ich frag jetzt mal nicht warum alle CSS-Medien die gleiche CSS-Datei bekommen, insbesondere weil in der CSS-Datei auch keine Unterscheidung der Medien ist. Wenn ich eins hasse dann sind es Druckaufträge wo Menüs und unnötige Bilder draufsind.

Quellcode

 
1

<div id="header"></div>


Ist klar das du da mit CSS zauberst, aber ein Element ohne Inhalt hat aus informatieller Sicht keinen Sinn.

Quellcode

 
1
2
3

linkes menu
rechtes menu
eigentlicher inhalt


Achte darauf, dass es auch Browser ohne CSS gibt und ggf. CSS deaktiviert haben. Um dann endlich beim Scrollen zum eigentlichen Inhalt zu kommen (News, Memberliste, GB...) ist auch nicht schön, siehe dazu: http://meta.wikipedia.org/wiki/Layout_de…and_bolts_of_it Erster Punkt.

Quellcode

 
1
2
3
4

<div id="rechtespalte">
	<p>Quickvote</p>
	Kommt noch.
</div>


Erst der Inhalt dann das Layout... *duckrenn*

p.s.: Wir weichem vom Thema ab...
Signatur von »Progman« http://tut.php-q.net/ - http://www.htmlwiki.de/
Key fingerprint: 2A86 124E 9889 1701 B138 6B48 1123 E583 873D 7947
Key ID: 0x873D7947

oop1

Meister

Beiträge: 1 639

  • Private Nachricht senden

23

Samstag, 22. Januar 2005, 16:29

Ich habe mich jetzt auch mal mit css zum layouten beschäftigt. Ich bin natürlich den falschen weg gegangen, also zuerst design und vielleicht nie content, da ich nix sinnvolles habe.
Eine konkrete genaue step by step Anleitung wie man z.B. ein layout mit zwei spalten macht habe ich dabei nicht gefunden.
Bestenfalls so was
http://www.css4you.de/wslayout1/ex0008.html

Und das ist auch nicht step by step erklärt.
WIE man grundsätzlichs vorgeht um ein billiges zweispaltenlayout zu machen, was ich mit ner tabelle in ein paar sekunden habe, findet man wohl nur nach langer suche.
Ich finde die Frage von Fraggle nach einem tutorial berechtigt.

Ich finde eine normale Programmiersprache einfacher, da weiß ich immer was meine Funktion macht und was sie zurückliefert und muß nicht rätsel raten und sämtlich Atribute im css bereich eines Beispiels ändern um zu sehen was paßiert. (Trial and error)

Der Vergleich hinkt etwas, da man layouts per css nicht mit einer Programmiersprache vergleichen kann.

Nur mal meine Meinung hierzu.
Signatur von »oop1« _________

memowe

Erleuchteter

Beiträge: 3 324

Vorname: Mirko

  • Private Nachricht senden

24

Sonntag, 23. Januar 2005, 12:18

HTML und CSS haben ja auch mit Programmierung nichts zu tun, dahingehend, dass es kein definiertes Verhalten der Browser gibt, was mit dem Kram anzufangen ist. Aber es gibt einen Standard, was sie damit anfangen _sollen_. Wenn man sich ein bisschen damit auskennt, muss man auch nur wenig ausprobieren, weil man weiß, was die oder die andere Eigenschaft tun sollen. Aber dass man nur wenig ausprobieren muss, wenn man weiß, was man tut, ist sicherlich nichts neues.

Gruß
Mirko :)

PS: Zig Anleitungen habe ich bei meiner ersten Google-Suche nach "css two columns" innerhalb von "0,41 Sekunden" gefunden.
Signatur von »memowe« Mirko Westermeier - Public key: 0x730E195D
Key fingerprint = 55A8 9646 9B58 60AC B5BC 9661 FDD4 93C0 730E 195D

Nash.Bridges

Profi

Beiträge: 1 426

  • Private Nachricht senden

25

Sonntag, 23. Januar 2005, 14:19

Bis man weiß, wie ein Browser auf eine CSS-Angabe reagiert, muss man etwas Erfahrung mit CSS haben - genauso wie mit Tabellen. Ich wette, als du mit Tabellen-Designs angefangen hast, hast du auch mit "Trial and Error" rumprobiert, bis es gepasst hat. Und mit der Zeit hast du ein gespührt dafür bekommen, was du wie machen musst.
Mit CSS ist es genauso. Als ich damit angefangen habe, Webseiten mit CSS zu formatieren, musste ich viel mit "Trial and Error" machen. Mitlwerweile weiß ich ungefährt, was der Browser wie anzeigt und kann sogar einschätzen, was den Validatoren (HTML und CSS) schmeckt oder wo sie meckern.

Alles eine Sache der Erfahrung, man muss halt ein bisschen Zeit und Arbeit investieren, aber irgendwann klappt das.

MfG Arne :).

oop1

Meister

Beiträge: 1 639

  • Private Nachricht senden

26

Sonntag, 23. Januar 2005, 16:08

Zitat von »memowe«


PS: Zig Anleitungen habe ich bei meiner ersten Google-Suche nach "css two columns" innerhalb von "0,41 Sekunden" gefunden.


Naja zig Ergebnisse, aber nicht unbedingt step by step Anleitungen mit Erklärungen
wofür die einzelnen Attribute gut sind.

Ich habe sogar zwei Generatoren für 2 Spalten Layouts gefunden
http://www.inknoise.com/experimental/layoutomatic.php

und

http://www.csscreator.com/version2/pagelayout.php


Beides entspricht nicht meinen Vorstellungen von einem billigen 2 spalten Layout. Ich habe vor ein paar tagen mal beides ausprobiert, wenn ich content hinzufüge kommt irgendwann der Zeitpunkt X wo sich quasi "löcher" bilden, dann nehem ich doch viel lieber Tabellen.

Wie in der Anlage zu sehen, ist oben so ein "weißer streifen" den ich nicht weg bekomme.
So ähnliche Sachen waren auch bei dem anderen Generator der Fall oder bei anderen CSS Beispielseiten.
Bei Tabellen weiß ich wenigsten Ansatzweise was ich mache.
;) Wenn man sich nur mal
gelegentlich damit befaßt, finde ich CSS einfach ungeeignet, Für Leute die mit Webseiten
Geld verdienen ok, aber ich kann mich damit nicht wirkllich anfreunden.

Zitat

Alles eine Sache der Erfahrung, man muss halt ein bisschen Zeit und Arbeit investieren, aber irgendwann klappt das.


Ja, das wird es sein, wobe es wohl ne ganze Menge Zeit ist.

Ich werde kommende Woche wohl kein i-net haben, also nicht böse sein, wenn ich nicht direkt antworden kann.
Signatur von »oop1« _________

TheNobody Style

alter Sack, aber Chef :D

  • »TheNobody Style« ist der Autor dieses Themas

Beiträge: 4 678

Vorname: Andreas

  • Private Nachricht senden

27

Dienstag, 15. Februar 2005, 18:13

und immer an die User denken ... so sprach mor und daran sollte auch mal der eine oder andere DIV-Fetischist denken.

Will der TNS hier mal wieder nur Stunk machen und so ein wenig die Aktivität auf dem Board antreiben? Wenn du das gerade denkst, dann hast du es voll erfasst :lol:
oki, Scherz beiseite ... Ernst läd die Waffe ...

Gestern war ich mal wieder informationssuchend im Web unterwegs und google schenkte mir einen Link zu einer Seite und versprach die gewünschten Wissenspunkte. Freudig erregt klickte ich nun den Link und sah: eine Menuleiste auf der linke Seite (so wie hier auf dem WSB) und rechts daneben ... NIX :surprised:
Ein wenig verwirrt machte ich mal ein F5 und ... es änderte sich nix. Informationen ... Fehlanzeige. Also einmal aufs kleine x und wieder zu google. Einer der nächsten Einträge war wieder von eben beschriebener Seite. Optimist der ich bin ... nochmal hin. Ich war nu nicht mehr so überrascht, denn das Bild kannte ich ja schon vom ersten Besuch.

Doch welch ein Glück für meinen Wissensdurst ... zufällig bemerkte ich, dass laut Scrollbalken die Seite noch nen ganzen Ecke länger sein musste. Da fand ich dann auch die gesuchten Infos. Alles nur weil ich nicht mit einem 100%-Browserfenster unterwegs war ... mit ne Table wär das nicht passiert.

und immer an die User denken .... spricht nun auch der TNS

Danke für die Aufmerksamkeit und noch einen schönen Tag
TNS
Signatur von »TheNobody Style«

Alex

EM2004 - Tippgott

Beiträge: 1 535

  • Private Nachricht senden

28

Mittwoch, 16. Februar 2005, 14:26

Ich halte nix von DIV-Wüsten.
Wenn man CSS so verwendet wie es sich gehört, kann man problemlos tabellenlos und DIVlos
arbeiten.

Einerseits Pixelschubserei und Rechteckdenken, andererseits aber CSS - das ist ein Rückschritt sogar im Vergleich zu Tabellen. Entweder "altes" Webdesign mit Tabellenlayout, oder "neues" Webdesign mit CSS, float und rein logischer Auszeichnung - aber ein DIV-Layout, das ist wie "ein bisschen gestorben" - nix halbes und nix ganzes eben...
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.

Ingo

Fortgeschrittener

Beiträge: 570

  • Private Nachricht senden

29

Mittwoch, 16. Februar 2005, 15:38

Hi,

Zitat von »TheNobody Style«

Alles nur weil ich nicht mit einem 100%-Browserfenster unterwegs war ... mit ne Table wär das nicht passiert.

mit einem vernünftigen CSS-Layout auch nicht.
Solche - zugegeben unschöne - Effekte kommen dadurch, daß den Seitenelementen unpassend große Breiten gegeben werden; entweder durch fehlende Berücksichtigung des/der Box-Modell(e) oder durch zu große Werte.
Aber so etwas läßt sich meist sehr einfach beheben. Nur erfordert das natürlich ein klein wenig Nachdenken und Erfahrung auf diesem Gebiet.
Du hast von daher insofern völlig Recht, daß man mit einem CSS-Layout weitaus mehr und üblere Fehler machen kann, als mit Tabellen.
Gruß
Ingo

Nash.Bridges

Profi

Beiträge: 1 426

  • Private Nachricht senden

30

Mittwoch, 16. Februar 2005, 20:54

Zitat von »TheNobody Style«

Alles nur weil ich nicht mit einem 100%-Browserfenster unterwegs war ... mit ne Table wär das nicht passiert.
Nun ja, wenn ich im verkleinerten Browser-Fenster surfe und auf einer Seite mit einem Tabellen-Layout bin und ich wegen diesem starren Gebilde einen horizontalen Scrollbar habe, nur weil die Tabelle umbedingt 1000px breit sein muss, dann ärgert mich das auch. Natürlich ist es auch doof, wenn ein DIV-Container so stark umbricht. So, denke ich, hat jede Technik ihre Vor- und Nachteile. Allerdings nur wegen diesem einen, relativ kleinen, Nachteil zu sagen: "Das ist eine sch* Technik, sowas sollte man nicht benutzen" halte ich allerdings für übertrieben.

MfG Arne :).

oop1

Meister

Beiträge: 1 639

  • Private Nachricht senden

31

Samstag, 19. Februar 2005, 12:23

Zitat von »Alex«

Ich halte nix von DIV-Wüsten.
Wenn man CSS so verwendet wie es sich gehört, kann man problemlos tabellenlos und DIVlos
arbeiten.

also ich bin jetzt nicht so der Fachmann auf diesem Gebiet, aber ich kann mir kaum vorstellen, dass es Seiten gibt, die ohne Tabellen oder divs nach etwas aussehen.
Hast du da mal einen Link für mich, wo ich mir so was anschauen kann?
Gruß oop1
Signatur von »oop1« _________

Ingo

Fortgeschrittener

Beiträge: 570

  • Private Nachricht senden

32

Samstag, 19. Februar 2005, 13:19

Hi,

Zitat von »oop1«

also ich bin jetzt nicht so der Fachmann auf diesem Gebiet, aber ich kann mir kaum vorstellen, dass es Seiten gibt, die ohne Tabellen oder divs nach etwas aussehen.

ich denke, ganz ohne DIVs war das auch gar nicht gemeint. Auch ein DIV hat eine sinnvolle Funktion, nämlich andere Elemente zu gruppieren. Hierauf zu verzichten, verringert natürlich die Möglichkeiten einer Formatierung über CSS, wäre aber durchaus möglich. Es könnte allerdings den Aufwand beim CSS vergrößern.
Was allerdings unnötig ist: für einzelne Elemente DIVs verwenden oder sie in solche stecken.
Gruß
Ingo

oop1

Meister

Beiträge: 1 639

  • Private Nachricht senden

33

Samstag, 19. Februar 2005, 13:55

Zitat von »Ingo«

Hi,
Was allerdings unnötig ist: für einzelne Elemente DIVs verwenden oder sie in solche stecken.
Gruß
Ingo


Meinst du z.B. so was

Quellcode

 
1
2
3

.bold{
	FONT-WEIGHT: bold;
}



Ich finde so was macht Sinn. Zum Beispiel wenn man generell schriftgröße 20 verwenden will und nur einige Wörter Fett haben will.
Es wäre doch Käse so was zu schreiben

PHP-Quelltext

 
1
2
3
4
5
6
7
8

.normal_schrift
{    font-family:Arial,Helvetica,Geneva,Sans Serif;
    font-size:20px;
    line-height:14px;
    color:#000000;
    text-decoration: none;
    font-weight: normal;
}


und dann das gleiche nochmal, nur mit dem Unterschied FONT-WEIGHT: bold;

Gruß
oop1
Signatur von »oop1« _________

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »oop1« (19. Februar 2005, 13:56)

Alex

EM2004 - Tippgott

Beiträge: 1 535

  • Private Nachricht senden

34

Samstag, 19. Februar 2005, 14:07

Zitat von »oop1«

ich kann mir kaum vorstellen, dass es Seiten gibt, die ohne Tabellen oder divs nach etwas aussehen.
Hast du da mal einen Link für mich, wo ich mir so was anschauen kann?

Ich weiß nicht, was du unter "nach etwas aussehen" verstehst, aber ich habe meine Site ohne DIVs und Layouttabellen gebastelt.

www.alexurban.mynetcologne.de/alex/

(Den Inhalt nicht ernst nehmen, der ist sowas von unaktuell...)

Zitat

Meinst du z.B. so was

Das macht man mit <strong>, <em> oder allenfalls noch <span>. DIV hingegen ist ein Block-Level-Element.
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.

oop1

Meister

Beiträge: 1 639

  • Private Nachricht senden

35

Samstag, 19. Februar 2005, 14:27

ja alex, das sieht ganz gut aus, aber da muss man wohl fast studiert haben, um so was zu machen, bzw. sich sehr intensiv mit dem thema auseinandersetzen. Ein 2 spalten layout ist mit der Technik aber nicht möglich oder?
Signatur von »oop1« _________

Alex

EM2004 - Tippgott

Beiträge: 1 535

  • Private Nachricht senden

36

Samstag, 19. Februar 2005, 15:08

Zitat von »oop1«

ja alex, das sieht ganz gut aus, aber da muss man wohl fast studiert haben, um so was zu machen, bzw. sich sehr intensiv mit dem thema auseinandersetzen.

Ich hab mich mit dem Thema "CSS" auseinandergesetzt, das stimmt; aber meine wichtigsten Freunde bei der Erstellung waren padding und margin ;) ansonsten noch ein wenig background-color, ein float für die Unterpunkte, ein display:inline für die Navigation oben.
Das Schwierigste war tatsächlich das PHP-Script, das aus den reinen Inhalten automatisch die Seiten generiert, so dass man sie hochladen kann. Die Navigation ist ja auf jeder Seite anders, und wenn ich neue Seiten einpflege hab ich das gerne schnell erledigt. ;)

Dass die Navigation so angeordnet sein sollte (oben die Hauptpunkte, rechts oder links die Unterpunkte), war übrigens die Ausgangsüberlegung, aus der die Seite als "Designstudie" entstand. Das ist dann so schön geworden, dass ich sie jetzt als private Page benutze.
Btw ich könnte sie mal updaten.

Zitat

Ein 2 spalten layout ist mit der Technik aber nicht möglich oder?

Nein, echte 2-Spalten-Layouts sind mit CSS ohne DIVs/Tabellen oder vergleichbare Verrenkungen nicht möglich.
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.

Edicius Tsaf

Anfänger

Beiträge: 13

  • Private Nachricht senden

37

Mittwoch, 25. Mai 2005, 06:18

Als tip dazu:
http://csszengarden.com/
HTMl ist rein für die Struktur verantwortlich. Nicht immer sinnvoll (< p id="p1">) aber jedes einzelne Layout wird rein durch die CSS Datei gesteuert.
Tabellen?
Abgesehen davon... Ich, okay, ich habe auch mit divs angefangen im Web was zu machen, würde nie durch ein tabellenlayout richtig durchblicken. Das ist bei größeren Seiten extrem konfus.

LapisInfernalis

Super Moderator

Beiträge: 2 817

  • Private Nachricht senden

38

Mittwoch, 25. Mai 2005, 06:41

Nichts für ungut, aber ich glaube den CSS Zengarden kennt hier so ziemlich jeder... :grin: :D
Korrigiert mich, wenn ich mich irre... ;)

Also ich muss, was das Thread-Thema angeht, meine Meinung ein wenig korrigieren... Gestaltung mit CSS? Immer! Verzicht auf Tabellen? Jein...

Ganz auf Tabellen und Divs verzichten? Niemals. Mal abgesehen davon, dass dies in meinen Augen unsinnig ist, glaube ich, dass ohne tabels und divs kein komplexeres Design möglich ist. Es sei denn, man möchte, dass die Seiten aussehen, als gäbe es gar kein CSS... ;)

Zu den Tabellen: Mit "Jein" meine ich, dass ich dann auf Tabellen verzichte, wenn ich sie nicht brauche. Brauchen tue ich sie, wenn es zu einem Layout kommt, welches ohne sie nicht zu realisieren ist. Und das ist häufiger der Fall, als man denkt. Mindestens immer dann, wenn zwei oder mehr Bereiche die gleiche Höhe haben sollen, z.B.

Ich stelle einfach mal die Behauptung auf, dass es im kommerziellen Bereich des WebDesigns auch gar nicht möglich ist, auf Tabellen komplett zu verzichten. Denn letztenendes gibt der Kunde das Layout vor. Und wenn dies nur zufriedenstellend umgesetzt werden kann, indem ich Tabellen benutze, dann mache ich das auch...

Denn zum einen gibt es eine Menge Möglichkeiten, auch bei Tabellen semantisch sinnvollen Code zu schreiben, oder die ganze Macht von CSS zu nutzen. Und zum anderen werde ich meinem Kunden wohl kaum erzählen, dass dieses oder jenes leider nicht möglich ist, da man dafür Tabellen benutzen müsse, und dies schicke sich nicht...

Der wäre die längste Zeit mein Kunde gewesen, und ginge schnurstracks zu einem WebDesigner, der keine Skrupel vor der Tabellen hat... ;)

In diesem Sinne

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

Edicius Tsaf

Anfänger

Beiträge: 13

  • Private Nachricht senden

39

Mittwoch, 25. Mai 2005, 07:02

naja, wenn das so bekannt ist...
Ich finde die Seite beantwortet eigentlich jede Diskussion ob man zum Layouten (nicht für Daten!) Tabellen oder divs/spans verwenden sollte.

Alex

EM2004 - Tippgott

Beiträge: 1 535

  • Private Nachricht senden

40

Mittwoch, 25. Mai 2005, 13:13

Der CSS Zen Garden ist ne Spielerei, mehr nicht. Er hat gar nicht den Anspruch, DIVs über Tabellen zu heben.

Er möchte den Webdesignern lediglich zeigen, dass CSS eine bedeutsame und interessante Alternative zu den "Deprecated"-Elementen, also zu HTML 3, ist; und dass sich alle reinen Formatierungen, die mit HTML3 im Quellcode realisiert wurden, ins Stylesheet übertragen lassen - und dass CSS noch mehr kann. Er möchte nicht die Unterschiede zwischen DIVs und TABLEs vorführen, sondern die Vorteil von CSS-Definitionen wie font-..., text-..., background-..., border, padding, margin...

Der ZenGarden wurde zu den Anfangszeiten von CSS gestartet, und sollte aktiv Werbung für die Verwendung von CSS machen - und heute nicht als für anspruchsvolle Diskussionsthemen wichtig umgedeutet werden.
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.
  • 1
  • 2

Lesezeichen: