Tabelle mit CSS
Darelius
Tabelle mit CSS
Darelius
Matthias Scharwies
Rolf B
Gunnar BittersmannHallo erst einmal. Ich habe zwar keine Probleme, mit html und Co eine Tabelle zu machen, aber für meine Homepage habe ich immer frames benutzt. Da das "verpöhnt" ist, versuche ich das jetzt mit CSS hinzukriegen, scheitere aber sang und klanglos.
Hier mein Problem:
Ich habe 2 Blöcke: oben linkes ein Logo (120 px x 100 px) oben rechts eine Navigationsleiste (* x 100 px) unten links eine zweite Navigationsleiste (120 px x *) unten rechts der "Inhalt" mit dem Bildschirlrest.
So weit kein Problem, da brauche ich nciht einmal CSS.
ABER:
Ich möchte, daß außer dem Inhalt alle Blöcke immer "fest" verankert sind und wenn der Inhalt zum "scrollen" ist, daß der nicht unter oder über deas andere rollt, sondern nur "seinen" Bereich wirklich hat.
Auch benutze ich mehrere Tabellen und weiß nicht, wie ich untscheiedliche Tabellen unterschiedlich mit CSS ansteuern kann, da ich immer nur etwas finde, um alle tabellen zu beeinflussen.
Mit html+frames kriege ich das in 5 minuten hin, bei CSS dampft mein Gehirn und ich finde keine Lösung, die funktioniert.
Und nein, ich bin KEIN Trol, cellspacing, colspan etc kenne ich alles nur mit CSS stehe ich irghendwie auf Kriegsfuß, wen nes um Tabellen oder "Positionen" geht.
Zu guter letzt eine Frage dazu: Ist CSS immer noch komplett Browserabhängig oder zeigen die das mittlerweile gleich an? Oder muß ich dann verschiedenen CSS machen, weil es in verschiedenen Browsern laufen soll, wie es früher war? (habe lange nicht mehr webseiten gemacht, zuletzt vor etwa 20 jahren oder so...)
Vielen Dank für eure Hilfe im Voraus.
...Darelius
-
Hallo erst einmal.
Hallo Darelius,
Ich habe zwar keine Probleme, mit html und Co eine Tabelle zu machen, aber für meine Homepage habe ich immer frames benutzt. Da das "verpöhnt" ist, versuche ich das jetzt mit CSS hinzukriegen, scheitere aber sang und klanglos.
Zuerst: Für Tabelle und Frames hast du HTML benutzt, das solltest du auch jetzt tun!
Hier mein Problem:
Ich habe 2 Blöcke: oben linkes ein Logo (120 px x 100 px) oben rechts eine Navigationsleiste (* x 100 px) unten links eine zweite Navigationsleiste (120 px x *) unten rechts der "Inhalt" mit dem Bildschirlrest.
So weit kein Problem, da brauche ich nciht einmal CSS.
Genau!
Mein HTML würde so aussehen:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Unbenanntes Dokument</title> </head> <body> <header> <a href="/" titel="Zurück zur Startseite"> <img src="images_logo/logo-cropped.png" width="120" alt="logo" > <p role="banner">Text</p> </a> <nav id="main-nav"> </nav> <nav id="sub-nav"> </nav> </header> <main id="content"> </main> </body> </html>Das Grundgerüst habe ich aus dem entsprechenden Tutorial: HTML/Tutorials/Grundgerüst
header, nav und main werden im Folge-Kapitel erklärt.
ABER:
Ich möchte, daß außer dem Inhalt alle Blöcke immer "fest" verankert sind und wenn der Inhalt zum "scrollen" ist, daß der nicht unter oder über deas andere rollt, sondern nur "seinen" Bereich wirklich hat.
Das nennt sich sticky header und ist imho nichts für die ersten Schritte.
Schau erst mal in das von @Rolf B empfohlene Tutorial:
Aber bitte: verwende nicht <table>. Wie Matthias schrieb: Das ist das Gestaltungsmodell der Urzeit. Beschäftige Dich mit dem Grid-Layoutmodell, es ist für die Seitengestaltung deutlich besser geeignet.
Evtl. überzeugt dich dieses Beispiel: CSS/Tutorials/Grid/ Holy-Grail-Layout
Ich hatte letzte Woche zum ersten Mal einen Platten an einem Rennrad mit Scheibenbremse flicken dürfen.
Damit ich mich vor meinem Sohn nicht blamiere, hatte ich mir das schnell auf Youtube angeschaut. (Man muss die Scheibenbremse mit einem Keil sichern, damit sie nicht „zuklemmt“ - sonst kann man sie komplett auseinandernehmen.)
Bevor ich Holz in die Säge stecke und hinterher zu kurze Teile hab', mach ich mir einen Plan.
Auch benutze ich mehrere Tabellen und weiß nicht, wie ich untscheiedliche Tabellen unterschiedlich mit CSS ansteuern kann, da ich immer nur etwas finde, um alle tabellen zu beeinflussen.
Bitte mach jetzt einen Nachmittag Pause mit dem Tabellen erstellen und lies dich in die HTML-Entwicklung der letzten 20 Jahre ein. Das geht schnell.
Dann guck dir die CSS-Tutorials an. Ja, da wird's schnell ungewohnt - langfristig spart man aber Arbeit.
Die Tabellen müssen - außer wenn es um tabellarische Daten geht - weg!
Zu guter letzt eine Frage dazu: Ist CSS immer noch komplett Browserabhängig oder zeigen die das mittlerweile gleich an?
Gute Nachricht! Es sieht - bis auf Kleinigkeiten - ziemlich gleich aus! Browserweichen und -Hacks sind wirklich nicht mehr nötig!
(habe lange nicht mehr webseiten gemacht, zuletzt vor etwa 20 jahren oder so...)
Also mein Tipp:
- einlesen
- neue HTML-Struktur
- Grid Layout
und dann
- STICKY HEADER
Viel Erfolg!
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
Danke erst mal. Das meiste wird dabei mit PHP gemacht, vor allem die Tabellen, die später die Daten ausgeben. Aber wenn das mit dem Aufbnau klappt, können die natürlich weg vom "Gerüst".
Meine ersten seiten hatte ich damals mit "frames" in reinem HTML gemacht und es lief aber all die Jahre, wenn ich das mit CSS probiert hatte, scheiterte es irgendwie ;)
Ich gucke mir die gelinkten Sachen mal an (sieht so aus, als wenn es genau das ist, was ich suchte)
Auf jeden Fall noch einmal DANKE!
werde ja bald 50, da darf man schon mal "Fragen", oder? grins
...DX (aka Darelius Xurax)
-
Hallo Darelius,
werde ja bald 50
Hach ja, so jung möchte man nochmal sein...
Alter schützt vor Stylesheets nicht!
Rolf
--
sumpsi - posui - obstruxi -
… vor allem die Tabellen …
Tabellen sollten Tabellen sein. Wenn damit also Daten gemeint sind, die „schon auf Papier“ als solche gestaltet werden (also irgendwie eine Art Koordinaten-System, das dahinter steckt, Zeilen und Spalten – und damit auch, was in den Schnittpunkten zu stehen hat – definiert), dann sollte da schon
<table>…</table>drin stecken.
Tabellen sind nicht grundsätzlich schlecht oder gar böse. Aber sie sollten eben solche sein. Und keine Gerüste, die wie in einem Regal Stellplätze für mehr oder weniger zusammenhangslosen Kram (nur die Optik bestimmt, was links, oben, rechts und unten rein kommt …). Die wurden lange (und manchmal immer noch) als „Regale mit Regalen in den Fächern, welche in ihren Fächern …“ geradezu vergewaltigt. „Anständig behandelt“ sind die aber völlig in Ordnung.
-
-
@@Darelius
Ich habe 2 Blöcke: oben linkes ein Logo (120 px x 100 px) oben rechts eine Navigationsleiste (* x 100 px) unten links eine zweite Navigationsleiste (120 px x *) unten rechts der "Inhalt" mit dem Bildschirlrest.
Und dein Problem ist – Zählen? Nach 2 kommt 3. Nach 3 kommt 4. 4 Blöcke.
So weit kein Problem, da brauche ich nciht einmal CSS.
Doch. Wenn du zum Layouten/Gestalten was anderes als CSS verwendest, ist das ein Problem.
Mit html+frames kriege ich das in 5 minuten hin, bei CSS dampft mein Gehirn und ich finde keine Lösung, die funktioniert.
Dabei ist CSS doch so einfach. Zum Layouten in zwei Dimensionen ist CSS Grid das Mittel der Wahl.
Einfach dem
bodyden default margin wegnehmen, ihn den Viewport ausfüllen und ein Grid aufspannen lassen. Der Code ist nahezu selbsterklärend, zumal die Maßangaben auch erkennen lassen, dass sie sich auf Höhen bzw. Breiten beziehen. (Bei mir8emund8em, das kannst du deinen Bedürfnissen anpassen.)body { margin: 0; height: 100vh; display: grid; grid-template: 'logo header' 8em 'nav main' 1fr /8em 1fr; }Die Benennung der Grid-Zellen brauchst du nicht unbedingt, das macht es aber verständlicher.
Den Rest kannst du dir in diesem Beispiel ansehen.
Dort steckt das 2×2-Layout in einem media query, damit es auf schmalen Viewports nicht zweispaltig ist.
Zu guter letzt eine Frage dazu: Ist CSS immer noch komplett Browserabhängig oder zeigen die das mittlerweile gleich an?
Bei den neusten Features gibt es naturgemäß Unterschiede, je nachdem, ob die im jeweiligen Browser schon implementiert sind.
Aber grundsätzlich stellen Browser Webseiten so ziemlich gleich dar. Also:
Oder muß ich dann verschiedenen CSS machen, weil es in verschiedenen Browsern laufen soll, wie es früher war?
Nein.
Und wenn es Unterschiede gibt, dann ist das progressive enhancement.
Und der vermutlich einzige, der deine Seiten in verschiedenen Browsern ansieht, bist du. Webseiten müssen nicht in allen Browsern gleich aussehen. Sie sollten in allen Browsern gut aussehen.
Kwakoni Yiquan
--
Ad astra per aspera-
Also, ich habe mir das versucht, durchzulesen, stoße aber auf extrem viele Probleme, da ich sehr viele Sachen von CSS einfach nicht verstehe...
Vielleicht habe ich einfach das "Grundprinzip" von CSS nicht verstanden, aber auch mit den Beispielen bekomme ich das alles leider vorne und hinten nicht hin.
Ich kriege zwar ein "Raster (Grid) hin, aber wenn ich das mit Sticky dann versuche, wird es nichgts. Die Navigationsleiste links scrollt mit und es ist "unter" dem oberen kram, es erstellt kein eigenes "Fenster", in dem es bleiben soll und nach einem kompletten quellcode hier Fragen, fühlt sich falsch an.
Ich versuche morgen noch mal, mir das nochmal anzulesenl, aber für mich ist CSS immer noch ein Buch mit ein paar siegeln...
PHP und HTML kombinieren, kein Probme, Seiten aufbauen mit HTML und PHP - kein Problem, aber solche Sonmderformate, die mit Tabellen und Frames früher gemacht wurden, in CSS zu machen, überfordert mich leider... vielleicht bin ich mit 50 zu alt dafür? oder zu "Out"? ;)
Aber ich gebe nicht auf, es muß doch eine "einfache" Lösung geben, wo man nicht 1kb CSS braucht, um diese 4 Bereiche so hinzubekommen, daß es so funktioniert, wie ich das möchte...
...DX
-
@@Darelius
Ich kriege zwar ein "Raster (Grid) hin, aber wenn ich das mit Sticky dann versuche, wird es nichgts.
Sticky?? Du solltest nicht versuchen, Zeugs von mir mit Zeugs von @Matthias Scharwies zu kombinieren.
vielleicht bin ich mit 50 zu alt dafür?
Nein.
oder zu "Out"? ;)
Mag sein.
Aber ich gebe nicht auf, es muß doch eine "einfache" Lösung geben, wo man nicht 1kb CSS braucht, um diese 4 Bereiche so hinzubekommen, daß es so funktioniert, wie ich das möchte...
Was genau passt dir denn an meiner Vorlage nicht?
Kwakoni Yiquan
--
Ad astra per aspera-
Die Vorlage selber hat so viele Elemente im CSS, daß ich die kaum verstehe und mir ist wichtig, daß ich den Hauptbereich scrollen kann, ohne daß die obere und die seitliche Navigationsleiste mitscrollen oder das "darunter" scrollt...
ich werde heute mal eine "Basis" aufsetzen, wie es aussehen "sollte" mit Code und einen Link und Daten..
Aber muß erst mal wieder Gartenarbeit machen - bis heute Abend
...DX
-
-
Hallo Darelius,
Vielleicht habe ich einfach das "Grundprinzip" von CSS nicht verstanden
Das kann sein. CSS besteht aus 2 Teilen:
- Auswählen, für welche Elemente ein Satz von Eigenschaften gelten soll (der Selektor)
- Festlegen der Eigenschaften, die den HTML Elementen zugewiesen werden sollen, auf die der Selektor zutrifft. Das sind VIELE, aus den unterschiedlichsten Gebieten. Hinzu kommt, dass es nicht nur die einzelnen Eigenschaften gibt, sondern auch Shorthand-Eigenschaften, mit denen man mehrere Einzeleigenschaften auf einmal setzen kann.
Eigenschaften festlegen kannst Du auch mit dem style-Attribut in HTML, das macht man aber nur in Ausnahmefällen, weil es das HTML aufbläht und der Idee widerspricht, Inhalt und Layout zu trennen.
Wie eine CSS Regel grundsätzlich aussieht, haben wir hier beschrieben. Möglicherweise ist das bereits zu viel auf einmal…
Wichtig ist, dass eine Regel aus einem Selektor besteht (welche Elemente sollen Eigenschaften erhalten) und einem Eigenschaftenblock (welche Eigenschaften sollen zugewiesen werden).
In Gunnars Beispiel werden darüber hinaus noch @media-Abfragen und CSS-Schachtelungen verwendet. Wenn man die mal weglässt, legt Gunnar folgendes fest (im Fall, dass die Anzeige mindestens 30em breit ist):
body { font: 1.2em/1.4 Calibri, sans-serif; margin: 0; height: 100vh; display: grid; grid-template: 'logo header' 8em 'nav main' 1fr /8em 1fr; }Diese Regel verwendet den Selektor
body. Normale Namen werden als HTML Elementnamen gedeutet, d.h. die Regel gilt für alle Elemente mit dem Namen (oder Typ)body. Deswegen heißt das auch Typselektormargin:0verstehst Du sicherlich. Warum das gesetzt wird, kommt gleich.height:100vhverwendet die Maßeinheit vh, mit der man einen Prozentanzeil der Viewport-Höhe angibt. 100vh = 100% der Höhe des Anzeigebereichs. Der Body hat standardmäßig 8px Margin, das würde der height-Angabe hinzugeschlagen und beiheight:100vhzu einem vertikalen Scrollbar führen. Deshalb wird der Rand mitmargin:0entfernt.font: 1.2em/1.4 Calibri, sans-serifist etwas komplizierter.fontist eine Shorthand-Eigenschaft, die mehrere andere Eigenschaften auf einmal setzt. Die minimale Angabe ist font-size und font-family. Optional kann direkt hinter der font-size noch die line-height angegeben werden, in Form eines Schrägstrichs und des Wertes für die Zeilenhöhe. Weitere Angaben sind möglich, als Schlüsselwörter vor der font-size, aber das ist hier nicht der Fall. Diese Zeile setzt also font-size auf 1.2em, line-height auf 1.4 (was 140% der font-size bedeutet) und als font-familiy wirdCalibri, sans-serifeingestellt. Heißt: Wenn Calibri da ist, nimm die. Andernfalls nimm die Schrift, die im Browser als Default für serifenlose Schrift eingestellt ist.display:grid: Die display-Eigenschaft legt das Anzeigemodell für ein Element fest. Klassische Modelle sind inline und block, es gibt aber viel mehr. Grid ist eins davon, der Body soll als Raster angezeigt werden. WIE dieses Raster aussieht und welche Elemente wo im Raster zu finden sein sollen, muss zusätzlich festgelegt werden.grid-template: ...: Ist wieder eine Shorthand-Eigenschaft. Sie bündelt grid-template-columns (Spalteneinteilung des Rasters), grid-template-rows (Zeileneinteilung) und grid-template-areas (Rasterzellen Namen geben). Die Shorthand-Eigenschaft funktioniert so, dass man das Grid "malt". In den Zeichenketten wird für jede Zelle ein Name vergeben (oder ein Punkt, wenn eine Zelle unbenannt bleiben soll). Jede Zeichenkette legt eine Zeile fest, und dahinter steht die Höhe, die diese Zeile haben soll. Die erste Zeile ist 8em hoch, die zweite Zeile 1fr. fr? Kommt gleich! Hinter den Zeilenangaben folgt ein Schrägstrich und die Definition der Spalten. Gunnar legt 2 Spalten fest, die erste mit 8em, die zweite mit 1fr.- fr ist eine Einheit speziell für Grids, damit kann ich angeben, welcher Anteil des noch nicht verbrauchten Platzes für diese Zeile oder Spalte verwendet werden soll. Wenn ich z.B. eine Spaltenangabe mit "8em 1fr 3fr" mache, ist die erste Spalte 8em breit. Die Spalten 2 und 3 füllen den Rest auf und haben ein Breitenverhältnis von 1:3.
Das war jetzt viel Zeug in nur einer CSS Regel. Aber der Rest ist einfacher. Benannte Grid-Bereiche ermöglichen es mir, Elemente relativ einfach zu platzieren. Das tut Gunnar bspw. in der Regel in Zeile 25:
body > img { grid-area: logo; ... }Der Selektor
body > imgbesteht aus zwei Typselektoren (bodyundimg, die durch den Kombinator>verbunden sind.>bedeutet: „direkter Nachfahre von“. Dieser Selektor ermittelt also inbodyElementen diejenigenimgElemente, die direktes Kindelement davon sind. Diesen Bildern wird die Eigenschaftgrid-area:logozugewiesen, und das heißt: Zeige sie in dem Rasterfeld an, das ich mitlogobenamst habe.Das ist eine sehr einfache Anwendung von Grid, dieses Layoutmodell kann noch viel mehr.
Rolf
--
sumpsi - posui - obstruxi
-
-
-
So, ich habe mal den groben Aufbau und einfach mit einer Tabelle gemacht, damit man sieht, was ich "brauche".
Mit CSS sehe ich da bisher einfach keine (funktionierende) Lösung, die Tutorials etc alles durch, aber ich kriege diese "Kombi" nicht hin...
<html> <head> <title> a random title </title> <head> <body> <table border=1 width=100% height=100%> <tr height=100> <td width=134>Logo</td> <td width=*> Navigation 1</td> </tr> <tr height=*> <td width=134 valign=top> Navigation<br> Teil<br> 2<br> </td> <td width=* valign=top> Hauptseite<br> die soll<br> als einzige<br> scrollbar sein<br> und nicht<br> hinter dem anderen<br> verschwinden, sondern<br> nur auf dieses Feld begrenzt sein<br> <hr> ich weiß, daß es gerade mit tabelle ist,<br> es soll ja nur zwigen, wie die Seite<br> aufgebaut sein soll<br> <br> mit html und frames kein ding, mit CSS<br> sehe ich da einfach bisher KEINE Option<br> die mir das ermöglicht.<br> </body> </html>kann mir da jemans sagen, wie ich das in CSS hinkriege? Quasi drei Blöcke, oben fest, links fest, rechts scrollbar. den rest würde ich dann vermutlich hinbekommen, auch die "Farben" etc und grafiken. Aber mit dem Positionieren, scrollbar uns sticky einfach keinen Plan, wie ich das hinbekommen soll
...DX
-
@@Darelius
kann mir da jemans sagen, wie ich das in CSS hinkriege?
Das habe ich dir bereits vor gut einer Woche gezeigt.
Quasi drei Blöcke, oben fest, links fest, rechts scrollbar.
Du willst also nicht
grid-template: 'logo header' 8em 'nav main' 1fr /8em 1fr;sondern
grid-template: 'header header' 8em 'nav main' 1fr /8em 1fr;Aber mit dem Positionieren, scrollbar uns sticky …
Sticky? Immer noch?
… einfach keinen Plan, wie ich das hinbekommen soll
Wenn du nicht zeigst, was du versuchst, kann dir auch niemand sagen, was du dabei falsch machst.
Kwakoni Yiquan
--
Ad astra per aspera -
Hallo Darelius,
Guck mal hier hinein. Da ist alles weggelassen, was nicht zum 2×2 Grid mit scrollbarem Main-Bereich gehört.
https://jsfiddle.net/w2cqr1hk/
Was nicht heißt, dass in Gunnars Pen überflüssige Dinge drin waren.
Rolf
--
sumpsi - posui - obstruxi-
Wow, das erste Modell, was auch bei mir funktioniert, danke! Keine Ahnung, was ich immer falsch gemacht habe, aber ein paar Fragen habe ich noch, um das richtig zu verstehen:
- was ist 100vh? Ich vermute "vertical high" also vertikal obenn anordnen?
- was ist "10em 1fr" ???
Wenn ich em richtig "verstehe", ist das 1em = die Schriftgröße - bei 8 also 8 pixel? also sind 10em = 80 pixel?
Danke auf jeden Fall, damit kann ich mal gucken, ob ich das hinbekomme freu
Sorry, da´ich so "dämlich" herüberkomme, ich und CSS sind wohl keine "Freunde" ;)
...DX
-
Hallo Darelius,
ich und CSS sind wohl keine "Freunde"
Jede Freundschaft macht Arbeit, wenn man sie herbeiführen und erhalten möchte 😉
vhist eine der unzähligen CSS Längeneinheiten. "Vertical High" ist fast richtig: vh steht für viewport height und man gibt damit an, wieviel Prozent der Viewporthöhe für dieses Maß zu verwenden sind. Der Viewport ist die Größe des Anzeigebereichs für die Seite. Schau in den verlinkten Wiki-Artikel.10em 1frist eine Liste von Längenangaben. Wenn ich für ein Grid das Zeilen- oder Spaltenmuster definiere, muss ich für jeden Track (das der Oberbegriff für Zeilen und Spalten) angeben, welches Maß er haben soll (also die Höhe oder Breite). 10em ist eine CSS Längeneinheit, die auf der font-size Angaben basiert, die in dem betreffenden Element gilt. Der Browserdefault ist zumeist 16px. 8px ist schon sehr klein. Was tatsächlich verwendet wird, ist benutzerabhängig.Der Browser zieht vom verfügbaren Platz diejenigen Trackmaße ab, die feste Größe haben. Der Rest wird auf die Tracks verteilt, die mit fr angegeben wurden. Dafür addiert er alle fr Werte auf und gibt jeder fr-Spalte den Anteil an der Summe, der für fr angegeben wurde. Eine Spaltenangabe von "10em 1fr 3fr" würde also für Spalte 1 10em festlegen. Der verbleibende Platz wird im Verhältnis 1:3 auf die Spalten 2 und 3 verteilt. Die einfache Angaben "10em 1fr" bedeutet: 10em für Spalte 1, und der Rest für Spalte 2.
Rolf
--
sumpsi - posui - obstruxi-
Also, ich habe mal wieder das Problem, daß ich das übernomme nahbe und es nicht klappt schnüff
es scrollt alles weg nicht nur der Bereich... Warum? keine Ahnung.. ich poste mal Quellcode, ist aber mit php:
data/Styles-css.css
body { margin: 0; height: 100vh; display: grid; grid: "logo nav1" 100px "nav2 main" 1fr / 134px 1fr; } #logo { grid-area: logo; background-color: #fcc; padding: 0em; } #nav1 { grid-area: nav1; background-color: #cfc; padding: 2em; } #nav2 { grid-area: nav2; background-color: #ccf; padding: 0.5em; } main { grid-area: main; background-color: #fcf; padding: 0 0.5em; overflow-y: scroll; }Index.php (oder test.php momentan)
<?php include ("data/001-Basic.php"); include ("data/002-Main.php"); BasicSite(); Logo(); Nav(1); Nav(3); main(); ?>data/001-Basic.php
<?php # ============================== # # Basic Site # t= title # # ============================== function BasicSite($t="Galaxie Erforschung") { # Basic Site echo "<html>\n<head>\n<title>".$t."</title>\n"; echo '<link rel="stylesheet" href="data/Styles-css.css">'."\n"; echo "</head>\n<body>\n"; } function BasicSiteClose() { # Basic Site Close echo "</body>\n</html>\n"; } # ============================== # # Logo Xanai # # ============================== function Logo() { # Logo (Xanai) echo '<div id="logo"><img src="pics/Logo-Xanai.png"></img></div>'."\n"; } # ============================== # # Navigation lines # 0= upper logged out # 1= upper logged in # 2= left logged out # 3= left, logged in # # ============================== function Nav($n=0) { # Basic Navigation with options if ($n<=1) { echo '<div id="nav1">'."\n"; echo "<table>\n<tr>\n"; echo "<td>Hauptseite</td>\n"; echo "<td>Aktuelles</td>\n"; echo "<td>Forum</td>\n"; if ($n==1) { echo "<td>Login</td>\n"; echo "<td>Register</td>\n"; } else { echo "<td>Logout</td>\n"; } echo "</tr>\n</table>\n"; echo "</div>\n"; } else { echo '<div id="nav2">'."\n"; echo "<table>\n"; if ($n==3) { echo "<tr><td>Übersicht</td></tr>\n"; echo "<tr><td>Planeten</td></tr>\n"; echo "<tr><td>Kolonien</td></tr>\n"; echo "<tr><td>Flotten</td></tr>\n"; echo "<tr><td>Bautruppen</td></tr>\n"; echo "<tr><td>Forschung</td></tr>\n"; echo "<tr><td>Diplomatie</td></tr>\n"; } echo "</table>\n"; echo "</div>\n"; } } ?>data/002-Main.php
<?php # ============================== # # Main Site # t= Site Number # # ============================== function main($t=0) { # Basic Site echo '<div id="main">'."\n"; for ($a=1;$a<=100;$a++) { echo "Hauptseite: Zeile ".$a."<br>\n"; } echo "</div>\n"; } ?>Daraus resultiert dann das:
<html> <head> <title>Galaxie Erforschung</title> <link rel="stylesheet" href="dat/Styles-css.css"> </head> <body> <div id="logo"><img src="pics/Logo-Xanai.png"></img></div> <div id="nav1"> <table> <tr> <td>Hauptseite</td> <td>Aktuelles</td> <td>Forum</td> <td>Login</td> <td>Register</td> </tr> </table> </div> <div id="nav2"> <table> <tr><td>Übersicht</td></tr> <tr><td>Planeten</td></tr> <tr><td>Kolonien</td></tr> <tr><td>Flotten</td></tr> <tr><td>Bautruppen</td></tr> <tr><td>Forschung</td></tr> <tr><td>Diplomatie</td></tr> </table> </div> <div id="main"> Hauptseite: Zeile 1<br> Hauptseite: Zeile 2<br> Hauptseite: Zeile 3<br> Hauptseite: Zeile 4<br> Hauptseite: Zeile 5<br> Hauptseite: Zeile 6<br> Hauptseite: Zeile 7<br> Hauptseite: Zeile 8<br> Hauptseite: Zeile 9<br> Hauptseite: Zeile 10<br> Hauptseite: Zeile 11<br> Hauptseite: Zeile 12<br> Hauptseite: Zeile 13<br> Hauptseite: Zeile 14<br> Hauptseite: Zeile 15<br> Hauptseite: Zeile 16<br> Hauptseite: Zeile 17<br> Hauptseite: Zeile 18<br> Hauptseite: Zeile 19<br> Hauptseite: Zeile 20<br> Hauptseite: Zeile 21<br> Hauptseite: Zeile 22<br> Hauptseite: Zeile 23<br> Hauptseite: Zeile 24<br> Hauptseite: Zeile 25<br> Hauptseite: Zeile 26<br> Hauptseite: Zeile 27<br> Hauptseite: Zeile 28<br> Hauptseite: Zeile 29<br> Hauptseite: Zeile 30<br> Hauptseite: Zeile 31<br> Hauptseite: Zeile 32<br> Hauptseite: Zeile 33<br> Hauptseite: Zeile 34<br> Hauptseite: Zeile 35<br> Hauptseite: Zeile 36<br> Hauptseite: Zeile 37<br> Hauptseite: Zeile 38<br> Hauptseite: Zeile 39<br> Hauptseite: Zeile 40<br> Hauptseite: Zeile 41<br> Hauptseite: Zeile 42<br> Hauptseite: Zeile 43<br> Hauptseite: Zeile 44<br> Hauptseite: Zeile 45<br> Hauptseite: Zeile 46<br> Hauptseite: Zeile 47<br> Hauptseite: Zeile 48<br> Hauptseite: Zeile 49<br> Hauptseite: Zeile 50<br> Hauptseite: Zeile 51<br> Hauptseite: Zeile 52<br> Hauptseite: Zeile 53<br> Hauptseite: Zeile 54<br> Hauptseite: Zeile 55<br> Hauptseite: Zeile 56<br> Hauptseite: Zeile 57<br> Hauptseite: Zeile 58<br> Hauptseite: Zeile 59<br> Hauptseite: Zeile 60<br> Hauptseite: Zeile 61<br> Hauptseite: Zeile 62<br> Hauptseite: Zeile 63<br> Hauptseite: Zeile 64<br> Hauptseite: Zeile 65<br> Hauptseite: Zeile 66<br> Hauptseite: Zeile 67<br> Hauptseite: Zeile 68<br> Hauptseite: Zeile 69<br> Hauptseite: Zeile 70<br> Hauptseite: Zeile 71<br> Hauptseite: Zeile 72<br> Hauptseite: Zeile 73<br> Hauptseite: Zeile 74<br> Hauptseite: Zeile 75<br> Hauptseite: Zeile 76<br> Hauptseite: Zeile 77<br> Hauptseite: Zeile 78<br> Hauptseite: Zeile 79<br> Hauptseite: Zeile 80<br> Hauptseite: Zeile 81<br> Hauptseite: Zeile 82<br> Hauptseite: Zeile 83<br> Hauptseite: Zeile 84<br> Hauptseite: Zeile 85<br> Hauptseite: Zeile 86<br> Hauptseite: Zeile 87<br> Hauptseite: Zeile 88<br> Hauptseite: Zeile 89<br> Hauptseite: Zeile 90<br> Hauptseite: Zeile 91<br> Hauptseite: Zeile 92<br> Hauptseite: Zeile 93<br> Hauptseite: Zeile 94<br> Hauptseite: Zeile 95<br> Hauptseite: Zeile 96<br> Hauptseite: Zeile 97<br> Hauptseite: Zeile 98<br> Hauptseite: Zeile 99<br> Hauptseite: Zeile 100<br> </div> </body> </html>und da scrollt (wie immer bei mir ) alles, nicht nur "main"...
Im "Beispiel", als ich das 1:1 übernahm, ging es, jetzt nicht, ich verstehe nur nicht, warum? Entweder habe ich einen kleinen, feinen, sehr fiesen Feheler oder ich bin zu blöd irgendwie...
...DX
-
Hallo Darelius,
<div id="main">und<main>sind nicht das Gleiche. Deswegen greift die CSS Regel nicht, die das vertikale Scrolling für den Hauptteil aktiviert.Der CSS Selektor
mainfindet das <main>-Element.
Der CSS-Selektor#mainfindet das Element mit id="main".<div>-Suppe ist Technik von vor 15 Jahren, und chronische Divitis ist eine Krankheit, die die Augen massiv schädigen kann 😉
Verwende die für das Seitenlayout vorgesehenen Containerelemente. <nav> für Navigation (da Du 2 hast, behalte die IDs nav1 und nav2 bei). <main>...</main> für den Hauptteil. Das selektierst Du mit dem main Selektor.
Falls Du noch sowas wie header oder footer-Bereich der Seite hast: dafür gibt's die Elemente <header></header> und <footer></footer>.
In deinen Navigationen empfehle ich Dir noch <ul> Listen, keine Tabellen. Die Listenpunkte und die Listeneinrückung bekommst Du mit CSS weg
ul { list-style: none; padding: 0; margin: 0; }Im nav1 bekommst Du die Listenelemente mit einer Flexbox nebeneinander:
#nav1 ul { display: flex; }Rolf
--
sumpsi - posui - obstruxi-
... Also habe ich nur im CSS das "#" vor "main" vergessen? ArglUrgl Kopfauftischhaut
Also ein Zeichenfehler, kein kompletter "Ich bin zu doof" - Fehler... oder eher eine Kombi daraus ;)
danke vielmals..
JETZT geht es.. ENDLICH!!!!!
Yeehaa - dann kann ich ja weitrer programmieren ;)
...DX
-
-
-
-
-