Frage zu CSS stellen?

Vom einfachen Programm zum fertigen Debian-Paket, Fragen rund um Programmiersprachen, Scripting und Lizenzierung.
Antworten
miriki
Beiträge: 108
Registriert: 19.05.2022 10:49:21
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: Kiel

Frage zu CSS stellen?

Beitrag von miriki » 26.09.2022 13:00:03

Moinsens!

Gibt's hier irgendwo eine Ecke, wo ich mal eine Frage zu CSS stellen könnte?

Die (z.B. <H1>) Elemente beachten nicht so ganz die <DIV> Begrenzungen, wie ich mir das eigentlich vorgestellt habe. Aber wenn das hier nirgendwo passt, gehe ich da auch nicht weiter ins Detail.

Gruß, Michael
Zuletzt geändert von JTH am 26.09.2022 14:07:51, insgesamt 1-mal geändert.
Grund: Titel präzisiert

Benutzeravatar
whisper
Beiträge: 3151
Registriert: 23.09.2002 14:32:21
Lizenz eigener Beiträge: GNU Free Documentation License
Kontaktdaten:

Re: CSS ?

Beitrag von whisper » 26.09.2022 13:06:37

Nee, gibt es nicht.
Ich fummel in solchen Fällen gerne mit den Chrome/Firefox Entwicklertools. Da kann ich live sehen was los ist und rum probieren.
Bin also CSS Diletant

Vielleicht verschibt den Thread ein Mod mal nach smalltalk

uname
Beiträge: 12043
Registriert: 03.06.2008 09:33:02

Re: CSS ?

Beitrag von uname » 26.09.2022 13:42:13

Trotz einiger Jahre primitivster Webseiten-Programmierung habe ich CSS auch noch nicht durchschaut.

Aber ich möchte euch daran teilhaben lassen, dass ich vor einiger Zeit W3.CSS für mich entdeckt habe.
Vielleicht hilft dir @miriki sowas, um etwas mehr Struktur in dein CSS zu bekommen, da dort eigentlich alles schon fertig ist.

W3.CSS ist eigentlich nur eine 235 Zeilen lange CSS-Datei also genau diese, die man meist nach w3.css auf seinen Webspace kopiert.
A Quality Alternative to Bootstrap
W3.CSS is Smaller, Faster and Easier to Use.
Naja das stimmt schon. Funktionen wie z. B. Modals wie bei Bootstrap gibt es bei W3.CSS natürlich nicht. ;-)

Es gibt auch ein paar (schöne) Demos und Templates (einfach den Quellcode kopieren).
Eine namentliche Nennung von W3.CSS ist auf der eigenen Webseite nicht erforderlich.
W3.CSS is Free
W3.CSS is free to use. No license is necessary.
Vielleicht nicht zielführend für dein Problem @miriki aber vielleicht für irgendjemanden von Interesse.

JTH
Moderator
Beiträge: 3014
Registriert: 13.08.2008 17:01:41
Wohnort: Berlin

Re: CSS ?

Beitrag von JTH » 26.09.2022 14:05:46

miriki hat geschrieben: ↑ zum Beitrag ↑
26.09.2022 13:00:03
Moinsens!
Moin.

miriki hat geschrieben: ↑ zum Beitrag ↑
26.09.2022 13:00:03
Gibt's hier irgendwo eine Ecke, wo ich mal eine Frage zu CSS stellen könnte?
Ich denk, jede ordentlich gestellte technische Frage ist hier im Forum erst mal nicht generell unwillkommen. Natürlich bekommst du zu Debian und co. die meisten und schnellsten Antworten. Zu CSS könntest du in Softwareentwicklung und -paketierung, Scripting oder auch Smalltalk fragen.

Aber der Titel sollte dann etwas mehr aussagen. Bei „CSS“ denke ich wahlweise an Content Scramble System, Counter-Strike: Source oder nur gelegentlich mal an Cascading Style Sheets :wink:
Manchmal bekannt als Just (another) Terminal Hacker.

Benutzeravatar
Meillo
Moderator
Beiträge: 8782
Registriert: 21.06.2005 14:55:06
Wohnort: Balmora
Kontaktdaten:

Re: CSS ?

Beitrag von Meillo » 26.09.2022 14:11:07

whisper hat geschrieben: ↑ zum Beitrag ↑
26.09.2022 13:06:37
Vielleicht verschibt den Thread ein Mod mal nach smalltalk
Ich habe ihn in den Scriptingbereich verschoben.

Von mir aus koennte man hier gleich auch inhaltlich dazu diskutieren ...
Use ed once in a while!

