Hallo zusammen,
meine Frage ist vermutlich eine Anfänger-Frage, aber selbst nach ausgiebigem Googeln konnte ich gefundene Antworten nicht auf mein spezielles Problem umsetzen:
Ich habe auf meiner Webseite (http://www.qualit-lifestyle.de) links zwei Popup Fenster, deren Grundlage ein Bild mit fester Breite ist. Bei mir am Rechner sieht das ganz nice aus, da ich mit einer hohen Auflösung arbeite, von anderen habe ich jedoch die Rückmeldung bekommen, dass diese Fenster Teilweise Text verdecken. Vermutlich haben diese eine geringere Auflösung.
Mir ist klar, dass ich mit relativen anstatt absoluten Angaben wie width: xy% arbeiten muss, aber irgendwie bekomme ich das nicht hin. Ich hätte gerne, dass die Popups bei kleinere Auflösung kleiner dargestellt werden und nicht in der absoluten breite, so dass diese bei keinem Besucher mehr Inhalte verdecken. Aber bei den vielen angaben weiß ich leider nicht, was ich ändern muss
Eingebunden habe ich die Popups über den Code (am Beispiel eines Popups der andere ist analog)
<div class="mobileUnterbinden"><div id="NewsletterPopup">
<div id="sgcolorbox" class="colorbox4 sg-animated shake" role="dialog" tabindex="-1" style="top: 60%; left: 0px; animation-duration: 2s; position: fixed; visibility: visible; width: 160px; height: 199px; z-index: 999999;">
<img id="newsletterPopup-close" src="http://www.quality-lifestyle.de/wp-content/plugins/newsletter-popup/images/close.png" onclick="document.getElementById('NewsletterPopup').style.display='none';" alt="Close Button">
<div id="sgcboxWrapper" style="height: 199px; width: 160px;"><div><div id="sgcboxTopLeft" style="float: left;"></div>
<div id="sgcboxTopCenter" style="float: left; width: 110px;"></div>
<div id="sgcboxTopRight" style="float: left;"></div></div><div style="clear: left;"><div id="sgcboxMiddleLeft" style="float: left; height: 200px;"></div>
<div id="sgcboxContent" style="float: left; width: 160px; height: 199px;">
<div id="sgcboxLoadedContent" style="width: 160px; overflow: hidden; height: 199px;">
<a href="?newsletter_popup=1" target="_self"><img class="aligncenter" src="http://www.quality-lifestyle.de/wp-content/uploads/Newsletter.png" alt="Newsletter abbonieren"></a>
</div>
<div id="sgcboxTitle" style="float: left; display: block;"></div>
<div id="sgcboxCurrent" style="float: left; display: none;"></div>
<button type="button" id="sgcboxPrevious" style="display: none;"></button>
<button type="button" id="sgcboxNext" style="display: none;"></button>
<button id="sgcboxSlideshow" style="display: none;"></button>
<div id="sgcboxLoadingOverlay" style="float: left; display: none;"></div>
<div id="sgcboxLoadingGraphic" style="float: left; display: none;"></div>
</div>
<div id="sgcboxMiddleRight" style="float: left; height: 200px;"></div>
</div>
<div style="clear: left;">
<div id="sgcboxBottomLeft" style="float: left;"></div>
<div id="sgcboxBottomCenter" style="float: left; width: 110px;"></div>
<div id="sgcboxBottomRight" style="float: left;"></div>
</div>
</div>
<div style="position: absolute; width: 9999px; visibility: hidden; max-width: none; display: none;"></div>
</div>
</div>Für Hilfe bin ich sehr dankbar!