userContent.CSS | Seitenbreite von Webseiten & Domains immer auf 100% (Monitorbreite) strecken

Zitat von Mira_Belle

Nun verrate mir doch mal

Kurzform

Gewünschte Seite öffnen.

Rechtsklick auf das Element, welches man ändern möchte....Untersuchen

Das sieht dann erstmal so aus:

Das Element nennt sich also wrapper.

Es handelt sich um eine id, also wird es per Raute # angesprochen = #wrapper

Dann öffne ich die Stilbearbeitung und erstelle mit dem + links einen neuen Stil

Hier gebe ich dann den den gewünschten Code ein:

#wrapper {
  width: 100% !important;
}

Das Ergebniss wird dir dann sofort angezeigt.

Und dann prüfen, ob der eine Wert schon ausreicht.

Wenn nicht, dann wieder mit dem Inspector den nächsten Wert suchen, und ebenfalls in den Code zwecks Soforttest einfügen, usw. usw.

Wichtig:

Wenn du auf einer Seite dann eine andere öffnen willst, also z.B. ein Unterforum, dann musst du dir den bisherigen Code kopieren.

Durch den Wechsel zu der anderen Seite wird er nämlich wieder aus der Stilbearbeitung entfernt.

Auf der neuen Seite musst du ihn dann wieder einfügen um zu sehen, ob er auch da funktioniert.

Nur mal so:

Um so einen Namen richtig zu kopieren, also als class mit Punkt oder id mit Raute, machst du einen Rechtsklick drauf..Kopieren..CSS-Selektor..

und dann in der Stilbearbeitung wieder einen Rechtsklick...Einfügen.

Dann hast du gleich den richtigen Eintrag.

Alternativ kannst du natürlich auch auf der rechten Seite in dem Feld den Eintrag markieren..und dann kopieren.

Zitat von Mira_Belle

Ich habe Deinen Code mal auseinandergenommen

Das ist auch eine sehr gute Möglichkeit wenn man untersschiedliche Werte haben möchte oder auch muss.

Zitat von Mira_Belle

Raus gekommen ist, TADA

Ich bin stolz auf dich, hatte ich dir doch schon gesagt..DU schaffst das

Mit etwas Übung und Geduld, wird das immer einfacher und besser.

PS:

Es macht aber auch Spaß dir zu helfen, weil du selber Spaß daran hast.

So habe etwas Experimentiert!

Winfuture sieht z.Z. bei mir so aus!

So ganz zufrieden bin ich noch nicht!

Ich komme einfach nicht dahinter,

wie gewisse grafische "Elemente" angepasst werden können.

Habe mal eine Grafik angehängt.

Da ist die "Linie" zwischen Reistrieren und der "Suche", die gehört doch ans Ende!

Bei den Sublinks hört die Linie nach unten einfach auf

und am Ende ist diese Leiste auch nicht bündig.

Weiter bin ich noch nicht gekommen,

aber ich merke, dass diese Seite ziemlich blöd designt wurde.

Man hätte es auch noch komplizierter machen können.

Da sind so viel statische Werte, ne ne ne.

Zitat von Mira_Belle

Weiter bin ich noch nicht gekommen,

Z.B.:

Da müssen mehrere Dinge angepasst werden. Wahrscheinlich ist auch dieser Code noch nicht perfekt dafür.

Zum Üben einen ungünstige Seite

#header, .headerR, #topnavi, #mainWrap {
  width: 1280px !important;
  margin-left: -2px !important;
}

.header_login a.logout, .header_login a.register {
  margin-right: -160px !important;
} 
#centerWrap {
  margin-left: -190px !important;
  width: 820px !important;
}

#header .navigation {
border-bottom: 1px solid lightgray !important;
  opacity: .7 !important;  
}

Zitat von .DeJaVu

winfuture - #container ist falsch, zeigt dir aber auch der Inspector an.

#mainWrap, #centerRightWrap, #centerWrap, .primary_content, .content_wrap wäre das gesuchte - alle, nicht nur eines davon. Ich hatte es ja oben schon gesagt, als wenn es so einfach wäre.

