[3.3] @media problem

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Antworten
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

[3.3] @media problem

Beitrag von chris1278 »

Hallo Ich bin gerade dabei etwas in Bezug auf eine meiner Extensions umzusetzen und komme einfach nicht weiter. Da dies etwas mit den css style Einstellungen zu tun hat denke ich das hier das richtige Themen Bereich ist. Ansonsten bitte ich einen Moderator freundlicherweise das zu verschieben.

Also folgendes Problem:

Ich hab für eine meiner Extension welches linksseitig einige boxen einbindet so eingerichtet das in dem rechten div Container eine Navy leiste eingeblendet wird.

Die Navi leiste hat zur Zeit zu testzwecken nur folgenden inhalt:

Code: Alles auswählen

<div class="nav_sbl forabg">
	<div class="inner">
		test 123
	</div>
</div>
Dort wo dann test 123 steht soll später das hie hin:

Code: Alles auswählen

<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist sblnavlinks" >
		{% set MICRODATA = 'itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope' %}
		{% set navlink_position = 1 %}

		{% EVENT overall_header_breadcrumbs_before %}

		<li class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">

			{% if U_SITE_HOME %}
				<span class="crumb" {{ MICRODATA }}><a itemprop="item" href="{{ U_SITE_HOME }}" data-navbar-reference="home"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span itemprop="name">{{ L_SITE_HOME }}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>
			{% endif %}

			{% EVENT overall_header_breadcrumb_prepend %}
				<span class="crumb" {{ MICRODATA }}><a itemprop="item" href="{{ U_INDEX }}" accesskey="h" data-navbar-reference="index">{% if not U_SITE_HOME %}<i class="icon fa-home fa-fw"></i>{% endif %}<span itemprop="name">{{ L_INDEX }}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>

			{% for navlink in navlinks %}
				{% set NAVLINK_NAME = navlink.BREADCRUMB_NAME | default(navlink.FORUM_NAME) %}
				{% set NAVLINK_LINK = navlink.U_BREADCRUMB | default(navlink.U_VIEW_FORUM) %}

				{% EVENT overall_header_navlink_prepend %}
				<span class="crumb" {{ MICRODATA }}{% if navlink.MICRODATA %} {{ navlink.MICRODATA }}{% endif %}><a itemprop="item" href="{{ NAVLINK_LINK }}"><span itemprop="name">{{ NAVLINK_NAME }}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>
				{% EVENT overall_header_navlink_append %}
			{% endfor %}

			{% EVENT overall_header_breadcrumb_append %}
		</li>

		{% EVENT overall_header_breadcrumbs_after %}
<!-- IF U_MARK_FORUMS -->
		<li class="rightside">
			<a href="{U_MARK_FORUMS}" class="mark-read rightside" accesskey="m" data-ajax="mark_forums_read">{L_MARK_FORUMS_READ}</a>
		</li>
		<!-- ENDIF -->
	</ul>
Aber wie gesagt darum geht es nicht.

Der äussere divcontainer ist mit der class belegt nav_sbl forabg

Die klasse forabg ist für padding und Farbgebung zuständig und wird über style spezifisch geladen.

Die class nav_sbl wird in der extension css wie folgt geladen:

Code: Alles auswählen

@media (max-width: 900px) {
.nav_sbl {
	display: none;
}
}
Das soll dafür sorgen das diese Navibox also besagter div container nur ausgegeben wird wenn die pixel 900 und mehr sind. Das funktioniert auch soweit. wenn ich mit dem Browser das teste wird er bei 901+ angezeigt bei genau 900 ausgeblendet aber jetzt kommts bei 899 und weniger wieder eingeblendet. Und das ist leider der Punkt den ich nicht verstehe. weil die boxen links werden ja auch unter 900px ausgeblendet und bleiben auch ausgeblendet aber das will bei diesem einen Punkt nicht gelingen. Vielleicht weis hier einer Rat und hat nen Tip für mich.
vfrblue
Ehemaliges Teammitglied
Beiträge: 1993
Registriert: 22.11.2016 18:46

Re: [3.3] @media problem

Beitrag von vfrblue »

Ich kann im css keine Mindest-Breite finden. So zeigt der Browser genau bei 900px die Box nicht an.
Wie wäre es mit einer zusätzlichen min-width-Anweisung?

Code: Alles auswählen

