Tabellen-Abstand
Daniel
- css
0 Sönke Tesch0 Daniel0 Sönke Tesch0 Daniel0 Daniel0 Sönke Tesch0 Daniel0 Sönke Tesch0 Daniel0 Sönke Tesch0 Daniel
Tach zusammen,
also ich hab ein Problem, und zwar bin ich gerade eine Homepage am Basteln (wirklich ganz noch am Anfang) und wollte gerne alles mit CSS gestalten, weil dies mir am Sinnvollsten erschien und hier im Forum viel drüber geredet wurde/wird.
Jetzt kommt mein Problem:
Ich hab im oberen Teil der Seite ein Logo (was auch z.Z. noch nicht fertig ist) und weiter unten hab ich 3 Tabellen, 2 davon gleich groß und in der Mitte einene Tabelle mit variabler Größe. Zwischen den oberen Teil ist mir zuviel Platz zu dem unteren drei Tabellen und deshalb würde ich gerne mit CSS nur den oberen Logoteil mit den unteren Tabellen verbinden.
Ich denke es ist einfacher ihr schaut es euch mal an, wenn ihr Lust habt --> http://linux.htlinn.ac.at/~daniel/ Also das Dunkelblaue oben, soll direkt an die unteren Spalten dran. Ich weiß, dass es irgendwas mit Cellspacing und Cellpadding zu tun hat, aber hab es nicht hinbekommen.
Danke schon in Voraus für eure Hilfe
Daniel
also ich hab ein Problem, und zwar bin ich gerade eine Homepage am Basteln (wirklich ganz noch am Anfang) und wollte gerne alles mit CSS gestalten, weil dies mir am Sinnvollsten erschien und hier im Forum viel drüber geredet wurde/wird.
Also das, was hier zum Thema CSS-Layout beredet wird, hat herzlich wenig mit dem zu tun, was Du da gebastelt hast. Genauer gesagt ist das CSS-Layout dazu da, das von Dir eingesetzte, herkömmliche Tabellenlayout zu ersetzen, das mir in Deinem Falle nebenbei bemerkt obendrein noch ein ganz fürchterlich extremes Beispiel von Tabellenlayout ist (Stichwort "einzellige Tabellen verpackt in Tabellen").
Ich denke es ist einfacher ihr schaut es euch mal an, wenn ihr Lust habt --> http://linux.htlinn.ac.at/~daniel/ Also das Dunkelblaue oben, soll direkt an die unteren Spalten dran. Ich weiß, dass es irgendwas mit Cellspacing und Cellpadding zu tun hat, aber hab es nicht hinbekommen.
Hast Du denn noch nicht ausprobiert, mit cellspacing bzw. cellpadding die Abstände der äußersten Tabelle zu ändern? Jeglicher Einsatz von CSS ist auf der Seite momentan jedenfalls so fehl am Platz wie ein Fahrrad auf dem Meer ;)
Gruß,
soenk.e
Also das, was hier zum Thema CSS-Layout beredet wird, hat herzlich wenig mit dem zu tun, was Du da gebastelt hast. Genauer gesagt ist das CSS-Layout dazu da, das von Dir eingesetzte, herkömmliche Tabellenlayout zu ersetzen, das mir in Deinem Falle nebenbei bemerkt obendrein noch ein ganz fürchterlich extremes Beispiel von Tabellenlayout ist (Stichwort "einzellige Tabellen verpackt in Tabellen").
Also ich denke CSS sei nicht nur für die freischwebenen div von Vorteil, sondern auch für die "herkömmlichen" Tabellenlayout, zur optischen Formatierung. Also ich komm eigentlich mit dem jetzigen Layout ganz gut zurecht, da ich die Dateien einfach über PHP include und deshalb teilweise noch mehrere Tabelle in einer Tabelle habe, wobei ich sagen muss, dass da noch einiges hinzukommen soll. Aber egal, dass sei mal dahingestellt. Erstmal danke für den Tipp. Ich muss mir mal überlegen, ob ich vielleicht doch noch ein "CSS-Layout" wähle, wie auch immer das funktionieren soll. Kannst du mir vielleicht mal eine Beispielseite nennen.
Hast Du denn noch nicht ausprobiert, mit cellspacing bzw. cellpadding die Abstände der äußersten Tabelle zu ändern? Jeglicher Einsatz von CSS ist auf der Seite momentan jedenfalls so fehl am Platz wie ein Fahrrad auf dem Meer ;)
Wenn das Fahrrad schwimmen kann und nen Motor hat, sollte das doch kein Problem sein;) Klar hab ich das schon ausprobiert, vorher hätte ich nicht hier hineingeschrieben, aber irgendwie bekomm ich es nicht hin, dass nur der untere Teil weniger wird, sondern dann alles zusammenschrumpft.
Dann noch etwas grundsätzliches für mein Verständnis. Ist CSS-Files, die man als externe einbindet, falsch, wenn man sich für Tabellen entscheidet. Ich denk (das kann ja leider durchaus falsch sein), dass CSS nur eine Ergänzung zu HTML ist, um Elemente besser zu formatieren.
Bis denne und danke für deine rasche Antwort, auch wenn diese nicht unbedingt etwas zu meiner Frage geholfen hat, aber vielleicht doch etwas das weitere Layout beeinflussen wird.
Also das, was hier zum Thema CSS-Layout beredet wird, hat herzlich wenig mit dem zu tun, was Du da gebastelt hast.
Also ich denke CSS sei nicht nur für die freischwebenen div von Vorteil, sondern auch für die "herkömmlichen" Tabellenlayout, zur optischen Formatierung.
Gut, kann man dafür natürlich einsetzen. Es hörte sich nur so an, als ob Du meinst, das "revolutionäre" CSS-Layout, das hier im Forum sein Unwesen treibt, perfekt umgesetzt zu haben - aber das ist halt nicht der Fall :)
Ich muss mir mal überlegen, ob ich vielleicht doch noch ein "CSS-Layout" wähle, wie auch immer das funktionieren soll. Kannst du mir vielleicht mal eine Beispielseite nennen.
http://forum.de.selfhtml.org/archiv/2002/4/10694/#m59221
Hast Du denn noch nicht ausprobiert, mit cellspacing bzw. cellpadding die Abstände der äußersten Tabelle zu ändern?
Klar hab ich das schon ausprobiert, vorher hätte ich nicht hier hineingeschrieben, aber irgendwie bekomm ich es nicht hin, dass nur der untere Teil weniger wird, sondern dann alles zusammenschrumpft.
Logisch, habe ich übersehen. Probiere trotzdem mal, cellpadding/-spacing der äußersten Tabelle auf Null zu setzen und dann dort, wo der jetzige weiße Abstand bleiben soll, explizit margin-top, -left, -bottom und/oder -right entsprechend einzustellen.
Eine andere Mögichkeit wäre wahrscheinlich, wiederum die Abstände der äußeren Tabelle auf Null zu setzen und für die weißen Ränder weitere Tabellen oder <div>s einzufügen, eine ganz außen rum und eine, die die drei Spalten außeinander hält:
+------------------------+
| weißer Außenrahmen |
| +--------------------+ |
| | Logo | |
| +--------------------+ |
| | +----+-----+-----+ | |
| | | | | | | |
| | +----+-----+-----+ | |
| +--------------------+ |
| |
+------------------------+
Wenn ich mir das so recht anschaue, könnte man das äußerste Element eigentlich auch weglassen und stattdessen der in der Grafik zweiten Tabelle "border:1px solid black; padding:5px; background-color:#fff" verpassen. Schwierig, schwierig..
Dann noch etwas grundsätzliches für mein Verständnis. Ist CSS-Files, die man als externe einbindet, falsch, wenn man sich für Tabellen entscheidet. Ich denk (das kann ja leider durchaus falsch sein), dass CSS nur eine Ergänzung zu HTML ist, um Elemente besser zu formatieren.
Wie Du deine CSS-Definitionen einbindest, ist vollkommen egal. Mach es so, wie es Dir am besten gefällt.
Zum Sinn und Zweck von CSS muß man sich den Sinn und Zweck von HTML anschauen, denn HTML war zuerst da. HTML wurde mal geschaffen, um strukturierte, wissenschaftliche Dokumente plattformübergreifend lesen zu können.
Deshalb hat man das Aussehen bzw. die Problematik der Darstellung komplett weggelassen (damals gab es auch noch vollständig zeichenbasierte Konsolen ähnlich MS-DOS, keine grafischen Bildschirme wie heute) und sich darauf konzentriert, Textstellen kurzerhand nach ihrer Bedeutung zu kennzeichnen: <h1> ist eine Überschrift (kein "sehr großer Text"), <strong> ist ein stark betonter Text (keine "Fettschrift"), <dd> ist eine Beschreibung unter einem Begriff (kein "eingerückter Text"), <table> ist eine Tabelle (kein Positionierungsmittel).
Die eigentliche Darstellung war bzw. ist dann Sache des Browsers. Auf einem grafikfähigen Rechner konnten Überschriften groß und dick dargestellt werden, an einer Textkonsole, die zwangsweise überall die gleiche Schrift verwenden muß, lässt der Browser stattdessen vielleicht einfach drei Zeilen darüber und darunter Platz - überall optimale Darstellung.
Um den Autoren trotzdem die Möglichkeit zu geben, das Aussehen ihrer Dokumente zu bestimmen, gibt es CSS.
Kurz: HTML bestimmt den Inhalt des Dokuments, CSS sein Aussehen. Es geht bei CSS also nicht um's "besser formatieren", sondern um die Formatierung überhaupt, denn HTML hat in dem Sinne keinerlei Formatierungsaussage (und das, was noch drin ist, <font> zum Beispiel, versucht man gerade raus zu schmeißen).
Gruß,
soenk.e
Tach,
also bevor ich vielleicht anfange mich jetzt in die Kunst der richtigen CSS Programmierung einlese, noch eine Frage. Wie schaut das aus, wenn ich ne Datenbank habe und die Daten dynamisch einlese?
Also ich hab mir mal ein paar Quelltext angeschaut und der Quelltext sieht ganz gut aus und ich muss sagen, dass es schon vielleicht etwas übersichtlicher ist, aber kann ich die Layer einfach erzeugen innerhalb einer Schleife und Sie dann an einander ausrichten?
Ich mein kann ich die Seite so machen wie ich das auch jetzt habe?
+----------------------------------------------+
| grauer Rahmen (als Hintergrund) |
| +----------------------------------------+ |
| | weißer Außenrahmen (feste größe 97%)| |
| | +----------------------------------+ | |
| | |Logo (varibale Größe) | | |
| | +----------------------------------+ | |
| | +-------+-----------------+--------+ | |
| | |feste | variable |feste | | |
| | |Breite1| Breite |Breite2 | | |
| | +-------+-----------------+--------+ | |
| +----------------------------------------+ |
+----------------------------------------------+
Verstanden was meine Frage ist? Den ich muss ja angeben, wieviel Abstand zwischen der festen Breite und der den festen Breiten ist und dann muss der mittlere Teil sich ja auch vergrößern. Das gleiche gilt für den weißen Außernrahmen. Denn der Inhalt in den Aussenrahmen, also das Logo usw., muss ja sich auf die Größe des weißen Außernrahmens auswirken und ihn vergrößern bzw. verkleinern.
Bis dann und danke. Es ist vielleicht noch nicht zu spät fast alles zu ändern, weil eh noch nicht viel gemacht wurde.
Daniel
Tach,
also ich hab mir mal den Theard komplett durchgelesen, den du mir geschickt hast, aber die Fragen bleiben trotzdem.
Vielleicht kannst du ja noch helfen
Bis dann
Daniel
also bevor ich vielleicht anfange mich jetzt in die Kunst der richtigen CSS Programmierung einlese, noch eine Frage. Wie schaut das aus, wenn ich ne Datenbank habe und die Daten dynamisch einlese?
kann ich die Layer einfach erzeugen innerhalb einer Schleife und Sie dann an einander ausrichten?
Sie sollten schon in der richtigen Reihenfolge erscheinen. Das ist ja der Witz an der Sache, man kann eine solche CSS-basierte Seite auch völlig ohne CSS-Angaben lesen, also HTML-roh sozusagen.
Ich mein kann ich die Seite so machen wie ich das auch jetzt habe?
+----------------------------------------------+
| grauer Rahmen (als Hintergrund) |
| +----------------------------------------+ |
| | weißer Außenrahmen (feste größe 97%)| |
| | +----------------------------------+ | |
| | |Logo (varibale Größe) | | |
| | +----------------------------------+ | |
| | +-------+-----------------+--------+ | |
| | |feste | variable |feste | | |
| | |Breite1| Breite |Breite2 | | |
| | +-------+-----------------+--------+ | |
| +----------------------------------------+ |
+----------------------------------------------+
"Weißer Außenrahmen" kommt in ein <div> mit entsprechenden Angaben zu margin (Durchscheinen des grauen Seitenhintergrundes), border (die schwarze Linie, die Du derzeit hast) und padding (Durchscheinen des eigenen, weißen Hintergrundes).
Darin:
Das Logo, ebenfalls ein eigenes <div>.
Etwas schwierig wird es mit den drei Spalten. Du wirst alle wahrscheinlich absolut positionieren müssen; beachte, daß es neben den Positionen top und left auch bottom und right gibt. Du kannst auch mit Prozentangaben arbeiten.
Es gibt manchmal Probleme, verschachtelte <div>s am Elternelement auszurichten, in dem Fall solltest Du dem Weißen-Außenrahmen-Element ein "position:relative" spendieren.
Die ganze Angelegenheit ist anfangs häufig recht schwierig zu meistern, nicht zuletzt durch fehlerhafte Browser (insbesondere IE 5 und IE 6 im "Quirks-Modus", die die Größen falsch berechnen, siehe auch http://www.hut.fi/~hsivonen/doctype.html). Du solltest unbedingt einen intensiven Blick in die CSS-Originalspezifikation werfen: http://www.w3.org/TR/REC-CSS2/. Nichts gegen SelfHTML, aber mit dem CSS-Kapitel bin ich für meinen Teil nicht so ganz glücklich geworden.
Da CSS in vielerlei Hinsicht anders funktioniert als eine einfache Tabelle, lässt sich sicherlich auch das ein oder andere nicht 1:1 übernehmen - was Du natürlich auch als Anreiz nehmen könntest, vom tausendfach benutzten Drei-Kästen-Standarddesign, das Du derzeit verwendest, etwas abzurücken und mal was neues auszuprobieren (keine Kritik, nur ein Vorschlag:).
Gruß,
soenk.e
Tach und direkt erstmal ein großes DANKE!!!
Also ich weiß zwar noch nicht genau, was du mit den ganzen Sachen meinst (also was du mit den eigenschaften meinst schon, aber wie das aussehen soll ist mir nicht ganz klar.) Ich hab mir zwar noch nicht deine Links angeschaut, aber das werde ich mir noch durchlesen. Ich hab mir etwas anderes ausgedacht und es ist zwar noch nicht richtig HTML, da ich noch keine <h1> und was auch immer eingebaut habe, aber es gefählt mir schon recht gut. Die Sache erscheint mir echt Sinnvoll. http://linux.htlinn.ac.at/~daniel/css/test2.html Langsam verstehe ich das auch, was es mit relative, absolute usw. auf sich hat. Hmm, also ich denke da werde ich mich aufjedenfall noch mehr mit beschäftigen.
PS: Also wenn du noch was am jetzigen zu "meckern" hast, dann sag bescheid, denn es ist besser es direkt zu wissen, als erst später darauf aufmerksam gemacht zu werden.
Und dann hab ich noch ne Frage. Also ich hab die Seite mit Netscape 7 und mit IE 5.5 ausprobiert und ich wollte die Bilder unten (HTML+CSS Validator) horizontal zentrieren. Unter Netscape funktioniert es, unter dem IE nicht. Hab ich irgendwas falsch gemacht????
Also ich weiß zwar noch nicht genau, was du mit den ganzen Sachen meinst (also was du mit den eigenschaften meinst schon, aber wie das aussehen soll ist mir nicht ganz klar.)
Wie gesagt, man muß sich da erstmal reindenken :)
Und dann hab ich noch ne Frage. Also ich hab die Seite mit Netscape 7 und mit IE 5.5 ausprobiert und ich wollte die Bilder unten (HTML+CSS Validator) horizontal zentrieren. Unter Netscape funktioniert es, unter dem IE nicht. Hab ich irgendwas falsch gemacht????
Soweit ich das erkennen kann, nein. Im IE 6 funktioniert's auch wie gewünscht, insofern tippe ich mal darauf, daß Du es gerade mit einem weiteren Fehler im 5er IE zu tun hast..
Gruß,
soenk.e
Hi Sönke Tesch,
Soweit ich das erkennen kann, nein. Im IE 6 funktioniert's auch wie gewünscht, insofern tippe ich mal darauf, daß Du es gerade mit einem weiteren Fehler im 5er IE zu tun hast..
Dann bin ich ja beruhigt. Ich hab schon gedacht, dass ich etwas falsch gemacht hätte. Aber sonst war alles in Ordnung? Weil dann passe ich dieses CSS-Design noch etwas an und bastle darüber meine Seite.
Bis zur nächsten Frage
Daniel
Dann bin ich ja beruhigt. Ich hab schon gedacht, dass ich etwas falsch gemacht hätte. Aber sonst war alles in Ordnung? Weil dann passe ich dieses CSS-Design noch etwas an und bastle darüber meine Seite.
Sonst sah es ok aus. Aber Du benutzt ja schlauerweise die Prüfdienste vom W3C, da kann also zumindest technisch nicht so viel schiefgehen :)
Gruß,
soenk.e
PS: Im HTML-Validator mal "Show Outline" einschalten und über die Ausgabe nachdenken (ganz allgemeiner Tipp, unabhängig von Deiner jetzigen Seite).
Hi,
PS: Im HTML-Validator mal "Show Outline" einschalten und über die Ausgabe nachdenken (ganz allgemeiner Tipp, unabhängig von Deiner jetzigen Seite).
Was bringt mir denn das und wofür ist das eigentlich. Das verstehe ich nicht ganz.
PS: Im HTML-Validator mal "Show Outline" einschalten und über die Ausgabe nachdenken (ganz allgemeiner Tipp, unabhängig von Deiner jetzigen Seite).
Was bringt mir denn das und wofür ist das eigentlich. Das verstehe ich nicht ganz.
Zeigt die Struktur eines Dokuments anhand der Angaben von <h1> bis <h6> an. So in etwa:
* Kino-Infos: Grindel
o Adresse
o Karten & Preise
+ Kassenöffnungszeiten
+ Reservierung
+ Preise
o Auto, Bus & Bahn
+ Parken
+ Bus & Bahn
o Besonderes
o Kinos
http://kino-fahrplan.de/kinos/grindel/ (etwas geschummelt, nicht
weitersagen :)
Gruß,
soenk.e