michaa7
Beiträge: 4610
Registriert: 12.12.2004 00:46:49
Lizenz eigener Beiträge: MIT Lizenz

Re: Frage zu CSS stellen?

Beitrag von michaa7 » 26.09.2022 14:16:40

gruß

michaa7

-------------------------------
Menschen ändern gelegentlich ihre Ansichten, aber nur selten ihre Motive. (Oskar Negt)

michaa7
Beiträge: 4610
Registriert: 12.12.2004 00:46:49
Lizenz eigener Beiträge: MIT Lizenz

Re: Frage zu CSS stellen?

Beitrag von michaa7 » 26.09.2022 14:36:57

miriki hat geschrieben: ↑ zum Beitrag ↑
26.09.2022 13:00:03

Die (z.B. <H1>) Elemente beachten nicht so ganz die <DIV> Begrenzungen...
Vermutlich hast du doppelt gemoppelt.

<H1> ist ein Blockelement, benötigt also kein <DIV> aussenherum. Hast du dennoch eines umschließt dies möglicherweise einen anderen Bereich als dein <H1> Element, zumindest legt deine Beschreibung dies nahe.

Und das gilt für alle meist unnötigerweise mit einem <DIV> umschlossenen Blockelemente. <DIV> ist nicht das einzige, sondern einfach das allgemeinste aller Blockelemente.
gruß

michaa7

-------------------------------
Menschen ändern gelegentlich ihre Ansichten, aber nur selten ihre Motive. (Oskar Negt)

uname
Beiträge: 12043
Registriert: 03.06.2008 09:33:02

Re: Frage zu CSS stellen?

Beitrag von uname » 26.09.2022 14:53:35

Du könntest für deine Webseite auch mal https://validator.w3.org bemühen.

miriki
Beiträge: 108
Registriert: 19.05.2022 10:49:21
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: Kiel

Re: Frage zu CSS stellen?

Beitrag von miriki » 27.09.2022 20:05:46

Moinsens!

Also ich hab das jetzt mit einigem Hin und Her hinbekommen. Aber warum es in der ursprünglichen Fassung nicht so recht wollte, weiss ich noch immer nicht so genau.

Genau genommen habe ich 2 css files: layout.css und stylesheet.css. In der Layout-Datei werden rechteckige Bereiche definiert, die für <div> benötigt werden. Das Stylesheet definiert Farben, Schriftarten, Ränder (margin und padding) usw.

3809

