Optik des Template v6 an unterschiedliche Browsergrößen automatisch anpassen
#1 Optik des Template v6 an unterschiedliche Browsergrößen automatisch anpassen
Hallo @Ingmar @Wolfgang und andere
Ich brauche mal bitte eure Hilfe. Habe die Optik meiner Foren die Unter dem neuen Tempalte v6 angelegt sind etwas anders angepasst. Die Optik ist soweit so gut, aber jetzt kommt das Problem.
Ansicht des Forum bei einer Browsergröße von 100 % sieht das so aus:
Ansicht des Forum bei einer Browsergröße von 120 % sieht dann leider so aus:
Ansicht des Forum bei einer Browsergröße von 80 % sieht dann leider so aus:
Wie man sieht, hat sich der Bereich unter dem Headerbild entsprechend vergrößer oder verkleinert. Ich bräuchte es allerdings so, das sich der Bereich beim Vergrößern oder Verkleinern per STRG-Taste und Scollrädchen automatisch anpasst. Noch geiler wäre es, wenn sich auch das Backgroundbild mit anpassen würde.
Ich habe leider schon so einige ausprobiert, aber ich bekomme es einfach nicht hin...
Könnt ihr mir da einen CSS/SCSS-Befehl geben ? Ich bin am verzweifeln und bekomme es einfach nicht hin 
Link zu eines der Foren, die ich auf das neue v6-Tempalte umgerüstet habe wäre: www.caseih-forum.de
Wäre es auch möglich, die Menüleiste der Breite des Headerbildes und dem darunterliegenden Forumsbereich mit anzupassen ? Da habe ich zwar schon was per Magrin-Befehle versucht, was auf dem Desktop auch aussieht, aber sobald ich auf mobile Ansicht umstelle, verzieht sich alles und mach die Ansicht "unbrauchbar"...
Auf eine Antwort würde ich mich freuen.
Liebe Grüße von 844er
Fehlende PS werden durch Wahnsinn ersetzt
#2 RE: Optik des Template v6 an unterschiedliche Browsergrößen automatisch anpassen
Probiere es mal mit
2
3
4
.xpagehead{
@extend .container;
@extend .m-auto;
}
Technik · #3 RE: Optik des Template v6 an unterschiedliche Browsergrößen automatisch anpassen
Hallo @Ingmar
Damit hast du jemanden Glücklich gemacht 
Auf den Befehl wäre ich nie gekommen. Ich habe da soviel ausprobiert...
Jetzt habe ich aber noch ein groooßes Problem bezügl. der Anpassung der Menüleiste auf mobilen Endgeräten und hoffe du kannst mir da ggf. auch helfen..
Ich habe mit folgendem Befehl die Menüleiste auf gleiche Fluchtlinie gesetzt den Rest des Forum
.navbar {
background-color: #b31804;
color: #e3e3e3;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 153px;
margin-right: 153px;
}
Das Ergebnis sieht dann in der Desktop-Ansicht so aus
Hier greift leider dein Befehl von oben nicht...
Desweiteren sieht die Menüleiste dann in der Mobilen-Ansicht mit meinem Befehl leider so aus:
Muss/kann ich da meinem Befehl (.navbar) noch ergänzen ? Habe da einiges probiert, aber es klappt einfach nicht...
Kannst du da vielleicht nochmal helfen ? Ich komme da einfach nicht weiter....
PS: Ich habe meinen Befehl wieder rausgenommen, da sonst die mobile Ansicht für Handy-Nutzer nicht gut aussieht.
Gruß 844er
#4 RE: Optik des Template v6 an unterschiedliche Browsergrößen automatisch anpassen
Hallo 844er,
ich beschäftige mich auch gerade mit dem "responsive Design"!
Schon erstaunlich, was hier so drin steckt.
Die Frage ist nur, wie bei allen neuen Dingen, wo muss dran gedreht werden (siehe Iconbar)!
Wie schaut es bei Dir im "Desktop-Header" aus?
Vielleicht liegt es hier nur an der Einstellung!
Für XXS können auch andere Werte eingesetzt werden, wie zB. lg oder xl !
2
3
4
5
6
7
8
9
10
11
$container-max-widths: (
xxxs: 320px,
xxs: 320px,
xs: 540px,
sm: 700px,
md: 730px,
lg: 960px,
xl: 1140px,
xxl: 1560px,
xxxl: 1850px
);
Bis dann
Wolfgang
Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge
#5 RE: Optik des Template v6 an unterschiedliche Browsergrößen automatisch anpassen
Hallo @Wolfgang
Vielen Dank für deine Hilfe, die ich sehr zu schätzen weiß
Ich habe im Desktop-Header jetzt was nach deinem Vorschlag umgestellt, was aber leider nicht geholfen hat. Kann aber auch mit den CSS/SCSS-Befehlen zusammenhängen, die ich für mein Forum auf www.caseih-forum.de gesetzt habe. Ich denke, das ich da auch was ändern/löschen muss ? Wenn ja, dann weiß ich nicht genau was ich da wie abändern muss, damit es mit der Ansicht besser klappt.
Hier erstmal die Ansicht auf einem normalem Monitor (24 Zöller) nach der Änderung im Desktop-Header von lg auf xxs und von vh auf auto
Und hier dann die mobile Ansicht im Hoch- und Querformat mit Änderung von lg auf xxs im Desktop-Header
Habe aber jetzt die Änderung wieder zurückgenommen und von xxs auf lg umgestellt, was dann in der Auswirkung so aussieht:
Es sollte eigentlich in der Hochversion auf allen Handys so aussehen...
Ok, jetzt habe ich natürlich nicht die Breakpoints verändert, wo ich mich nicht so ganz ran traue, da ich die Veränderungen im laufenden Forumsbetrieb durchführe, wo eventuell gerade Leute am schreiben/arbeiten sind..
Die Einstellungen der Breakpoints sehen bei mir so aus:
Was ich jetzt auch nicht geändert habe sind die zuvor erstellten CSS/SCSS-Befehle. Ich denke, da müßte ich dann auch noch was verändern... Nur wo genau muss ich was abändern ??
Hier die Übersicht meiner CSS/SCSS-Befehle im v6 Template
Und jetzt zum Thema Menüleiste anpassen... Da möchte ich gerne diese an die Breite das Forum anpassen damit alles in einer Linie steht und nicht wie jetzt in der Desktop-Ansicht über die gesamte Breite der Seite angezeigt wird.
Um die Menüleiste auf die Breite des Forum anzupassen habe ich folgenden Befehl erstellt (ist aktuell nicht in meinen CSS/SCSS-Befehlen vorhanden):
2
3
4
5
6
7
8
9
.navbar {
background-color: #ad030f;
color: #fafafa;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 153px;
margin-right: 153px;
position: absolute;
}
In der Desktop-Ansicht auf einem 24 Zoll Monitor sieht das ganze dann so aus:
In der Mobilen-Ansicht per Handy im Hoch- und Querformat sieht das ganze dann leider so aus:
Hier hat es den Header-Bereich oben und den Fuss-Bereich unten leider leicht "zerschossen"...
Der von Ingmar erstellte CSS/SCSS-Befehl mit
2
3
4
.xpagehead{
@extend .container;
@extend .m-auto;
}
greift für die Breitenanpassung der Menüleiste leider nicht
Hättest du hier ein Lösung des Problems ??? Da ich leider Laie auf dem Gebiet bin weiß ich nicht, was ich wo ändern und eintragen muss und wäre für jede Hilfe sehr sehr dankbar...
Gruß 844er
Fehlende PS werden durch Wahnsinn ersetzt
#6 RE: Optik des Template v6 an unterschiedliche Browsergrößen automatisch anpassen
Zitat von 844er im Beitrag #3
Ich habe mit folgendem Befehl die Menüleiste auf gleiche Fluchtlinie gesetzt den Rest des Forum .navbar { background-color: #b31804; color: #e3e3e3; padding-top: 0px; padding-bottom: 0px; margin-left: 153px; margin-right: 153px;}
Also das sollte eigentlich ohne Probleme klappen:
2
3
4
5
.xpagehead, .navbar{
@extend .container;
@extend .m-auto;
}
Vielleicht noch zur Erklärung:
Es handelt sich hier um so genannten SCSS-Code. Die @extend-Funktion bedeutet nichts anderes, als dass alle CSS-Einstellungen der Klasse .container bzw. m-auto auch für diese Elemente übernommen werden.
.container ist dabei eine hilfsklasse von Bootstrap die vorgibt, wie breit bestimmte Inhalte auf bestimmten Endgeräten angezeigt werden.
.m-auto setzt "margin:auto" und sorgt somit dafür, dass das Ganze zentriert angezeigt wird.
Bei deinem Code ist das Erste Problem, dass du mit festen Pixelwerten (153px) arbeitest. Das mag zwar bei dir dann schick aussehen - bei einem anderen Monitor passt es aber nicht mehr.
Desweiteren kannst du deinen Code so einschränken, dass das erst ab z.B. einer bestimmten Auflösung greift. So kannst du die Anzeigefehler auf dem Handy vermeiden.
Z.b. sorgt die SCSS-Anweisung @include media-breakpoint-up(lg) dafür, dass der Code nur für Auflösungen ab dem 'lg'-Breakpoint (960x) gültig ist. Siehe auch Wiki:breakpoints-v6
#7 RE: Optik des Template v6 an unterschiedliche Browsergrößen automatisch anpassen
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!