zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Schrift auf Bild zur besseren Erkl

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.05.2015, 19:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2015
Ort: Münster Westf.
Beiträge: 16
traumdeutung befindet sich auf einem aufstrebenden Ast
Standard 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 12:17 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.05.2015, 17:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2015
Ort: Münster Westf.
Beiträge: 16
traumdeutung befindet sich auf einem aufstrebenden Ast
Standard

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

und hier die IST Version
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.05.2015, 20:27
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.953
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Mir ist nicht klar, was du von uns Wissen möchtest.
Mit Zitat antworten
  #4 (permalink)  
Alt 05.05.2015, 21:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.090
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Mir auch nicht. Bei deinem Erklärungs-Bild ist keine Schrift am Bild zu erkennen?
Mit Zitat antworten
  #5 (permalink)  
Alt 06.05.2015, 03:45
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 06.05.2015, 09:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2015
Ort: Münster Westf.
Beiträge: 16
traumdeutung befindet sich auf einem aufstrebenden Ast
Standard

Gut mir leid, das waren die falschen Screenshots
Mit Zitat antworten
  #7 (permalink)  
Alt 06.05.2015, 14:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2015
Ort: Münster Westf.
Beiträge: 16
traumdeutung befindet sich auf einem aufstrebenden Ast
Standard

Hier ist mein aktueller Code:

A Pen by Captain Anonymous

Nur wie bekomme ich jetzt das Datum auf das mittlere Bild?
Mit Zitat antworten
  #8 (permalink)  
Alt 07.05.2015, 00:36
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von traumdeutung Beitrag anzeigen
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
Mit Zitat antworten
  #9 (permalink)  
Alt 07.05.2015, 12:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2015
Ort: Münster Westf.
Beiträge: 16
traumdeutung befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.05.2015, 17:33
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von traumdeutung Beitrag anzeigen
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 Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Zwei Bilder nebeneinander, sollen kleiner werden! cecyle CSS 1 12.01.2014 19:20
Schrift auf Bild soll position halten Ria CSS 4 30.12.2013 13:47
Schrift von Tablet-Netbook als Bild verarbeiten naitsab Javascript & Ajax 1 28.08.2009 15:27
Bild und Schrift nebeneinander im IE derMatze CSS 2 09.07.2009 00:31
Schrift (Hyperlinks) auf ein Bild legen (schieben) barbiturator CSS 3 01.11.2007 13:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:51 Uhr.