Beiträge von Mira_Belle

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!

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

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.

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.

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.

Moin 2002Andreas

Ich danke Dir.

Nun verrate mir doch mal jemand, wie man/frau auf diese "Elemente" kommt.

#site-description, #access, #main, #wrapper

Ich habe Deinen Code mal auseinandergenommen und mit den Werten experimentiert!

Raus gekommen ist, TADA

@-moz-document domain("borncity.com") {
#site-description {
    width: 100% !important;
}
#main, #wrapper {
    width: 90% !important;
}
#access {
    padding-left: 200px !important; 
    width: 85% !important;
}
}

Und das schaut dann so aus =>

War aber trotz Vorlage gar nicht so einfach.

Zitat von .DeJaVu

Was em angeht halte ich es für die falsche Skalierung, war das aussagekräftig genug?

Wenn sich das auf "meinen" Code zu Winfuture bezieht,

ist es nicht absolut egal, wenn die Änderung, die dadurch herbeigeführt wird, für mich OK ist,

oder?

Apropos Inspektor!

Den Eintrag #mainWrap kann ich finden, ist ja auch nicht schwer, links das "Auswahl-Werkzeug nutzen.

Nur was mach ich dann?

Im mittleren Fenster bekomme ich einen Haufen Code angezeigt, kann Werte und Anweisungen ändern

und deren Auswirkungen bestaunen.

Mit der "Stilbearbeitung" sehe ich dann CSS-Code. Toll.

Und Links habe ich ein weiteres Fenster, wo ich unter anderem das Box-Model anschauen und

verändern kann.

Nichts von alledem hat mich bis jetzt wirklich weiter gebracht!

Kurz, ich weiß bis jetzt, im gegen Satz zu den Browserwerkzeugen, was ich mit diesen Tool(s)

so richtig anfangen kann.

Auf https://wiki.selfhtml.org/wiki/CSS/Tutorials wird ja sehr schön CSS erklärt.

Es ist toll, dass mir dort gezeigt wird, wie man eine Seite gestaltet,

aber ich will ja einfach nur die Anzeigebreite von Seiten (Pages) verändern.

Mir sind Farbgebung, Schriften und Verschachtelungen so ziemlich egal.

(Nur weil ich in Frankreich etwas zu Essen bestellen will, oder in Spanien den Weg zum Klo erfragen,

muss ich doch keine Fremdsprache erlernen! ?)

Wenn Du also ein ganz Netter bist, erklärst Du mir, wie ich mit dem Inspektor umgehen muss,

damit ich auch in der Lage bin, andere Seiten in der Seitenbreitendarstellung zu beeinflussen.

An Winfuture und an Borns -Blog beiß ich mir nämlich gerade die Zähne aus.

Ist mir schon klar, dass nicht alle Pages gleich programmiert sind!

Ist wie mit einem Text, steht das Gleiche drin, nur sind es eben verschiedene Worte.

Mit .p-body-main, .#container { klappt es nicht.

Jedoch habe ich mit

@-moz-document domain("winfuture.de") {
    #container {
        width:1000px !important;
}
}

das Element in die Mitte bekommen.

Wobei ich gelesen habe, dass diese absolute Angabe in px nicht wirklich so dolle ist.

Wo war das doch nur gleich?

Hätt' ich Dummerchen doch bloß mal einen Link gesetzt.

Gefunden!

Irgendwo hier => https://wiki.selfhtml.org/wiki/CSS

@-moz-document domain("winfuture.de") {
    #container {
        max-width: 70em !important;
}
}

Viel besser!

Bin noch lernfähig.

Vielen lieben Dank 2002Andreas

Das computerbase.de funktioniert erst einmal so.

