CSS Frage  (Gelesen 114 mal)

Offline Wetterfrosch1971

    • Wetterstation-Badenweiler
    • Männlich
  • Registriert:
    05.08.2011, 21:00:37
  • Beiträge: 647
  • Ort:
    79410 Badenweiler (Baden-Württemberg / Südbaden / Südschwarzwald / 350mNN)
  • Station:
    wh1080
CSS Frage
am: 10.01.2018, 19:21:54
Hallo,

ich würde gerne meine Werteseite, mit "Strichen" unterteilen.
Aktuell sieht die Seite so aus:
http://www.wetterstation-badenweiler.de/wetter/today.htm

von der Art her, hätte ich es gerne so:
https://southfranklinweather.com/cumulus/todayyest.php

Was muss ich in meiner CSS-Datei hinzufügen, um diese weißen Striche hinzubekommen (müssen jetzt nicht unbedingt weiß sein, können auch schwarze Linien sein)?

Die CSS-Datei sieht so aus:
@charset "UTF-8";

body {

background-color: #FFFFFF;
font-family: Verdana, Helvetica, sans-serif;
font-size: 10pt;
color: #585858;
text-align: left;
background-attachment: fixed;
background-image: url(images/picture.jpg);
    background-size:cover;
background-position: center;

}
#content {
margin-top: 5%;
margin-right: 20%;
margin-bottom: 5%;
margin-left: 20%;
}
body, html {
    margin:0;
    padding:0;
    height:100%;
}

h1 {
font-size: 150%;
font-weight: bold;
text-transform: lowercase;
color: #678090;
letter-spacing: 0.7em;
padding-bottom: 1em;
text-align: left;

}
h2 {
font-size: 125%;
font-weight: bold;
color: #6F9DBE;
letter-spacing: 0.4em;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
a {
color: #0101DF;
text-decoration: none;
font-weight: normal;
}
a:visited {
text-decoration: none;
color: #0101DF;
}
a:hover {
text-decoration: underline overline;
color: #FF0000;
}
a:active {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;

}
.credits {
font-family: Arial, Helvetica, sans-serif;
font-size: 70%;
font-style: italic;
text-transform: lowercase;
letter-spacing: 0.3em;
text-align: right;
}
h3 {
font-size: 110%;
font-weight: normal;
color: #585858;
letter-spacing: 0.4em;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
ul {
font-size: 75%;
padding-bottom: 1em;
padding-top: 1em;
margin-left: 10%;
list-style-type: square;
text-transform: lowercase;
}
li {
padding-bottom: 0.5em;
}
h2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 90%;
color: #555555;
letter-spacing: 0.15em;
padding-bottom: .2em;
background-color: #c0cad3;
text-align: right;
padding-top: .2em;
padding-right: 1em;
}
.blockquote {
background-color: #E7E7DE;
margin-right: 22%;
}
caption {
font-size: 95%;
font-style: normal;
font-weight: bold;
letter-spacing: .1em;
padding-top: 0.5em;
padding-bottom: 0.25em;
text-align: left;
}
table {
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.tableseparator_temp {
font-size: 90%;
font-weight: 400;
background-color: #678090;
color: #CCCCCC;
padding: .5em;
letter-spacing: .1em;
}
.tableseparator_berechnung {
font-size: 90%;
font-weight: 400;
background-color: #678090;
color: #CCCCCC;
padding: .5em;
letter-spacing: .1em;
}
.tableseparator_rainfall {

font-size: 90%;
font-weight: 400;
background-color: #8499A7;
color: #CCCCCC;
padding: .5em;
letter-spacing: .1em;
}
.tableseparator_wind{


font-size: 90%;
font-weight: 400;
background-color: #A2B1BD;
color: #666666;
padding: .5em;
letter-spacing: .1em;
}
.tableseparator_pressure {



font-size: 90%;
font-weight: 400;
background-color: #C0CAD3;
color: #666666;
padding: .5em;
letter-spacing: .1em;
}
td {
font-size: 100%;
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
padding-left: 0.5em;
color: #222222;
}

.td_thumbnails {
padding-top: 0.1em;
padding-right: 0.2em;
padding-bottom: 0.1em;
padding-left: 0.0em;
}

.td_temperature_data {
background-color: #F1D3B7;
}
.td_berechnung_data {
background-color: #F1D3B7;
}
.td_rainfall_data {

background-color: #F5E0CC;
}
.td_wind_data {


background-color: #F9EDE1;
}
.td_pressure_data {



background-color: #FDFAF6;
}
.td_navigation_bar {
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
letter-spacing: 0.2em;
background-color: #ffffff;
}
.labels {
font-weight: bold;
background-position: left;
}
.site_data {
text-align: right;
}
.colon_separator {
font-weight: 400;
background-position: left;
}

Ich habe eine Lösung gefunden, ich muss in der CSS-Datei bei <td noch folgenden Code einfügen
border-top: 1px solid #040;
 border-collapse: collapse;

Das funktioniert dann auch, dann habe ich die gewünschten Linien, doch leider auch in Tabellenteilen die nicht mit der Wertetabelle zu tun haben, d.h. die Linien werden nun in alle Teile der Webseite eingebunden die im html-code mit <td beginnen.

Kann ich das irgendwie festlegen, dass nur in gewissen Teilen der Webseite die Linien eingebaut werden, z.B. nur in die Teile "td_temperatur_data", "td_berechnung_data" usw.?

Vielen Dank für die Hilfe.
LG Frank
« Letzte Änderung: 10.01.2018, 23:49:10 von Wetterfrosch1971 »

Wetterstationen.info Forum

CSS Frage
« am: 10.01.2018, 19:21:54 »

Offline falk

    • Wetterstation Scharnhausen
  • Registriert:
    15.04.2015, 07:28:04
  • Beiträge: 586
  • geogr. Position:
    48°42' 9°16'
  • Station:
    Davis Vantage Vue
Re: CSS Frage
Antwort #1 am: 10.01.2018, 23:38:12

Kann ich das irgendwie festlegen, dass nur in gewissen Teilen der Webseite die Linien eingebaut werden?


Wenn die Linien nur in Tabellen der Klasse "td_temperature_data" angezeigt werden sollen, dann kann dies hierdurch erreicht werden

Zitat
.td_temperature_data td {
  border-bottom: 1.5px solid white;
}


Übrigens: Fremde Styles zu untersuchen ist doch einfach. Bei Firefox auf Element zeigen und über rechte Maustaste Element untersuchen auswählen  :)

Offline Wetterfrosch1971

    • Wetterstation-Badenweiler
    • Männlich
  • Registriert:
    05.08.2011, 21:00:37
  • Beiträge: 647
  • Ort:
    79410 Badenweiler (Baden-Württemberg / Südbaden / Südschwarzwald / 350mNN)
  • Station:
    wh1080
Re: CSS Frage
Antwort #2 am: 10.01.2018, 23:55:20
cool, funktioniert, genau so habe ich das gedacht, habe jetzt ewig rumprobiert und nicht zu dieser völlig einfachen Lösung gekommen ;-)

