|
|||
Schrift auf Bild zur besseren Erklären von Mondphasen
Hallo,
beim Testen der Seite Mondkalender mit den Mondphasen für 2015 und 2016 habe ich festgestellt, das unsere Nutzer die Abbildung vom Mond im Kopf der Seite nicht richtig deuten können. Eigentlich war ich der Meinung das man anhand der Größe der Monde schon klar erkennen kann, in welchem Mond wir uns aktuell befinden. Da dem nicht so ist, muss ich dem Nutzer weitere Hilfestellungen geben. Ich dachte einfach das ich es auf das Bild schreibe. Nur wie mache ich das? (Mittig und Zentriert) Lege ich um das Mittige Bild noch einen DIV? Geändert von traumdeutung (05.05.2015 um 11:17 Uhr) |
Sponsored Links |
|
|||
lol
Wenn ich das richtig versteh, soll auf mobiler Version ein anders Bild der Monde erscheinen als auf Desktop, und zwar so wie das oberste Bild im zweiten Beitrag. @traumdeutung: Dann kannst du ein zweites Bild laden und im CSS als background verlinken (beide) - das erste (große) als Standard, das zweite mit Mediaqueries für mobilversion. Im Moment ist dein Bild im HTML verlinkt: <div id="logo"> <a title="Traum-Deutung" href="http://traum-deutung.de"><img src=".../images/logo.png" /> Traumdeutung</a> </div> Dann müsstest du also das image aus dem HTML nehmen und ins CSS als background von #logo setzen. Allerdings hab ich noch nicht verstanden was mit Schrift mittig und zentrieren gemeint ist. |
|
|||
Hier ist mein aktueller Code:
A Pen by Captain Anonymous Nur wie bekomme ich jetzt das Datum auf das mittlere Bild? |
|
|||
Zitat:
So vielleicht: A Pen by Captain Anonymous Teste mal. _______________ MfG Roland |
|
|||
Hi,
vielen Dank irgendwie will das auf lokalen Laufwerk funktioniert es leider nicht, habe ich beim Übertragen einen Fehler gemacht? HTML-Code:
<style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ position: relative; background: #f5f5f5; width: 100vw; height: 100vh; } a.moon{ /*background: rgb(220,220,220);*/ border-radius: 50%; display: table; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 20vw; height: 20vw; z-index: 3; transition: all .4s; text-align: center; text-decoration: none; } a.moon span { font-size: 1.8rem; color: #fff; min-height: 10vm; display: table-cell; vertical-align: middle; } a.moon:nth-child(1){ z-index: 1; left: 10%; width: 10vw; height: 10vw; background-size: 100% 100%; background-repeat: no-repeat; } a.moon:nth-child(2){ z-index: 2; left: 27%; width: 15vw; height: 15vw; background-size: 100% 100%; background-repeat: no-repeat; } a.moon:nth-child(3){ background-size: 100% 100%; background-repeat: no-repeat; } a.moon:nth-child(4){ z-index: 2; left: 73%; width: 15vw; height: 15vw; background-size: 100% 100%; background-repeat: no-repeat; } a.moon:nth-child(5){ z-index: 1; left: 90%; width: 10vw; height: 10vw; background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 800px){ a.moon:nth-child(1){ left: 10%; width: 20vw; height: 20vw; } a.moon:nth-child(2){ left: 27%; width: 30vw; height: 30vw; } a.moon:nth-child(3){ width: 40vw; height: 40vw; } a.moon:nth-child(4){ left: 73%; width: 30vw; height: 30vw; } a.moon:nth-child(5){ left: 90%; width: 20vw; height: 20vw; } } </style> <a href="http://mond.traum-deutung.de#04-05" title="Mond am 04.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-14-100.png');"></a> <a href="http://mond.traum-deutung.de#05-05" title="Mond am 05.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-15-160.png');"></a> <a href="http://mond.traum-deutung.de#06-05" title="Mond am 06.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-16.png');"><span>06. Mai <br> 2015</span></a> <a href="http://mond.traum-deutung.de#07-05" title="Mond am 07.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-17-160.png');"></a> <a href="http://mond.traum-deutung.de#08-05" title="Mond am 08.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-18-100.png');"></a> |
Sponsored Links |
|
|||
Zitat:
Nein. Bei mir wird es lokal auch so dargestellt wie hier: A Pen by Captain Anonymous Teste so mal: HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Titel</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } * { margin: 0; padding: 0; box-sizing: border-box; } html { } body{ position: relative; background: #f5f5f5; width: 100vw; height: 100vh; } a.moon{ /*background: rgb(220,220,220);*/ border-radius: 50%; display: table; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 20vw; height: 20vw; z-index: 3; transition: all .4s; text-align: center; text-decoration: none; } a.moon span { font-size: 1.8rem; color: #fff; min-height: 10vm; display: table-cell; vertical-align: middle; } a.moon:nth-child(1){ z-index: 1; left: 10%; width: 10vw; height: 10vw; background-size: 100% 100%; background-repeat: no-repeat; } a.moon:nth-child(2){ z-index: 2; left: 27%; width: 15vw; height: 15vw; background-size: 100% 100%; background-repeat: no-repeat; } a.moon:nth-child(3){ background-size: 100% 100%; background-repeat: no-repeat; } a.moon:nth-child(4){ z-index: 2; left: 73%; width: 15vw; height: 15vw; background-size: 100% 100%; background-repeat: no-repeat; } a.moon:nth-child(5){ z-index: 1; left: 90%; width: 10vw; height: 10vw; background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 800px){ a.moon:nth-child(1){ left: 10%; width: 20vw; height: 20vw; } a.moon:nth-child(2){ left: 27%; width: 30vw; height: 30vw; } a.moon:nth-child(3){ width: 40vw; height: 40vw; } a.moon:nth-child(4){ left: 73%; width: 30vw; height: 30vw; } a.moon:nth-child(5){ left: 90%; width: 20vw; height: 20vw; } } </style> </head> <body> <a href="http://mond.traum-deutung.de#04-05" title="Mond am 04.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-14-100.png');"></a> <a href="http://mond.traum-deutung.de#05-05" title="Mond am 05.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-15-160.png');"></a> <a href="http://mond.traum-deutung.de#06-05" title="Mond am 06.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-16.png');"><span>06. Mai <br> 2015</span></a> <a href="http://mond.traum-deutung.de#07-05" title="Mond am 07.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-17-160.png');"></a> <a href="http://mond.traum-deutung.de#08-05" title="Mond am 08.05.2015" class="moon" style="background-image: url('http://mond.traum-deutung.de/wp-content/themes/tatort-v3/mond/mond-18-100.png');"></a> </body> </html> ________________ MfG Roland |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Zwei Bilder nebeneinander, sollen kleiner werden! | cecyle | CSS | 1 | 12.01.2014 18:20 |
Schrift auf Bild soll position halten | Ria | CSS | 4 | 30.12.2013 12:47 |
Schrift von Tablet-Netbook als Bild verarbeiten | naitsab | Javascript & Ajax | 1 | 28.08.2009 14:27 |
Bild und Schrift nebeneinander im IE | derMatze | CSS | 2 | 08.07.2009 23:31 |
Schrift (Hyperlinks) auf ein Bild legen (schieben) | barbiturator | CSS | 3 | 01.11.2007 12:52 |