Frage zu CSS stellen?

[miriki]

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

[whisper]

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]

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]

Moinsens!

Moin.

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

[Meillo]

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 ...

[michaa7]

hier wirst du kompetent geholfen

[michaa7]

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.

[uname]

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

[miriki]

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.



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]

Ich fummel in solchen Fällen gerne mit den Chrome/Firefox Entwicklertools. Da kann ich live sehen was los ist und rum probieren.

Genau so mache ich das auch. So lange bis es passt und dann kopiere ich es in die CSS-Datei.

[michaa7]

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.

[Emess]

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.



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.

[miriki]

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...



Gruß, Michael

[uname]

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]

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