Links/Buttons sind nicht anklickbar (z.B. Bredcrumbs) und Text klebt zu nah am Rand

  • Hey,

    Beim umschreiben des Designs bin ich jetzt endlich beim Endspurt angelangt und habe noch ein paar komische Fehler, wo ich absolut nicht weiß, wodurch sie entstanden sind. Ich versuche mein Problem anhand von einem Screenshot zu zeigen.

    Spoiler anzeigen

    Erläuterung:

    Die Worte/der Titel "WoltLab Suite" ist mit der Maus nicht direkt anwählbar. Man kann das Wort nicht markieren. Was dazu führt, dass bei Punkt 2. Die buttons nicht bedienbar sind. Man kann sie nicht klicken, der Cursor der Maus bleibt weiterin als Pfeil. Das ist auf jeder Seite so, im oberen Bereich.

    In der roten Leiste, direkt darüber (Breadcrumbs?) stehen auch links, wenn man sich zum beispiel im Forum befindet. Diese kann man ebenso nicht markieren/klicken. Da sich in diesem Bereich aber auch nützliche Dinge befinden (Beiträge als gelesen markieren usw) möchte ich darauf auch nicht verzichten.

    Auch sieht man, dass der Titel "WoltLabSuite" am seitlichen und oberen Rand klebt. Wie kann ich darauf Einfluss nehmen, und Ränder machen/lassen? Der Rahmen vom Content klebt auch zu sehr an den rechten Navboxen.

    Kann mir jemand helfen, unsere letzten Fehlerchen auszumergeln?

    Vielen Dank und liebe Grüße!

  • Ohje, ja ich bin gerade dabei, das css zu säubern, da ist noch einiges altes drin von der 4.1er (never touch a running system) .

    Ich meine, es liegt mit am header. der ist aktuell draussen und nun wären die Buttons anklickbar.


    Edit: Oh! dein zweites Zitat ist der übeltätetr, mipu . Aber der code schiebt den content unter die Breadcrumbs, das wollte ich gerne so haben, dass da dieser spalt weg ist... hmmm

    Einmal editiert, zuletzt von Kazu1337 (20. Oktober 2019 um 17:29)

  • Super! danke norse damit ist das breadcrumbs problem gelöst!

    Jetzt such ich noch eine möglichkeit, um ein wenig platz um den Content herum zu lassen, damit der Text nicht mehr an den rändern klebt.

    Und ich denke, beim Header brauche ich auch noch Hilfe, da muss auf jedenfall noch der Abstand zwischen Header und brauner leiste (das krieg ich vl hin) und Breadcrumbs unten weg, aber da schraube ich noch herum

  • CSS
    .contentHeader .contentHeaderTitle {
        padding: 20px;
    }

    Nachtrag: padding ist hier besser als margin-left (dann sind auch die Abstände auf allen Seiten passend)


    Pagenavigition rechts zu kurz

    CSS
    body .pageNavigation {
        margin-right: 20px; //momentan 49px
    }

    3 Mal editiert, zuletzt von Quitter (21. Oktober 2019 um 10:11)

  • Pagenavigition rechts zu kurz

    ja, das klappt noch nicht so ganz, die rote leiste soll bündig mit dem Content abschließen. Ach, ich verzweifel da noch dran. Kaum ist ein Fehler gelöst, tritt der nächste auf.

    Aktuelle Fehler nochmal:

    - Header soll rund herum keine abstände/also Lücken haben, und bündig an allem abschließen

    - rote Leiste soll bündig mit Content (links wie rechts) abschließen

    - Text soll nicht mehr am rand (Content bereich, oberer und seitenränder) kleben

  • ja, das klappt noch nicht so ganz, die rote leiste soll bündig mit dem Content abschließen.

    Du musst das margin-right auch nicht löschen, sondern ändern ;)

    Den Rest musst du so lassen wie er ist.

    Um das Headerbild anständig einzupassen solltest du zuerst die Einstellungen deines Logos im ACP an dein Bild anpassen, und den evtl. Rest per CSS

  • Du musst das margin-right auch nicht löschen, sondern ändern ;)

    Oooh xD ja ich war eh verwirrt haha, damit haben wir schon mal rumgespielt, allerdings ist es auf meinem PC anders, als bei meiner Kollegin


    Um das Headerbild anständig einzupassen solltest du zuerst die Einstellungen deines Logos im ACP an dein Bild anpassen, und den evtl. Rest per CSS

    Ja? Hmm, hab da noch an der Höhe was getan, aber mehr fällt mir auch nicht ein. ich hätte gerne gehabt, dass der Header im .pageHeaderLogo genau zwischen brauner und roter leiste ist, ohne transparente Lücken und in der breite, wie der content und die rote leiste natürlich, was, denke ich, aktuell nicht der Fall ist.

  • CSS
    @include screen-lg {
        .pageHeaderFacade > .layoutBoundary {
            padding-bottom: 0;
            padding-top: 0;
        }
    }

    Und aktuell hast du noch folgendes drin:

    CSS
    body .pageHeaderLogo {
        [...]
        background-size: auto;
        [...]
    }

    Ersetze dort auto durch cover.

  • Meeeine Güte, eeeendlich!!

    Lieben Dank! An euch alle, ihr habt mir sooo viel weitergeholfen (und graue Haare erspart!). Bin gerade noch nicht ganz sicher, ob das auf allen (Den meisten Bildschirmen) halbwegs gut aussieht, aber das testen wir dann.

    Rechts geht bei mir der Header noch etwas raus. // EDIT: nach ein wenig rumtesten passt es bloß an der rechten seite mit dem Content nicht zusammen, aber was genau, weiß ich noch nicht.

    2 Mal editiert, zuletzt von Kazu1337 (21. Oktober 2019 um 17:50)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!