Seiten-Rand wie weg machen mit "Custom Style Script"- Add On auf Firefox?

  • Hallo, ich bin neu hier und auch im Bereich CSS

    Es geht um den Firefox auf meinem Desktop und folgende Webseite (wobei Webseiten im allgemeinen, aber jetzt speziell diese): https://en.wikichip.org/wiki/WikiChip

    Ich habe dieses genial Add On "Custom Style Script" für Firefox entdeckt, mit dem man Webseiten selbst Designen kann (Also z.B Youtube, Wikipedia ect.). Ich möchte jetzt den "Rand" auf der Seite links und rechts weg machen, damit ich mehr Platz habe. Das selbe habe ich schon auf "der" Wikipedia "geschaft" (d.h ich habe es gefunden und nicht selbst geschrieben). Das habe ich da benutzt und es funktioniert.

    Ich bin wirklich neu in diesem Bereich und habe mir mal ein paar Turtorials angesehen. So weit ich das verstanden habe, ist der Rand "Margine" (heisst ja auch Rand). Ich verstehe jetzt nur nicht, was ich schreiben muss, damit ich eben die komplette Webseite "überschreibe". Also ich muss ja quasi den Wert "überschreiben", oder ? Und vor allem, wie passe ich das auf die jeweilige Webseite an?

    Sorry für die dumme Frage, aber ich konnte das jetzt nicht gerade herausfinden. Ich hoffe es ist trotzdem jemand so geduldig und kann mir helfen:?:-) Es handelt sich um dieses Add-On https://addons.mozilla.org/de/firefox/add…m-style-script/





    https://addons.mozilla.org/de/firefox/add…m-style-script/

  • Hallo

    So einfach wie du es dir vorstellst ist es leider nicht.

    Es gibt sehr viele Arten Ränder / Abstände zu erzeugen. Das setzen von margin ist nur eine davon. Zum Beispiel unsichtbare border, padding, Breitenbeschränkungen (width, max-width) mit Zentrierung, leere Tabellenzellen, unsichtbare Container (div, article, section, ...), Grafiken, und, und, und.

    Zudem werden bei CSS viele Anweisungen überschrieben. Das ist ja auch grade Sinn der "Cascade". Diese Überschreibungen müssen auch alle gefunden und überschrieben werden.

    Auch einheitlich aussehende "Ränder" können wiederum aus mehreren Teilbereichen bestehen. Deshalb müssen auch noch alle betroffenen Elemente gefunden werden.

    Halbwegs aktuelle Seiten sind zudem responsive (Media Queries), was wiederum berücksichtigt werden muss.

    Bei deinem ersten Versuch hast du mit der einfachen Lösung Glück gehabt. Bei der von dir verlinkten Seite müssen mehrere Container angepasst werden, die in ihrer Breite beschränkt und zentriert sind. Zudem ist sie responsive.

    Eventuell kann dir noch jemand eine Lösung erstellen. Dir das alles zu erklären wird aber wohl den Rahmen des Forums sprengen.

    Gruss

    MrMurphy

  • Wenn ich das richtig verstehe, dann geht es dir 'nur' um die Ansicht der Seite auf deinem persönlichen Desktop - also eine feste Bildschirmbreite und kein Bedarf irgendwelche Anpassungen (responsive / adaptiv) an der Seite durchzuführen?
    Dann könnten folgende Zeilen, mit denen die Breiteneinstellungen (1300px) von den Eltern-Containern überschrieben werden, dir weiter helfen.

    #wikichip-header, .mw-body-content {
    width: 100%;
    }

    sollte das nicht funktionieren, dann kannst du auch folgendes versuchen:

    #wikichip-header, .mw-body-content {
    width: 100% !important;
    }

    if(!sleep)

    {$sheep++;}

  • Ahhh, danke euch beiden !!! :D

    #wikichip-header, .mw-body-content {
    width: 100%;
    }

    Genau das habe ich gesucht. Das funktioniert aber auch auf verschieden grossen Fenster, wenn ich das gerade ausprobiere. Ich nehme dann einfach 99% für einen ganz kleinen Rand. Super, danke!

    Also wenn ich das richtig verstanden habe, ist Margine Abstand von der Textbox zum Seitenende und Padding ist der Abstand vom Text zur Textbox (also innerhalb), Border ist die dicke des Randes der Textbox und Width ist die Breite der Textbox, richtig? Woher weiss ich dann jetzt, ob die Textbox einfach zu wenig breit ist oder ob da ein Rand ist? Oder soll ich einfach selbst angeben, welche breite die Textbox hat und den Rest ignorieren?

    Und wichtigste Frage überhaupt: Wie wisst ihr, was für die "Textbox" steht? Also woher wusstest du jetzt, dass die Textbox hier (anscheinend) ".mw-body-content" heisst? Und was ist #wikichip-header ? Falls ihr keine Lust habt, mir das zu erklären, wisst ihr evtl. wo man das schnell herausfinden kann? Weil bei dem Turtorial, das ich geschaut habe, hiess es z.B p { box-sizing: content-box; width: 1000px } .

  • Ok, habs jetzt herausgefunden und bei einer anderen Webseite auch geschafft. Da steht ja immer die ID. Aber was ich nicht verstehe, ist, für was #wikichip-header steht. Weil das, was ich ändern muss, heisst ja (bei wikichip) .mw-body-content und wenn ich den Teil "#wikichip-header" weg lasse, funktionierts trotzdem. Oder soll ich da einfach "#webseitenname-header" hinschreiben ?

    - - - Aktualisiert - - -

    Ok, hat sich erledigt. Danke nochmals :)