Das Nervige hier war eben: Der <h> im header oder footer klatscht an den rechten Rand, ohne margin wie links, oben oder unten. Das Ding hatte ich gefunden:
#content_top
{
width: 100%;
Ich musste das in
right: 0px;
ändern. Dann zeigte es das auch mit korrektem padding an. Warum funktioniert "100%" da so anders?

Etwas kniffliger zu finden war das 2. Problem. Links (und rechts) in dem <div> Container war der content zu hoch. Ich hatte einfach <a class=... dort eingesetzt. Das ganze hatte sich, glaube ich, behoben, als ich die in <p> Absätze eingefasst hatte. Bin mir da aber nicht mehr ganz sicher, da ich gerade auf <form> mit "submit" Funktion umgestellt habe. Aber die Suche in den css Files hat mich lange genug (erfolglos) aufgehalten.

Gruß, Michael

thoerb
Beiträge: 1677
Registriert: 01.08.2012 15:34:53
Lizenz eigener Beiträge: MIT Lizenz

Re: CSS ?

Beitrag von thoerb » 27.09.2022 20:45:46

whisper hat geschrieben: ↑ zum Beitrag ↑
26.09.2022 13:06:37
Ich fummel in solchen Fällen gerne mit den Chrome/Firefox Entwicklertools. Da kann ich live sehen was los ist und rum probieren.
:THX: Genau so mache ich das auch. So lange bis es passt und dann kopiere ich es in die CSS-Datei.

michaa7
Beiträge: 4610
Registriert: 12.12.2004 00:46:49
Lizenz eigener Beiträge: MIT Lizenz

Re: Frage zu CSS stellen?

Beitrag von michaa7 » 28.09.2022 13:14:20

CSS und html Fragen ohne code sind kaffeesatzleserei. Und zwei CSS Dateien sind wohl nur in den seltensten Fällen notwendig oder sinnvoll.

Und ich empfehle dir nochmals das oben bereits verlinkte Forum.
gruß

michaa7

-------------------------------
Menschen ändern gelegentlich ihre Ansichten, aber nur selten ihre Motive. (Oskar Negt)

Benutzeravatar
Emess
Beiträge: 3662
Registriert: 07.11.2006 15:02:26
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: Im schönen Odenwald
Kontaktdaten:

Re: Frage zu CSS stellen?

Beitrag von Emess » 28.09.2022 16:35:25

miriki hat geschrieben: ↑ zum Beitrag ↑
27.09.2022 20:05:46
Moinsens!

Also ich hab das jetzt mit einigem Hin und Her hinbekommen. Aber warum es in der ursprünglichen Fassung nicht so recht wollte, weiss ich noch immer nicht so genau.

Genau genommen habe ich 2 css files: layout.css und stylesheet.css. In der Layout-Datei werden rechteckige Bereiche definiert, die für <div> benötigt werden. Das Stylesheet definiert Farben, Schriftarten, Ränder (margin und padding) usw.

3809

Das Nervige hier war eben: Der <h> im header oder footer klatscht an den rechten Rand, ohne margin wie links, oben oder unten. Das Ding hatte ich gefunden:
#content_top
{
width: 100%;
Ich musste das in
right: 0px;
ändern. Dann zeigte es das auch mit korrektem padding an. Warum funktioniert "100%" da so anders?

Etwas kniffliger zu finden war das 2. Problem. Links (und rechts) in dem <div> Container war der content zu hoch. Ich hatte einfach <a class=... dort eingesetzt. Das ganze hatte sich, glaube ich, behoben, als ich die in <p> Absätze eingefasst hatte. Bin mir da aber nicht mehr ganz sicher, da ich gerade auf <form> mit "submit" Funktion umgestellt habe. Aber die Suche in den css Files hat mich lange genug (erfolglos) aufgehalten.

Gruß, Michael
noch besser ist, wenn du h1 für sich definierst
zb

Code: Alles auswählen

#irgendwas h1 {
    color: #000;
    margin-left: 10px;
    font-weight: bold;
    
usw.
Debian Testing (bleibt es auch)
Debian Bullseye KDE Plasma 5x Kernel 5.10.0-12-amd64
Notebook HP ZBook 17 G2

http://www.emess62.de

miriki
Beiträge: 108
Registriert: 19.05.2022 10:49:21
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: Kiel

Re: Frage zu CSS stellen?

Beitrag von miriki » 28.09.2022 23:02:27

michaa7 hat geschrieben: ↑ zum Beitrag ↑
28.09.2022 13:14:20
CSS und html Fragen ohne code sind kaffeesatzleserei.
Jup, ich sehe gerade, dass ich den m.M.n. relevanten Teil nicht, wie geplant, auch als CODE-Teil mit ins Posting genommen hatte:

Code: Alles auswählen

/* layout.css */

:root
{
    --top_top:       0px;
    --top_left:      0px;
    --top_right:     0px;
    --top_height:   86px;
[...]

#content_top
{
    background: #ff7f7f;
    position: fixed;
    top: var(--top_top);
    left: var(--top_left);
    right: var(--top_right);
    height: var(--top_height);
    padding: 8px;
}
[...]

Code: Alles auswählen

/* stylesheet.css */

:root
{

    --text_ink:   #cfcf7f;
    --text_paper: #001f3f;

    --font_normal: Verdana, sans-serif;
    --font_header: Georgia, serif;

    --text_size_h1: 32pt;
    --text_size_h2: 24pt;
    --text_size_h3: 18pt;
    --text_size:    12pt;

    --border_ink: #1fcfcf;

}

[...]

h1
{
    font-family: var(--font_header);
    font-size: var(--text_size_h1);
    font-weight: bold;
    text-align: center;
    /* text-decoration: underline; */
    /* font-variant: small-caps; */
    letter-spacing: 0.5em;
    color: var(--text_ink);
    background-color: var(--text_paper);
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 16px;
    border: 1px dotted var(--border_ink);
}

[...]

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>test</title>

        <meta charset="utf-8">

        <link rel="stylesheet" href="layout.css">
        <link rel="stylesheet" href="stylesheet.css">

    </head>

    <body>

        <div id="content_top">

            <h1>Header 1</h1>

        </div>

        <div id="content_left">

[...]

    </body>

</html>
Und zwei CSS Dateien sind wohl nur in den seltensten Fällen notwendig oder sinnvoll.
Naja, sehe ich nicht unbedingt so. Gerade die, wie hier o.a., Aufteilung auf Layout und "den ganzen Rest" finde ich sehr sinnvoll und übersichlich. Natürlich könnte ich auch den ganzen Kladderadatsch in eine Datei packen, das Bearbeiten macht es aber nicht übersichtlicher. Allerdings bearbeite ich i.a. mit einem simplen Texteditor, meist der MC interne, alternativ Nano. Es gibt sicher CSS-spezifische Editoren, die das schicker können. Aber dafür wiederum brauche ich das viel zu selten.
Und ich empfehle dir nochmals das oben bereits verlinkte Forum.
Warum nochmals? ;-) php.net, w3schools, selfhtml sind ziemlich dauerhaft von mir besucht. speziell selfhtml habe ich schon seit Jahren als Favorit und so z.B. auch das Ding lokal aus dem zip installiert. Ich bin mir einigermassen sicher, die Seite bereits seit den 90ern zu kennen.

Ich hab's ja, wie gesagt, hinbekommen. Ich weiss nur eben noch nicht so genau, warum es vorher nicht so aussah, wie geplant. Nicht, dass mir das jetzt auf Wochen schlaflose Nächte bereiten würde... ;-)

3812

Gruß, Michael

uname
Beiträge: 12043
Registriert: 03.06.2008 09:33:02

Re: Frage zu CSS stellen?

Beitrag von uname » 29.09.2022 08:39:15

miriki hat geschrieben:Allerdings bearbeite ich i.a. mit einem simplen Texteditor, meist der MC interne, alternativ Nano. Es gibt sicher CSS-spezifische Editoren, die das schicker können. Aber dafür wiederum brauche ich das viel zu selten.
Auch wenn es etwas Offtopic ist. Wenn ich dann doch mal Webseiten (HTML, CSS, PHP und sehr wenig JS) schreibe, dann schreibe ich diese direkt auf dem Remote-Webservern webbasiert im Browser. Ich verwende mittlerweile immer https://tinyfilemanager.github.io (Github). Aus Sicherheitsgründen deaktiviere ich die integrierte Benutzerverwaltung und nutze .htaccess . Das Ein-Dateien-Programm kopiere ich dann als index.php in einen Administrations-Ordner mit der .htaccess.

Tiny File Manager
kann Programmiersprachen wie HTML oder PHP erkennen, verwendet Syntaxhervorhebung und gibt einige Fehler an. Am besten ist aber die Undo-Funktion. Bei Interesse ein Demo, wo man aber natürlich keine Dateien speichern kann. Einfach mal eine HTML-Datei damit editieren.

Die Vorschau (z. B. PDF) mit Hilfe von Google deaktiviere ich ($online_viewer). Mit Verwendung von .htaccess setze ich $use_auth = false und ignoriere die meiner Meinung nach schlechte, integrierte Benutzerverwaltung. Aus Datenschutzgründen kann man sich natürlich überlegen, ob man einen Editor will, der z. B. Javascript-Bibliotheken per CDNs nachlädt. Mich stört das nicht. Stört mich ja auch nicht auf Webseiten von anderen Leuten.

Ich habe Tiny File Manager sogar weiterentwickelt mit ein paar kleinen Anpassungen, so dass man es praktisch als eine Art Cloud verwenden kann, die weitaus weniger wartungsintensiv und weitaus schneller als meine Nextcloud ist. Falls man jedoch dann nicht .htaccess verwendet (Teilen von direkten Links), darf man zwangsweise Suffixe nur per Positivliste erlauben, da es sonst zu einen Risiko für den gesamten Webserver wird (Stichwort PHP). Aber das führt nun alles viel zu weit.

miriki
Beiträge: 108
Registriert: 19.05.2022 10:49:21
Lizenz eigener Beiträge: MIT Lizenz
Wohnort: Kiel

Re: Frage zu CSS stellen?

Beitrag von miriki » 29.09.2022 14:57:33

uname hat geschrieben: ↑ zum Beitrag ↑
29.09.2022 08:39:15
Ich verwende mittlerweile immer https://tinyfilemanager.github.io (Github).
Ich hab mal kurz reingeschaut und werde definitiv einen weiteren Blick darauf haben.

Im Moment benutze ich, wie o.a., relativ simple Editoren. Das kann "lokal" direkt am Debian sein, ist oftmals aber eher "remote" per RDP (der Debian-Rechner steht ca. 3m rechts hinter mir auf meinem "Bastel"-Tisch) der Fall. Und das ist ja manchmal etwas zäh...

Der MC-Editor kann Syntax-Highlighting, macht bei PHP aber ein XHTML als Typ daraus. Und ein [-] / [+] Falten-Editor wäre mir eh lieber.

Andererseits könnte ich den Webspace auch so im intranet freigeben, dass ich mit NotePad++ von Windows aus direkt dort edtieren könnte. Aber das ist mir, glaube ich, zu frickelig, obwohl der als Editor echt ein Highlight wäre, z.B. auch mit der "Projekt"-Verwaltung.

Ach, ich weiss noch nicht so recht, bin unschlüssig... ;-)

Gruß, Michael

Antworten