All diese Elemente haben eine Breite, auf dem Bild so halb aus dem Kopf. Warum das so ist, musst du die fragen, bei denen ist das CMS eben so aufgebaut. Aber die genannte Elemente sind alle ineinander verschachtelt mit Breiten so 990px, 670px usw, und die musst du in der Hierarchie nach und nach abarbeiten.

#mainwrap maximal, ändert nichts am Inhalt, also nächstes Element, usw.

Und im Inspector hast du oben eine Suchleiste, da kannst du die gegebenen Tags mit suchen, also einfacher gehts doch nicht.

Das ist bei winfuture so, bei born, bei x, bei y.

Danke 2002Andreas

Aus Deiner Codevorlage ist nun dies geworden

    #mainWrap {
        width: 100% !important;
        margin-left: -2px !important;
    }
    .headerR {
        width:73% !important;
        margin-left: -2px !important;
    }
    #topnavi {
        width:99% !important;
    }

    .header_login a.logout, .header_login a.register {
        margin-right: 80px !important;
    }

    #centerWrap {
        margin-left: -295px !important;
        width: 950px !important;
    }

    .primary_content {
        margin-left: 1px !important;
        width: 700px !important;
}
    #header .navigation {
        border-bottom: 1px solid lightblue !important;
        opacity: .7 !important;  
    }

Hier das Resutat

Mir gefällt noch nicht der Abstand zwischen dem linken Newsblock und dem rechten Block mit "Allerlei".

Da muss noch "werkeln".

Nachtrag!

Habe noch etwas gebastelt!

    .content_wrap {
        margin-left: -1px !important;
        width: 800px !important;
    }
    .primary_content {
        margin-left: 1px !important;
        width: 800px !important;
    } 

Am Ende noch hizugefügt und ....

Nur bei den ersten New bekomme ich es nicht hin.

Ach und Danke auch an Dich .DeJaVu,

der Hinweis mit der Matroschka,

Verschachtelung, war Gold wert.

Nachtrag 2

Es ist schon spät, aber mir ist gerade Aufgefallen,

dass die Werte für .content_wrap & .primary_content

gleich sind.

Muss das so sein?

Nunja, werde ich am Wochenende überprüfen.

Es ließ mir einfach keine Ruh'!

Musste Borns-Blog noch mal überarbeiten.

Resulat s.u.

@-moz-document domain("borncity.com") {
    #site-description {
        width: 100% !important;
    }
    #main, #wrapper {
        width: 78% !important;
    }
    #access {
        padding-left: 120px !important; 
        width: 90% !important;
    }        
    #main {
        padding-top: 0px !important; 
        padding-right: 200px !important;
    }
    #primary {
        margin-right: -185px !important;
        width: 250px !important;
    }
    #content {
        width: 790px !important;
    }
}

Auch war ich mit Winfuture nicht so ganz zufrieden.

Daraus ist dann fast ein Roman geworden.

@-moz-document domain("winfuture.de") {
    #mainWrap {
        width: 95% !important;
        margin-left: 35px !important;
    }
    .headerR {
        width:71% !important;
        margin-left: -6px !important;
    }
    #topnavi {
        width:98% !important;
    }
    .header_login a.logout, .header_login a.register {
        margin-right: 80px !important;
    }
    #centerWrap {
        margin-left: -295px !important;
        width: 950px !important;
    }
    .primary_content {
        margin-left: 1px !important;
        width: 700px !important;
    }
    #header .navigation {
        border-bottom: 1px solid lightblue !important;
        opacity: .7 !important;  
    }
    .content_wrap {
          width: 850px !important;
    }
    .primary_content {
        margin-left: 55px !important;
        width: 860px !important;
  }      
}

Aber ich bin jetzt zufrieden

und möchte mich mal ganz besonders bei 2002Andreas bedanken.

Zitat von Mira_Belle

Aber ich bin jetzt zufrieden

Nur das zählt

