Werbeanzeige in einer Ebene je nach Bildschirmgröße ausblenden

1 krieger98

Hallo,
Ich suche ein Script PHP oder Java mit dem ich eine Werbeanzeige die in einer Ebene liegt ausschalten je nach Bildschirmgröße.
Die Werbeanzeige wird jetzt bei einer Bildschirmgröße von unter 15 Zoll in die eigentliche Navigation verschoben.
Bei einer Bildschirmgröße von 17 bis 22 Zoll wird alles richtig dargestellt. Es handelt sich um die Seite siehe unten.
Die Werbung links außerhalb des Containers ist damit gemeint (Elektrofahrrad).
Die Ebenen sind abgelegt in der Datei <link href="ebene_tipps2011.css" rel="stylesheet" type="text/css" />.
Mein Gedanke war, eine zweite CSS-Datei zu erstellen die diese Ebene (Werbung) nicht enthält.
Ich habe dieses mit folgenden Java-Script versucht was aber nicht geklappt hat:
<meta content="revealTrans(Duration=1.0,Transition=5)" http-equiv="Site-Enter" />
<link href="body_schrift_tipps2011.css" rel="stylesheet" type="text/css" />
<link href="ebene_tipps2011.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
if (screen.width == 1280) {
document.write('<link rel="stylesheet" type="text/css" href="ebene_tipps2011_test.css">');
}
</script>
Die Ebene wird mit mit folgenden Code aufgerufen:
<div id="werbung">
 <a href="http://www.elektrofahrrad-einfach.de/?ref=24564" target="_top" title="Umbausätze und Antriebe für alle Fahrräder"> <img alt="Banner-Elktro-Fahrrad" src="grafik/Elktrofahrrad-Werbung125-460.jpg" /></a></div>
Wie kann ich diese Ebene durch eine Abfrage übergehen.
http://www.fahrrad-workshop-sprockhoevel.de/Tipps.htm

2 Jörg Kruse

Für eine solche Lösung braucht es JavaScript, da damit die Bildschirmbreite ausgelesen werden kann.

Probier mal folgendes

Diese Funktionsdefinition in den head Bereich:

<script type="text/javascript">
function hideAd()
{
  var bodywidth;
  if (self.innerWidth) {
    bodywidth = self.innerWidth;
  } else if (document.documentElement && document.documentElement.clientWidth) {
    bodywidth = document.documentElement.clientWidth;
  } else if (document.body) {
    bodywidth = document.body.clientWidth;
  }
  if (bodywidth < 1280) {
      document.getElementById("werbung").style.display = "none";
  }
}
</script>

Die 1280 (minimale Breite in pixel, bei der Werbung angezeigt wird) gegebenenfalls anpassen

Die Funktion im onload Attribut des body aufrufen:

<body onload="hideAd()">

3 krieger98

Erstmal vielen Dank.
Ich habe eine Testseite erstellt und den Code eingefügt.
Habe das auf dem Notebook Bildschirmgröße 22 cm dann getestet.
Die Werbung war noch vorhanden und entsprechend verschoben.
Testseite:
http://www.fahrrad-workshop-sprockhoevel.de/Tipps-test.htm

4 Jörg Kruse

Bei mir funktioniert das Ausblenden.

Du hast mit 800px allerdings eine sehr geringe Mindestbreite gewählt. Der Banner wird erst ausgeblendet, wenn die Bildschirmbreite geringer ist als 800px! Das Problem der Überlappung tritt ja schon bei unter 1280px auf.

5 krieger98

Es klappt jetzt SUPER. Nochmal vielen Dank.
Wenn jetzt noch eine zweite Werbung ausblenden will mit dem Namen
"werbung-rechts" wie sieht das Script dann aus?

6 Jörg Kruse

Da kannst du analog eine zweiten Anweisung einfügen:

  if (bodywidth < 1280) {
      document.getElementById("werbung").style.display = "none";
      document.getElementById("werbung-rechts").style.display = "none";
  }

nach oben

Werbeanzeige in einer Ebene je nach Bildschirmgröße ausblenden

Beitrag schreiben (als Gast)