Das mit der rechten Mouse-Taste und den Code auf der anderen Webseite zu untersuchen habe ich schon gewusst, doch auf jener Webseite finde ich ja nicht die CSS Datei wenn ich mit der Mouse draufklicke, oder?

Vielen Dank für deine Hilfe.


Offline falk

    • Wetterstation Scharnhausen
  • Registriert:
    15.04.2015, 07:28:04
  • Beiträge: 586
  • geogr. Position:
    48°42' 9°16'
  • Station:
    Davis Vantage Vue
Re: CSS Frage
Antwort #3 am: 11.01.2018, 08:57:52

Das mit der rechten Mouse-Taste und den Code auf der anderen Webseite zu untersuchen habe ich schon gewusst, doch auf jener Webseite finde ich ja nicht die CSS Datei wenn ich mit der Mouse draufklicke, oder?


Die weatherstyle.css wird angezeigt, wenn man im Inspektor auf den Link klickt. Ein guter Startpunkt für CSS ist (war zumindest) selfhtml.org

Offline Wetterfrosch1971

    • Wetterstation-Badenweiler
    • Männlich
  • Registriert:
    05.08.2011, 21:00:37
  • Beiträge: 647
  • Ort:
    79410 Badenweiler (Baden-Württemberg / Südbaden / Südschwarzwald / 350mNN)
  • Station:
    wh1080
Re: CSS Frage
Antwort #4 am: 11.01.2018, 16:37:11
Hallo Falk,

danke für die Erklärung, dachte immer nur, dass man nur den Quellcode sich anzeigen lassen kann (mit IE), doch dass man im Firefox dann außerdem noch die CSS sich anzeigen lassen kann, wusste ich bis dato nicht.
und wieder was dazu gelernt, dank den super Forenkollegen hier und ihr enormes Fachwissen!

Vielen Dank dafür.
Gruß Frank

Wetterstationen.info Forum

Re: CSS Frage
« Antwort #4 am: 11.01.2018, 16:37:11 »