Es ist manchmal echt fummelig bis es wirklich passt.

Freut mich wenn ich dir dabei zumindest etwas helfen konnte, war gern geschehen.

Mal was nebenher

Zitat

Viele Seiten scheinen immer noch auf 90er-Jahre-Röhrenmonitor (S)XGA getrimmt zu sein - warum auch immer?

Ich hatte erklärt, warum manche Seiten so aussehen, das hat gar nichts mit "veraltet" zu tun, sondern basiert auf wissenschaftlichen Analysen und menschlichem Leseverhalten. Deine Vorlieben in Ehren, aber das sind die falschen Rückschlüsse.

Und wie du und andere bereits festgestellt haben, sind viele modernen Webseiten so aufgebaut, kann also nicht alles so altbacken sein.

Hi Ihr lieben.

Ich bin gerade an Chip drann,

doch da beiß ich mir gerade die Zähne aus.

Im Grunde sieht die Seite ganz einfach aus,

doch irgendwie macht "mein" Code nicht was ich will!

Im "Stilbearbeitungsfenster" eingegeben, schaut die Seite

dann doch etwas anders aus, als wenn die userContent.css geladen wird.

Jedoch ist das jetzt erst einmal nicht schlimm!

Was mich stört, sind die Lücken! Die bekomme einfach nicht weg.

Und dann sind da eben die Elemente, die Eingerückt sind und nicht

die gewünschte Breite haben.

Im "Stilbearbeitungsfenster" den Code eingegeben, sind diese

Elemente wenigstens alle Linksbündig.

Ich denke, ich bin falsch vorgegangen und habe einen Denkfehler!

Kann mir jemand helfen?

@-moz-document domain("chip.de") {
    #G32 {
        margin-top: -270px;
    }
    #M1 {
        margin-right: -150px;
    }
    #widget-entry-filter {
        display: none;
    }
    .fb-col-lg-4 {
        left: 25px;
    }
    .fb .wrapper-safe {
        margin-left: -20px;
    }
}

#G32 ist falsch, suche nach .Portal

Warum? Weil #G32 kein einziges padding, margin etc in der Größe hat

#M1 braucht kein margin, aber warum hat es 1000px Breite (bzw die darunter)?

(in Abhängigkeit von @media screen)

--breakpoint-desktop ist dein Stichwort.

.fb-col-lg-4 ist auf 33.3% festgelegt.

.fb .wrapper-safe hat rechts und links (gleiche) Ränder, (...)

Aufgabe!

Komme bei Chip.de einfach nicht wirklich weiter!

Glaube ich das richtige Element gefunden zu haben,

zerhaut mir die nächste "Änderung" wieder alles.

Ich habe so das Gefühl, ich komme zwei, drei Schritte

nach vorne und dann, klatscht, fünf, sechs zurück!

@-moz-document domain("chip.de") {
    .Portal {
    --topbanner-height-min: 1px !important;
    }
}

Minimalistisch, die gähnende Leere am Anfang der Seite ist weg,

und hier ist Schluss, wenn mir keiner auf die Sprünge hilft.

Denn ich Glaube mit "try and error" komme ich nicht wirklich weiter.

Mir fehlt dann doch entweder genügend Erfahrung und/oder auch "Wissen".

Auch mit dem Code für "computerbase.de" läuft es nicht so, wie gedacht!

So sieht die Seite aus, beim ersten Aufruf!

Und so, nach einem Reload!!

Der Code dazu, ein Roman:

@-moz-document domain("computerbase.de") {
        .p-body-main, .wrapper {
        width: 95% !important;
}
    #content {
        margin-left: 150px !important;
    }

.homepage-link {
        margin-left: 100px;
}
.headermeta {
        left: 1020px;
        right: -150px;
}
.wrapper  {
   margin-left: 80px;
}
.row-main {
    width: 42em;
}
}

Auch hier bräuchte ich mal eine Überarbeitung von einem Profi!

man man man...

Es muss so aussehen:

