Schrift auf Bild zur besseren Erkl

traumdeutung · #1 (**permalink**) 03.05.2015, 18:18

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?

traumdeutung · #2 (**permalink**) 05.05.2015, 16:24

Ich erweitere den Beitrag mal um ein Beispielbild wie ich es gerne bei der Mobilansicht hätte:

und hier die IST Version

protonenbeschleuniger · #3 (**permalink**) 05.05.2015, 19:27

Mir ist nicht klar, was du von uns Wissen möchtest.

cloned · #4 (**permalink**) 05.05.2015, 20:48

Mir auch nicht. Bei deinem Erklärungs-Bild ist keine Schrift am Bild zu erkennen?

Toro · #5 (**permalink**) 06.05.2015, 02:45

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.

traumdeutung · #6 (**permalink**) 06.05.2015, 08:21

Gut mir leid, das waren die falschen Screenshots

traumdeutung · #7 (**permalink**) 06.05.2015, 13:31

Hier ist mein aktueller Code:

A Pen by Captain Anonymous

Nur wie bekomme ich jetzt das Datum auf das mittlere Bild?

K.Roland · #8 (**permalink**) 06.05.2015, 23:36

Zitat:

Zitat von traumdeutung

Hier ist mein aktueller Code:

A Pen by Captain Anonymous

Nur wie bekomme ich jetzt das Datum auf das mittlere Bild?

Hallo traumdeutung

So vielleicht: A Pen by Captain Anonymous

Teste mal.
_______________
MfG Roland

traumdeutung · #9 (**permalink**) 07.05.2015, 11:06

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>

K.Roland · #10 (**permalink**) 07.05.2015, 16:33

Zitat:

Zitat von traumdeutung

Hi,
vielen Dank irgendwie will das auf lokalen Laufwerk funktioniert es leider nicht,

Was wird den lokal anders dargestellt oder was genau funktioniert nicht?

Zitat:

Zitat von traumdeutung

Hi,
habe ich beim Übertragen einen Fehler gemacht?

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>

@media Anpassung habe ich keine vorgenommen.

________________
MfG Roland

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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