Mir ist nur nicht klar, wie Du auf .p-body-main, .wrapper { gekommen bist.

Mir macht das Layout auf Seiten die auf Gitter setzen enorm zu schaffen, bzw. ich verstehe es einfach nicht.

Winfuture macht es wieder anders, sind es bei zb. computerbase.de noch div class=,

ist es bei Winfuture div id= und

Borns Blog nutzt auch div id=.

Also bei computerbase.de ist der richtige Eintrag div class="wrapper"

Dann sollte der richtige Eintrag bei Winfuture div class="container" sein

und bei Borns Block ...?

OK, funktioniert nicht.

Danke 2002Andreas

Ich konnte Deine Anleitung auf "Supernature-Forum.de" gut nachvollziehen,

habe mich dann gleich an

computerbase.de

winfuture.de

und

http://borncity.com/blog/

versucht.

Heul, die Seiten sind allesamt irgendwie anders aufgebaut.

Wenn ich dich richtig verstanden habe, muss da in dem rechten Feld [Inspektor]

in etwa sowas wie div class=" blabla.p-body-inner { stehen.

Also bei "Supernature-Forum.de" steht da .p-body-inner {

bei drwindows.de main .p-body-inner {, wobei dies sich nur auf das Forum auswirkt!

Die Startseite ist davon nicht betroffen.

Dort kann ich nur section.artikel-übersicht > ul finden

mit dem Eintrag display: grid;

Sieht so aus=>

section.artikel-übersicht > ul {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--grid-gap);

}

überschreibe ich alles mit diesem Code

    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 20px;

habe ich zwar rausgefunden, wo was geändert werden kann,

aber immer noch nicht, wie ich das dann umsetzen kann.

Auch habe ich dann immer noch nicht die Breite anpassen können.

Ich blicks einfach nicht.

@.DeJaVu

alles schön und gut, wenn es Vorlagen zu einer Page gibt.

Nur wenn ich das auf der Page verwendete Leyout, bzw. dessen Code im

Inspektor nicht verstehe, nutzt mir Sylus auch nicht viel.

Damit kann ich mir doch die "Arbeit" nur erleichtern,

weniger Tipparbeit, mehr aber doch auch nicht, oder?

Stylus wieder deinstalliert.

Komme da nicht mit zurecht

und nur wegen einer Page, die nicht mal ich angepasst habe, ...

Kann jemand, der sich gut mit den Webentwicklertools in FF aus kennt,

mal ein kleines Tut schreiben?

An einem konkreten Beispiel?

Supernature-Forum.de

oder

Die Newsseite von Dr. Window, die ist,

so glaube ich etwas herausfordernder.

computerbase.de

winfuture.de

oder

http://borncity.com/blog/

Egal, nur eine, Schritt für Schritt. Bitte.

Und Danke Sören Hentzschel

@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* CSS Regeln hier werden angewandt auf:
     - Die Seite "http://www.w3.org/".
     - Jede Seite, deren URL mit "http://www.w3.org/Style/" beginnt
     - Jede Seite, deren URLs Host "mozilla.org" ist oder mit ".mozilla.org" endet
     - Jede Seite, deren URL mit "https:" beginnt */

  /* macht die oben erwähnten Seiten wirklich hässlich */
  body {
    color: purple;
    background: yellow;
  }
}

Ist ja sehr gut erklärt, die Unterschiede.

Super 2002Andreas

mit

@-moz-document domain("drwindows.de") {
    main .p-body-inner {
        padding:0 calc((100vw - var(--content-width)) / 8)!important;
    }
}

ist das Forum (drwindows.de) wie gewünscht auf Fenster breite.

Auch wenn ich angemeldet bin!!

Mit Stylus habe ich Heise.de erträglich hinbekommen.

Danke Sören,

jedoch bewirkt eine Änderung auf egal was, nichts.

Leider.

Von @-moz-document domain(drwindows.de/news/)

auf @-moz-document url(drwindows.de/news/) geänder.

@-moz-document url-prefix(drwindows.de/news/) ausprobiert

und auch @-moz-document regexp(drwindows.de/news/)

Nichts hat eine Auswirkung auf das Erscheinungsbild der Page

Dabei würde es mir reichen, wenn auf Browserfensterbreite angepasst werden würde.

OH,

dann mach ich's mir wohl zu einfach.

Ok, ich warte da mal auf Tipps.

So, erster Versuch die Seit(en) von Dr. Windows anzupassen.

Funktioniert nur nicht so, wie ich es will!

@-moz-document domain(drwindows.de/news/) {
    section{
        padding:var(--content-padding) calc((100vw - var(--content-width)) / 8)!important;
    }
}

@-moz-document domain(drwindows.de/xf/) {
    main .p-body-inner{
        padding:0 calc((100vw - var(--content-width)) / 8))!important;
    }
}

Wenn ich den letzten Wert, in diesem Fall die 8, original steht da eine 2, eingebe,

verändert sich die Breite.

Wenn ich diese Zeilen dann in "meine" userContent.css eintrage, passiert nix!

Wo ist der Fehler?

Frage!

Könnten wir hier im Forum eine Codesammlung zu verschiedenen Pages aufmachen?

Bei vielen von mir besuchten "Seiten" bewirkt dieser Code nämlich leider nix.

Mh, ....

Welcher Tipp?

Aber es ist schön, dass Du Dein Problem gelöst bekommen hast.

Nur, mich würde es echt brennend interessieren, wie die Lösung ist!

Hi "Nightwalker"!

Wenn die Jungs Dir helfen "sollen", solltest Du auch Deinen Code der userChrome.css veröffentlichen.

Zitat von captain chaos

Mira_Belle

Dein Code hat bei mir keine Auswirkungen.

Das ist merkwürdig, denn egal welches Theme ich auch auswähle,

das "userChrome.css" legt die Veränderungen fest!

Es muss also an irgendetwas an Deiner Konfiguration liegen.

Zitat von Ulrich_2508

Hallo Mira,
ich bin im "userChrome.css" dort habe ich die Auswahl Boolean(ist markiert), Number und String.
Wie kann ich den Programmcodes erstellen?

Gruß Ulli

Was habe ich übersehen?

Sorry, ich verstehe Deinen Beitrag einfach nicht!

Die "userChrome.css" ist einfach eine "Textdatei"!

Hast Du überhaupt den verlinkten Beitrag von milupo gelesen?

Es wird da wirklich "Idiotensicher" erklärt, was zu tun ist.

Das habe sogar ich unartiges Mädchen verstanden.

Also, alles auf Anfang!

Und noch einmal von Vorn'.