media (min-width: 320px) and (max-width: 900px) {
.nav_sbl {
	display: none;
}
}
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.3] @media problem

Beitrag von chris1278 »

Werd ich versuchen.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 4909
Registriert: 08.06.2009 12:03
Kontaktdaten:

Re: [3.3] @media problem

Beitrag von Talk19zehn »

Hallo chris1278, wenn ich deinen Gedanken folge, würde ich in dem von dir angedachten Konzept mit min-width arbeiten, um ab einem vorgegebenen *Breakpoint (z.B. ab 850px, 875px, 901px, 951px, 1220px ...) die Ausgabe zu konzipieren anstelle mich beginnend mit max-width auf die geringsten Auflösungen "herunter zu arbeiten".

Wenn Standardelemente (Klassen, ID´s, Scripte, Quellen etc.) aus der phpBB-System-Quelle genutzt werden, ist zu bedenken, dass diese bereits eigenen Regeln unterliegen ((je phpBB-Systemversion)), die in einem Konzept systembezogen berücksichtigt werden. Dies ist dir ja bekannt, der Einzelfall für ein jeweiliges Konzept ist entscheidend: :wink:

Weitere Informationen hinsichtlich Breakpoints findest du u.a. auf:
https://www.mediaevent.de/css/breakpoints.html


Grüße

P.S.:
vfrblue hat geschrieben: 17.07.2021 14:08 ...(...)...

Code: Alles auswählen

media (min-width: 320px) and (max-width: 900px) {

......
vfrblue meinte sicherlich einleitend:

Code: Alles auswählen

@media (min-width: 320px) and (max-width: 900px) {

......
Beste Grüße
phpBB3 Designs: Stylearea Ongray-Designs
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.3] @media problem

Beitrag von chris1278 »

Nun ja es soll letztendlich ab 900px eingeblendet werden aber davor halt nicht.
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.3] @media problem

Beitrag von Lehrling »

Da der Container .forabg ja in prosilver enthalten ist, könnte es sein, dass es da Konflikte mit den prosilver-Stylesheets gibt. Prinzipiell ist dein Code korrekt. Siehe auch das responsive.css.
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 7859
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: [3.3] @media problem

Beitrag von Kirk »

Wie sieht´s denn aus wenn du es so machst:

Code: Alles auswählen

<div class="nav_sbl">
	<div class="forabg">
		<div class="inner">
			test 123
		</div>
	</div>
</div>
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.3] @media problem

Beitrag von chris1278 »

Also selbst wenn ich nur einen div Container so anlege:

Code: Alles auswählen

<div class="nav_sbl">
	<div class="inner">
		test 
	</div>	
</div>
mit dieser anweisung im css:

Code: Alles auswählen

@media (max-width: 900px) {
.nav_sbl {
	display: none;
}
}


Ist der Effekt derselbe. Er wird bei genau 900 ausgeblendet aber bei 899 oder kleiner wieder eingeblendet.

Das macht mich wahnsinnig.

Weder das von vrfblue noch von kirk hat geholfen.

und talkzehn mit diesem Test Container und einer Klasse die so nirgends im phpbb vorkommt sollte es auch keine Probleme bzw. Komplikationen mit anderen geben.

Das Merkwürdige ist an einer anderen Stelle der Extension habe ich die Blöcke die eingeblendet ja genau mit dieser Regel gesteuert das die erst ab 900px eingeblendet werden und darunter ausgeblendet werden. aber mit dem einen einfachen Container will das partout nicht funktionieren.
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 7859
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: [3.3] @media problem

Beitrag von Kirk »

Man müsste sich das im ganzen mal anschauen. Hast du irgendwo eine Demo?
Edit:
Probier mal die css Anweisung display: none auf important zu setzen.
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.3] @media problem

Beitrag von chris1278 »

Ich hab den Fehler gefunden. ich habe bei enere anderen Media anweisung eine schliessende geschweifte klammer vergessen oder beim editieren zuviel gelöscht. jetzt funktioniert das mit

Code: Alles auswählen

@media (max-width: 900px) {
.sblnav {
	display: none;
}
}
ab 901 px und mehr zeigt an was es soll und ab 900px und weniger wird ausgeblendet.

Was einen so eine} ins schwitzen bringen kann.
Antworten

Zurück zu „Styles, Templates und Grafiken“