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

Platos

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.

Code

/* This moves the sidebar off-screen */
    #mw-panel {
        opacity: 0;
        margin-left: -11em;
    }
    /* This moves other stuff into the leftover space */
    #content, #head-base, #footer, #mw-head-base {
        margin-left: -1px;
    }
    /* Nicer presentation for the left-hand tabs */
    #left-navigation {
        margin-left: 1em;
    }

Alles anzeigen

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/

MrMurphy

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

Sailor

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;
}

Platos

Ahhh, danke euch beiden !!!

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

Sailor

Einfach mal F12 beim FireFox (geht auch mit den meisten anderen Browsern) mit der geöffneten Seite drücken und schauen, was der 'Inspektor' dann anzeigt.

Platos

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

Tags