DIV-Container soll ab bestimmter Bildschirmauflösung verschwinden

[ezekiel23]

Hallo,

habe einen Banner auf meiner Seite, der mir das Responsive Design "deaktiviert". Der liegt in einem DIV-Container und na ja, seitdem der da ist ist die Seite nicht mehr responsive. Wahrscheinlich weil der Banner einen width-Wert hat!?

Ich möchte jedenfalls, dass ab einer bestimmten Bildschirmauflösung der DIV-Container einfach nicht mehr angezeigt wird. Raubt eh zuviel Ladezeit bei mobilen Geräten so nen Banner

Also schön wäre es nicht nur in auf invisible zu setzen mit CSS (denn dann läd er ja trotzdem) sondern ihn vielleicht gleich komplett zu "deaktivieren". Geht sowas? Nutze Wordpress.

Vielen Dank für Eure Tipps!

 

[noltehans]

AW: DIV-Container soll ab bestimmter Bildschirmauflösung verschwinden

Hi ezekiel23,

http://www.pc-magazin.de/ratgeber/mehr-performance-fuers-responsive-webdesign-1490670.html
Abschnitt - Conditional Loading

 

[patrick_l]

AW: DIV-Container soll ab bestimmter Bildschirmauflösung verschwinden

Setze dich mit der Verwendung von Media Queries auseinander. Über CSS(3) kannst du dann einfach mittels display:none; deinen Banner für bestimmte Auflösungen »ausblenden«.

Auch solltest du dich mehr mit dem Thema responsive Webdesign vertraut machen. Denn Breitenangaben (width) werden auch dort genutzt. Nur eben (meistens) keine fixen Werte (em, Prozent).

Liebe Grüße, Patrick

Liebe Grüße, Patrick

 

[cebito]

AW: DIV-Container soll ab bestimmter Bildschirmauflösung verschwinden

Setze dich mit der Verwendung von Media Queries auseinander. Über CSS(3) kannst du dann einfach mittels display:none; deinen Banner für bestimmte Auflösungen »ausblenden«.

Das ist hier nicht die Lösung, da sie ja trotzdem geladen werden. Der Traffic bleibt also derselbe

 

[cythux]

AW: DIV-Container soll ab bestimmter Bildschirmauflösung verschwinden

Dies wäre eine möglichkeit, aber der traffic bleibt

z-index : -9999px;

oder

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

display:none;

ist auch nicht so das wahre für SEO http://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/

 

[Curanai]

AW: DIV-Container soll ab bestimmter Bildschirmauflösung verschwinden

Guten Morgen,

überdenke die Einbindung Deines (Werbe-?)Banners: asynchron Nachladen. Das spart beim Seitenaufbau direkt Bandbreite und lässt sich nur dann laden, wenn auch erforderlich (= Auflösung); in Anlehnung an den verwendeten Client.

Theoretisch könntest Du also tatsächlich auf Patricks "media-queries" zurückgreifen, die Dir dann bei entsprechender Geräteverwendung eine gezielte Klasse im Source hinterlegen (ähnlich einer Prüfung auf die Präsenz von Werbeblockern in JavaScript). Diese greift bspw. (da in Wordpress) jQuery ab (nach $(document).ready(); checkt auf Präsenz - falls da, kein Banner, da Mobilgerät - falls nicht da, Banner laden).

Irgendwer wird jetzt bestimmt sagen, dass man doch mit den angebotenen "Abstandsmessern" in JavaScript arbeiten könne ... joar, kann man (muss man kennen und mögen) - ich bin weiterhin der Meinung, dass Tool- und Sidebars für "andere Zahlen" sorgen könn(t)en. Hier wäre .width() in jQuery zu nennen (ein Beispiel findest Du direkt hinter dem Link).

"Dreckig" und auch nicht "100%ig cool" - keine Frage ... harmoniert aber und ist schnell realisiert.

Viel Erfolg.

 

[Myhar]

AW: DIV-Container soll ab bestimmter Bildschirmauflösung verschwinden

"media-queries" zurückgreifen, die Dir dann bei entsprechender Geräteverwendung eine gezielte Klasse im Source hinterlegen

Wie kann man mittels mediaqueries Klassen vergeben?

 

[Curanai]

AW: DIV-Container soll ab bestimmter Bildschirmauflösung verschwinden

Nicht falsch verstehen - ich spreche (da media-queries) von einer CSS-Klasse!! Oder überschätze ich die Dinger gerade ...?!

EDIT: Jupp ... dann gilt dies zu streichen!

EDIT²: Najaaaa ... situiert auf

@media print {     body { font-size: 10pt }   }   @media screen {     body { font-size: 13px }
    .fundstueck { ... }
  }   @media screen, print {     body { line-height: 1.2 }   }

Theoretisch ließe sich dann auf .fundstueck via style-Selector zzgl. indexOf durchaus prüfen.