@-moz-document domain("chip.de") {
.Portal
{
    --topbanner-height-min: 0 !important;
}

:root
{
    --breakpoint-desktop: 100vw !important;
}

.fb-col-lg-8
{
    width: calc(var(--breakpoint-desktop) - 420px) !important;
}

.fb-col-lg-4
{
    width: 330px !important;
}

}

// Für chip.de empfehle ich eher folgendes CSS:

body {
    display: none !important;
}

Das "fixt" dann gleich auch die qualitative Ebene. Ganz ehrlich, chip.de hat nichts mit seriösem Journalismus zu tun, wie ich bereits vor ein paar Jahren beispielhaft zeigte. Daran hat sich im Jahr 2021 nichts geändert. Da geht es ausschließlich um Klickgenerierung und das um jeden Preis.

Zitat von Sören Hentzschel

// Für chip.de empfehle ich eher folgendes CSS:

CSS

body {
    display: none !important;
}

Das "fixt" dann gleich auch die qualitative Ebene. Ganz ehrlich, chip.de hat nichts mit seriösem Journalismus zu tun, wie ich bereits vor ein paar Jahren beispielhaft zeigte. Daran hat sich im Jahr 2021 nichts geändert. Da geht es ausschließlich um Klickgenerierung und das um jeden Preis.

Gibt es diesen Code auch für das ganze Internett?

Denn der ist wirklich sehr gut und filtert wirklich alles!

Zitat von Mira_Belle

Gibt es diesen Code auch für das ganze Internett?

Ende der Seite

Oder pauschal:

* {
  display: none !important;
}

Zitat von Mira_Belle

Denn der ist wirklich sehr gut und filtert wirklich alles!

Nicht alles, z. B. wird noch der Seitentitel angezeigt.

Sören, der war echt gut, YMMD

Ich hätte noch anzubieten: Internet Hauptschalter

Danke, vielen lieben Dank .DeJaVu.

Ich habe Deinen Code, mit dem was ich rausgefunden hab mal kombiniert!

Mir war "es" zu breit.

Auch habe ich diese blöde Werbung, mit den Elektrofahrzeugen ausgeblendet

und die etwas schmalere Seite etwas mehr in die Mitte geschoben.

@-moz-document domain("chip.de") {
    .Portal {
        --topbanner-height-min: 0 !important;
    }
    :root {
        --breakpoint-desktop: 80vw !important;
    }
    #widget-entry-filter {
        display: none !important;
    }
    #G32 {
        margin-left: 120px !important;
    }

    .fb {
        margin-left: -40px!important;
        padding-left: 20px!important;
    }
    .fb-col-lg-4 {
        width: 380px !important;
        left: 35px !important;
    }    
}

Es gibt zwar teilw. Lücken ohne Inhalt zwischen den einzelnen Beiträgen,

aber dafür auch kein Blinkiblinki und doofe Werbung.

Nachtrag.

Kann bitte nochmal jemand über den Code für ComputerBase schauen?

@-moz-document domain("computerbase.de") {
    #content {
        margin-left: 100px !important;
        width: 80em !important;
    }
    .wrapper  {
        margin-left: 100px !important;

    }
    .row-main {
        width: 35em !important;
    }
    .homepage-link {
        margin-left: 100px !important;
    }
    .headermeta {
        left: 870px !important;
        right: -150px !important;
    }        
}

Dürfte in der Mitte etwas breiter und mittiger sein.

Ich bekomme es einfach nicht hin.

Mit diesem Code wird die Seite im übrigen IMMER wie "gewünscht" angezeigt.

Bisher hatte ich immer den Fehler, dass erst der Code ignoriert oder "falsch" interpretiert wurde

und erst nach einem Reload der Code (richtig) verarbeitet wurde.

Ja, gut, ich habe mich nur um die Hauptseite gekümmert, die du anfänglich gezeigt hast. Freut mich, weiter so. Wie geschrieben ist das trial&error, nicht nur bei dir. Wenn ich so "komisch" schreibe, ist das einfach nur meine Art, dich auf den richtigen Weg zu schubsen.