Ich habe in einem html Dokument verschiedene Tabellen und möchte diese in einem css-script definieren. Bei Schriften ist die Unterscheidung im Script "h1", "h2" usw., aber bei Tabellen? Ich habe schon table1, table2 versucht ohne Erfolg. Eine Suche über Google brachte nichts.-
Wie kann ich einzelne Tabellen im css code unterscheiden?
-
Hallo
Um dir helfen zu können müssten wir schon den Quellcode kennen.
Allgemein suchst du wahrscheinlich Pseudoklassen.
Gruss
MrMruphy
-
Dein größter Fehler ist, dass du überhaupt Tabellen zum layouten nutzt. Tabellen sind für tabellarische Daten und die hast du nicht. Außerdem solltest du so langsam aber sicher auf HTML 5 umsteigen und UTF-8 nutzen sowie alle Format-Angaben über CSS regeln. Deine Seite hat auch reichlich Fehler, siehe https://validator.w3.org/check?verbose=…eipfinger.de%2F
-
Hallo
Irgendwie werden mehr Tabellen geschlossen als geöffnet werden. Deshalb konzentriere ich mich mal auf die vier kompletten Tabellen, die ich finden kann und zeige wie sie im CSS angesprochen werden können:
1. Tabelle:
Codebody>div:nth-of-type(1) table2. Tabelle:
Codebody>table:nth-of-type(1)3. Tabelle (innerhalb der zweiten Tabelle):
Codebody>table:nth-of-type(1) table4. Tabelle
Codebody>center:nth-of-type(1) tableGruss
MrMurphy
-
- welche Alternativen zu Tabellen hätte ich?
- wie steige ich auf html 5 um?
Siehe https://www.w3schools.com/html/html5_migration.asp Dort findest du ebemfalls andere Hinweise zu HTML5
- ich nutze doch schon UTF-8 (s. Zeile 4)
Das habe ich bei der fürchtlichen Formatierung des HTML-Codes wohl übersehen
Im übrigen bin ich - wie Ihr schon bemerkt haben dürft - auf diesem Gebiet ein absoluter Anfänger.
Das ist kein Grund es besser zu machen. ;-):-) -
Hallo
Der HTML-Quelltext könnte mit aktuellem HTML folgendermaßen aussehen:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Malerei und Fotografie</title> <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../css/zentrale.css" rel="stylesheet"> </head> <body> <header class="pageheader"> <h1>Herzlich willkommen</h1> </header> <nav class="navigation"> <p><a href="">Aquarelle</a></p> <p><a href="">Acrylmalerei</a></p> <p><a href="">Photoalben</a></p> <p><a href="">Kontakt</a></p> <p><a href="">Impressum</a></p> <p><a href="">Gästebuch</a></p> <p><a href="">Grußkarten</a></p> </nav> <main class="content"> <h2>Malerei</h2> <figure> <img src="http://lorempixel.com/600/300/abstract/6"> </figure> <h2>Fotografie</h2> <figure> <img src="http://lorempixel.com/600/300/transport/2"> </figure> </main> <aside class="sidebar"> <p>Die Bilder können käuflich erworben werden.</p> <p><span>Bei Interesse mail an </span><span>webmaster@guenter-leipfinger.de</span></p> </aside> <div class="aktuellstesbild"> <h2>Das aktuellste Bild</h2> <figure> <img src="http://lorempixel.com/600/300/city/10"> <figcaption>Strohbedeckte Häuser am Straßenrand (n. Vlaminck)</figcaption> </figure> </div> <footer class="pagefooter"> <p>Originaldiskussion: <a href="http://www.forum-hilfe.de/threads/58887-Wie-kann-ich-einzelne-Tabellen-im-css-code-unterscheiden">http://www.forum-hilfe.de/</a></p> </footer> </body> </html>Mehr braucht es nicht.
Das Bild- und Dateipfade noch angepasst werden müssen sollte klar sein. Anzeigen wie "Letzte Aktualisierung" oder "WebseitenCounter" will heutzutage niemand mehr haben, deshalb habe ich sie weggelassen.
Der Rest ist dann nur noch CSS.
Gruss
MrMurphy
-
-
Hallo
Der HTML-Quellcode ergibt sich aus den von dir zu Verfügung gestellten Informationen.
Beim CSS kann ich zwar die Farben und Ränder übernehmen, beim Rest muss ich aber raten. Wobei ein Responsive Design heutzutage Pflicht sein sollte.
Ich verwende immer einige CSS-Angaben als Grundlage für meine Seiten, auch wenn nicht alle unbedingt notwendig sind. Das sind folgende CSS-Angaben:
Code
Alles anzeigen/*Icon-Font - font-family: 'FontAwesome';*/ @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css); /*Überschriften - font-family: 'Roboto Slab', Serif;*/ @import url(https://fonts.googleapis.com/css?family=Roboto+Slab); /*Fließtext - font-family: 'Roboto', Sans-Serif";*/ @import url(https://fonts.googleapis.com/css?family=Roboto); /*Zahlen* - font-family: 'Merriweather';*/ @import url(https://fonts.googleapis.com/css?family=Merriweather); /*Basisangaben*/ @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { /*box-sizing: border-box;*/ min-width: 1px; } html { } body { padding: 1rem 0.5rem 2rem 0.5rem; margin: 0rem 0rem 0rem 0rem; } } /*Schriften*/ @media all { html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } h1 { font-family: 'Roboto Slab', serif; font-size: 1.2rem; letter-spacing: 0.1rem; margin: 0.5rem 0rem 0.5rem 0rem; } h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', serif; font-size: 1rem; margin: 0.5rem 0rem 0.5rem 0rem; } p, li, dl, dt, address { font-family: Roboto, sans-serif; font-size: 1rem; font-style: normal; margin: 0.5rem 0rem 0.5rem 0rem; } a { /*darkblue*/ color: hsla(240, 100%, 27%, 1); text-decoration: none; outline: none; margin: 0rem 0rem 0rem 0rem; } figcaption { font-family: Roboto, sans-serif; font-size: 0.9rem; margin: 0rem 0rem 0rem 0rem; } } /*Grafiken*/ @media all { figure { min-width: 1px; max-width: 100%; min-height: 1px; margin: 0rem; } img { min-width: 1px; display: block; max-width: 100%; /*max-height: 100vh;*/ border: 0; } } /*Listen dl*/ @media all { dl { margin: 0.5rem 0rem 0.5rem 0rem; } dt, dd { } dt { font-weight: bold; margin: 0rem 0rem 0rem 0rem; } dd { margin: 0rem 0rem 1rem 0rem; } dd p { margin: 0rem 0rem 0rem 0rem; } }Als spezielle Angaben für die Seite könnten dann folgende CSS-Angaben dienen:
Code
Alles anzeigen/*body*/ @media all { body { } } @media only screen and (min-width: 1000px) { body { display: flex; flex-wrap: wrap; justify-content: center; } } /*.pageheader*/ @media all { .pageheader { background-color: #97FFFF; border: 1px solid black; } .pageheader h1 { text-align: center; } } @media only screen and (min-width: 1000px) { .pageheader { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 0rem - 2px - 0rem); } } /*.navigation*/ @media all { .navigation { background-color: #63B8FF; padding: 0.5rem; margin: 0.5rem 0rem; } .navigation p { text-align: center; } .navigation a { color: #FF0000; font-weight: bold; } } @media only screen and (min-width: 1000px) { .navigation { flex-grow: 0; flex-shrink: 0; flex-basis: calc(250px - 1rem - 2px - 0rem); } } /*.content*/ @media all { .content { background-color: #63B8FF; border: 1px solid black; padding: 0.5rem; margin: 0.5rem 0rem; } .content h2 { color: #FFFF33; text-align: center; } .content figure { max-width: 600px; margin: 0rem auto; } } @media only screen and (min-width: 1000px) { .content { margin: 0.5rem 1rem; flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 250px - 250px - 1rem - 2px - 2rem); } } /*.sidebar*/ @media all { .sidebar { background-color: #97FFFF; padding: 0.5rem; border: 2px solid #63B8FF; margin: 0.5rem 0rem; } } @media only screen and (min-width: 1000px) { .sidebar { flex-grow: 0; flex-shrink: 0; flex-basis: calc(250px - 1rem - 4px - 0rem); } } /*.aktuellstesbild*/ @media all { .aktuellstesbild { border: 2px solid black; padding: 0.5rem; margin: 0.5rem 0rem; } .aktuellstesbild h2 { text-align: center; } .aktuellstesbild figure { max-width: 600px; margin: 0rem auto; } } @media only screen and (min-width: 1000px) { .aktuellstesbild { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 500px - 2rem - 1rem - 4px - 0rem); } } /*.pagefooter*/ @media all { .pagefooter { padding: 0.5rem; border: 2px solid black; margin: 0.5rem 0rem; } } @media only screen and (min-width: 1000px) { .pagefooter { background-color: #97FFFF; flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 1rem - 4px - 0rem); } }Ich habe mal zum Testen eine einfache Beispielseite erstellt. Das CSS kann natürlich noch verfeinert werden.
Gruss
MrMurphy
-
Hallo
ZitatKann ich bitte den Code dafür bekommen?
Den habe ich in meinen vorherigen Beiträgen gezeigt.
Du kannst auch einfach den Quelltext des Beispiels in deinem Browser anzeigen lassen und komplett kopieren. Das gesamte CSS befindet sich im Quelltext (im head-Bereich) der HTML-Datei. Dann sollte die Seite lokal funktionieren und du kannst damit rumexperimentieren.
Das gesamte CSS kann (und sollte bei mehreren Seiten auch) in eine extra Datei ausgelagert werden. Es befindet sich innerhalb der style-Elemente im head-Bereich der HTML-Datei.
Gruss
MrMurphy
-
Danke Mr. Murphy
habe inzwischen schon die Pfade angepasst. Warum sehen die Umlaute aber bei mir so aus:
also nicht ä, ö, ü? -
Hallo
Du musst die Datei in deinem Editor auch als UTF-8-Datei abspeichern. Das liegt also wahrscheinlich an deinen Editor-Einstellungen.
Das funktioniert in den Browsern sehr unterschiedlich, deshalb kann ich dazu keine Anleitung geben.
Du solltest auch eine UTF-8-Datei erhalten wenn du die Seite mit deinem Browser direkt speicherst und dann aufrufst oder bearbeitest.
Gruss
MrMurphy
-
Hallo
Du musst die Datei in deinem Editor auch als UTF-8-Datei abspeichern. Das liegt also wahrscheinlich an deinen Editor-Einstellungen.
Ich benutze Dreamweaver 8 finde aber keine Einstellung dazu. -
- Offizieller Beitrag
Dann zieh Dir bspw. Notepad++ oder SublimeText, damit geht das.
-
Hallo
Mit Dreamweaver kenne ich mich nicht aus.
Gruss
MrMurphy
-
Hallo
Du musst die Datei in deinem Editor auch als UTF-8-Datei abspeichern. Das liegt also wahrscheinlich an deinen Editor-Einstellungen.
Ich benutze Dreamweaver 8 finde aber keine Einstellung dazu.- - - Aktualisiert - - -
Inzwischen ist die Seite schon online
http://guenter-leipfinger.de- - - Aktualisiert - - -
und wenn ich aber nun doch einen Besucherzähler anbringen möchte und das Datum der letzten Aktualisierung (interessiert mich)
Dreamweaver ist nun auch umgestellt.
