Bilder frei positionieren
Mit diesem Code kann man Bilder oder andere Elemente frei über die Website legen. Egal ob im, oder außerhalb des Inhaltsbereiches, zB. über den Header oder der Navigation. Natürlich kann man diese auch verlinken oder per CSS Hover-Effekte hinzu fügen. Außerdem ist es möglich diese an das responsive Layout anzupassen.
Beispiel 1 "Banner neben dem Content"
Wir haben rechts neben den Inhaltsbereich ein Banner positioniert. Sobald die Fensterbreite nicht mehr ausreicht und das Banner abgeschnitten würde wird es skalliert. Wir haben dies in diesem Beispiel bei einer Fensterbreite von 1400 Pixeln und 1210 Pixeln angewand.
Sobald die Fensterbreite nicht mehr ausreicht um das Banner darzustellen (1115 Pixel) haben wir es ausgeblendet.
- Quellcode anzeigen
<!-- BANNER --><div class="bbanner"><a href="http://code.zella.de" target="_self"><img title="zur Startseite" alt="" border="0" src="http://zella.de/code/bilder/banner.jpg"></a></div>- CSS-Code anzeigen
<style>.bbanner {position: fixed;top:150px;margin-left:500px;left:50%;width:200px;height: 500px;z-index:1000;}@media (max-width: 1400px) {.bbanner {width:100px;height:250px;}}@media (max-width: 1210px) {.bbanner {width:50px;height:125px;}}@media (max-width: 1115px) {.bbanner {display: none;}}</style>
Beispiel 2 "Kontaktdaten im Kopfbereich anzeigen"
Wir haben oben links im Kopf der Seite die Telefonnummer und Mailadresse angezeigt. Sabald der Platz hierfür nicht mehr ausreicht wird der Text an passender Stelle positioniert und etwas verkleinert.
Sobald das Layout in die mobile Ansicht umschaltet werden Telefonnummer und Mailadresse ausgeblendet. Stattdessen werden 2 Button eingebendet die klickbar sind. Das heißt klickt der Nutzer zB. am Smartphone auf den Telefonbutton öffnet sich die Telefon-APP mit der vorgegebenen Telefonnummer. Ebenso verhält es sich mit dem Mailbutton. Auch diese Button werden den Platzverhältnissen responive angepasst.
- Quellcode anzeigen
<!-- TELEFON E-MAIL --><div class="fon">☏ 123456/7899</div><div class="mail">✉ mail@email.de</div><div class="fon-mobil"><a href="tel:+49123456789"><img src="http://zella.de/code/bilder/fon7.png" alt="telefon" /></a></div><div class="mail-mobil"><a href="mailto:mail@email.de"><img src="http://zella.de/code/bilder/kont5.png" alt="email" /></a></div>- CSS-Code anzeigen
<style>.mail {position: absolute;z-index:7000;top:40px;left:30px;font-size:1.1em;color: #ffffff;font-weight: 900;text-shadow: 1px 1px 1px black;}@media (max-width: 1250px) {.mail {top:45px;margin-left:-220px;left:50%;font-size:.8em;}}@media (max-width: 979px) {.mail {display: none;}}.mail-mobil {position: absolute;z-index:7001;top:10px;right:110px;width: 40px;height: 38px;}@media (min-width: 979px) {.mail-mobil {display: none;}}@media (max-width: 555px) {.mail-mobil {top:5px;right:70px;width: 30px;height: 29px;}}.fon {position: absolute;z-index:7000;top:20px;left:30px;font-size:1.1em;color: #ffffff;font-weight: 900;text-shadow: 1px 1px 1px black;}@media (max-width: 1250px) {.fon {top:30px;margin-left:-220px;left:50%;font-size:.8em;}}@media (max-width: 979px) {.fon {display: none;}}.fon-mobil {position: absolute;z-index:7001;top:10px;right:160px;width: 40px;height: 40px;}@media (min-width: 979px) {.fon-mobil {display: none;}}@media (max-width: 555px) {.fon-mobil {top:5px;right:105px;width: 30px;height: 30px;}}</style>
Quellcode einfügen:
neuer Artikel > Widget > Quellcode > code einfügen > ok
CSS-Code einfügen "für alle Seiten":
Eistellungen > CSS > code einfügen > ok
CSS-Code einfügen "für eine Seite":
Doppelklick auf die entsprechende Seite > Attribute > unten auf Attribute und den Haken bei (alle anzeigen setzen) > Standart > mobile_script > code einfügen > ok > ok
