Webseite für Fotografen - Schrift stimmt nicht

digitalfux · 8. Mai 2012

Hallo Leute,

bin mit eine Freund gerade dabei eine Webseite mit Joomla zu erstellen.
Die Seite sieht jetzt im Internet Explorer und im Firefox so aus wie sie soll.

Wenn ich dir Webseite auf meine Android-Smartphone angesehen, dann stimmt es nicht mehr mit der Schrift.
Kann mir einer mal sagen warum das so ist ?

Hier die Bilder

Internet Explorer / PC

Android 4.0 Browser

Android Firefox

Yuuri · 8. Mai 2012

Ohne Code ist da nur schlecht zu helfen.

Velines · 8. Mai 2012

Ich würde spontan mal raten, dass Ihr eine Schriftart nutzt, die bei Android nicht dabei ist (wobei die ziemlich gleich aussieht). Ansonsten wird Hilfe ohne Code schwer.

Nico25394 · 8. Mai 2012

für mich sieht das nicht unbedingt nach einem programmierfehler aus, sondern eher danach dass dein android nen zu kleinen bildschirm hat

kampfspatz · 9. Mai 2012

Lade Deine Schriftzeichen einfach als Grafik hoch, dann kannst Du das Problem umgehen, dass Schrifttypen möglicherweise nicht von allen Systemen erkannt werden.

Daaron · 9. Mai 2012

Schrift als Grafik? In welchem Dritte-Welt-Land warst du die letzten Jahre?
Wenn man Font-technisch auf Nummer Sicher gehen will, dann verwendet man für eine minimalistische Optik eine der websicheren Fonts als Fallback. Die primär erwünschte Schrift wird (solange man die Lizenz dafür hat) auf dem Server hinterlegt und via @font-face angesprochen. Oder man geht über Cufón, was zwar etwas hässlicher ist, aber etwas friedlicher bei den Lizenz-Problemen.

Im Zweifel: Rück die Source raus, dann kann dir auch geholfen werden.

digitalfux · 9. Mai 2012

Danke Leute !!

Hier der Code

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr" >
<head>
<base href="http://www.sebastian-claus.com/krebber/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Start</title>
<link href="/krebber/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/krebber/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<link href="/krebber/templates/full_screen_2/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<script src="/krebber/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/krebber/media/system/js/core.js" type="text/javascript"></script>
<script src="/krebber/media/system/js/caption.js" type="text/javascript"></script>
<script src="/krebber/media/system/js/mootools-more.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('load', function() {
new JCaption('img.caption');
});
</script>


<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Trebuchet ms" />


<link rel="stylesheet" href="/krebber/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/krebber/templates/full_screen_2/css/main.css" type="text/css" />
<link rel="stylesheet" href="/krebber/templates/full_screen_2/css/nav.css" type="text/css" />
<link rel="stylesheet" href="/krebber/templates/full_screen_2/css/template.css" type="text/css" />
<link rel="stylesheet" href="/krebber/templates/full_screen_2/css/moomenuh.css" type="text/css" />
<link rel="stylesheet" href="/krebber/templates/full_screen_2/css/moomenuh_right.css" type="text/css" />
<link rel="stylesheet" href="/krebber/templates/full_screen_2/lib/js/theme/supersized.shutter.css" type="text/css" />
<link rel="stylesheet" href="/krebber/templates/full_screen_2/css/black.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="/krebber/templates/full_screen_2/css/dynamic_css.php?font=Trebuchet ms&font_content=Verdana&separator=20&height_container=100&color_link=419639" />






<script type="text/javascript" src="/krebber/templates/full_screen_2/lib/js/jquery-162.js"></script>
<script type="text/javascript" src="/krebber/templates/full_screen_2/lib/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="/krebber/templates/full_screen_2/lib/js/supersized.3.2.1.js"></script>
<script type="text/javascript" src="/krebber/templates/full_screen_2/lib/js/theme/supersized.shutter.js"></script>
<script type="text/javascript">

jQuery.noConflict();
jQuery(function(jQuery){
jQuery.supersized({

slideshow : 1,
autoplay : 1 ,
start_slide : 0 ,
stop_loop : 0 ,
random : 0 ,
slide_interval : 5000 ,
transition : 1 ,
transition_speed : 300 ,
pause_hover : 0 ,
keyboard_nav : 1 ,
performance : 1 ,
image_protect : 1 ,
image_path : 'http://www.sebastian-claus.com/krebber/templates/full_screen_2/images/supersized/',

fit_always : 0 ,
fit_portrait : 0 ,
fit_landscape : 0 ,
min_width : 0 ,
min_height : 0 ,
vertical_center : 1 ,
horizontal_center : 1 ,

show_bottombar : 1 ,
show_prevnextbutton : 1 ,
show_slidecounter : 0 ,
show_imagetitle : 1 ,
show_playbutton : 1 ,
show_thumb : 1 ,
thumbnail_navigation : 0 ,

slides : [

{image : 'http://www.sebastian-claus.com/krebber/images/slide/kebber sw.jpg', title : '', thumb : 'http://www.sebastian-claus.com/krebber/', url : ''}

]
});
});

</script>


<script type="text/javascript">
window.addEvent('domready', function() {

jQuery.noConflict();

jQuery('#close-box').click(function(){

jQuery('#top-site').toggle(1000);
jQuery('#bottom_site').toggle(1000);
jQuery('#middle-site').toggle(750);
jQuery('#close-box').toggleClass('reduce');
jQuery('#control-slideshow').toggleClass('down-control-slideshow');

});

});
</script>

<script type="text/javascript">
window.addEvent('domready', function() {

jQuery.noConflict();

jQuery('#button-controls').click(function(){

jQuery('#controls-wrapper').toggleClass('hide_function');
jQuery('#progress-back').toggleClass('hide_function');
jQuery('#thumb-tray').toggleClass('hide_function');
jQuery('#button-controls').toggleClass('down-button-controls');

});

});
</script>


<script type="text/javascript" src="/krebber/templates/full_screen_2/lib/js/UvumiDropdown.js"></script>
<script type="text/javascript">
var menu = new UvumiDropdown('menu_left');
var menu = new UvumiDropdown('menu_right');
</script>

<script type="text/javascript" src="/krebber/templates/full_screen_2/lib/js/tooltips.js"></script>

</head>

<body style="min-width:980px;font-size:10px;" >

<div id="close-box"></div>

<div id="site">

<div class="separator_header"></div>

<div id="top-site" class=" black4" >

<div id="shadow-top-site-top"></div>
<div id="shadow-top-site-down"></div>

<div class="content-top-site" style="width:980px;">

<div id="menu">

<div class="menu_right">
<div class="moduletable_menu">

<ul class="menu" id="menu_left">
<li class="item-102 current active"><a href="/krebber/" >Start</a></li><li class="item-103"><a href="/krebber/index.php/ueber-mich" >Über mich</a></li><li class="item-104 deeper parent"><a href="/krebber/index.php/galerie" >Galerie</a><ul><li class="item-110"><a href="/krebber/index.php/galerie/gallerie-sport" >Gallerie Sport</a></li></ul></li><li class="item-105"><a href="/krebber/index.php/ausruestung" >Ausrüstung</a></li><li class="item-106"><a href="/krebber/index.php/news" >News</a></li><li class="item-107"><a href="/krebber/index.php/links" >Links</a></li><li class="item-108"><a href="/krebber/index.php/kontakt" >Kontakt</a></li><li class="item-109"><a href="/krebber/index.php/impressum" >Impressum</a></li></ul>
</div>

</div>

</div> 

<div id="logo" style="width:980px;">
<div class="logo ">
<a href="/krebber/index.php">
<p style="padding-left: 240px;"> <img src="/krebber/images/logo%20krebber.png" border="0" width="300" /> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p> </a>
</div>

</div>



</div>
</div> 

<div class="separator_header"></div>

<div id="middle-site" class="clearfix" style="width:980px;">
<div class="black4">
<div>

<div id="content">


<div id="users_top">

<div class="user2">
<div class="moduletable " >

<div class="content-module">
<p><span style="font-size: large;"> </span></p>
<div style="color: #7f807f; padding-left: 120px;"><span style="font-size: x-large;"> <span style="color: #ffffff;">Wichtigstes Werkzeug in der Fotografie</span></span></div>
<p style="color: #7f807f; padding-left: 120px;"><span style="font-size: x-large; color: #ffffff;"> ist das Auge des Fotografen, nicht die Kamera.</span></p>
<p style="color: #7f807f; padding-left: 120px;"><span style="color: #ffffff;"> </span></p>
<p><img src="/krebber/images/wpa3a8577e_05.jpg" border="0" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></p> </div>

</div>

</div>

<div class="clr"></div>

</div>


<div id="main_component" >



<div id="system-message-container">
</div>
<div class="blog-featured">

</div>

</div>




</div>

<div class="clr"></div>

</div>
</div>

</div> 

</div> 




<div id="prevthumb"></div>
<div id="nextthumb"></div>


<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>

<div id="thumb-tray" class="load-item hide_function">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>


<div id="progress-back" class="load-item hide_function">
<div id="progress-bar"></div>
</div>


<div id="controls-wrapper" class="load-item hide_function">
<div id="controls">

<a id="play-button"><span id="pauseplay"></span></a>


<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>


<div id="slidecaption"></div>


<a id="tray-button"><span id="tray-arrow"></span></a>


<ul id="slide-list"></ul>

</div>
</div>

<div id="button-controls"></div>

<div id="bottom_site">
<div style="width:980px;">

<div id="adress">
<div class="moduletable">
<h5> <span class="Textkörper-C4">Alle auf dieser Homepage gezeigten Bilder sind urheberrechtlich geschützt </span>und dürfen ohne Zustimmung nicht veröffentlicht werden. © NOVAPHOTO</h5>
<h5><span style="font-size: large;"><br /></span></h5> </div>

<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>

<div class="clr"></div>

</div>

</div> 

</body>
</html>

Daaron · 9. Mai 2012

Hm... n einfacher Link hätt es auch getan.... oder ne Maskierung als HTML-Quelltext....

Der Fehler liegt grob übern Daumen gepeilt hier.

HTML:

<div class="content-module">
							<p><span style="font-size: large;">&nbsp;</span></p>
<div style="color: #7f807f; padding-left: 120px;"><span style="font-size: x-large;">&nbsp;<span style="color: #ffffff;">Wichtigstes Werkzeug in der Fotografie</span></span></div>
<p style="color: #7f807f; padding-left: 120px;"><span style="font-size: x-large; color: #ffffff;">&nbsp;ist das Auge des Fotografen, nicht die Kamera.</span></p>
<p style="color: #7f807f; padding-left: 120px;"><span style="color: #ffffff;">&nbsp;</span></p>
<p><img src="/krebber/images/wpa3a8577e_05.jpg" border="0" alt="" style="display: block; margin-left: auto; margin-right: auto;"></p>					</div>

Element-Struktur und Stylings sind hier alles andere als sauber. Hier musst du noch einmal komplett nachbessern.

Warum steht da n Absatz mit nem leeren span? Wenn du Abstände brauchst, dann nimm Abstände.
Warum ist da Text in einem Div? Es ist zwar nicht richtig falsch, aber richtig ist es noch lange nicht.
Warum so viele Absätze? Ein einzelner Absatz mit erzwungenem Zeilenumbruch (auch <br/> genannt) hätts auch getan und macht weniger Sorgen
Die Farbe kannste auch einmalig im Elternelement festlegen, die wird eh vererbt.
Statt Pi*Daumen mit Paddings in etwa das margin:auto vom Bild zu erreichen solltest du eher direkt dem Elternelement passende Abstände geben.

kampfspatz · 9. Mai 2012

@ Daaron

So ein Quatsch ! Natürlich kann er Deine Handstände nachzuvollziehen versuchen, und vielleicht kriegt er das dann auch irgendwie hin !

Ab er wenn es nur um die Optik der Schrift auf der Startseite geht, wo soll denn da das Problem sein, diesen Schriftzug als Grafik einzublenden ! Geht schnell zu machen und ohne Probleme !

Anscheinend bist Du es, der in einer anderen Welt lebt, allerding nicht in einem Land der Dritten, sondern wohl eher in einer abgehobenen vierten Diemension von Überheblichkeit !

Yuuri · 9. Mai 2012

Unrecht hat er nicht. div und p sind Blockelemente, da wundert mich der Umbruch nicht.

Daaron · 9. Mai 2012

kampfspatz schrieb:
@ Daaron

So ein Quatsch ! Natürlich kann er Deine Handstände nachzuvollziehen versuchen, und vielleicht kriegt er das dann auch irgendwie hin !

Ab er wenn es nur um die Optik der Schrift auf der Startseite geht, wo soll denn da das Problem sein, diesen Schriftzucg als Grafik einzublenden ! geht schnell zu machen und ohne Probleme !

Anscheinend bist Du es, der in einer anderen Welt lebt, allerding nicht in einem Land der Dritten, sondern wohl eher in einer abgehobenen vierten Diemension von Überheblichkeit !

Es geht um Barrierefreiheit und SEO. Grafiken sind, auch mit korrektem Alt-Tag, immer etwas schlechter als echter Text. Und wie ist das, wenn man den Text mal ändern will? Fasst man dann die Grafiken wieder an? Dann doch lieber Text, den man direkt im CMS schnell umtippt. Und zu guter Letzt: GERADE für Mobile-Kunden ist es nicht unerheblich, wie viele Daten eine Webseite überträgt. Deshalb sind CSS Box Shadows besser als PNG-basierte Schatten-Hacks, deshalb sind CSS Rounded Borders besser als eigenartige Hintergrundgrafiken und deshalb sind RGBA-Backgrounds besser als 1px-PNGs.
Außerdem: Wenn du dir die Seite angeguckt hättest, hättest du gemerkt, dass es eh Verdana mit nem Fallback auf Helvetica ist. Mit Verdana sollte jedes Gerät korrekt umgehen, es liegt also eh nicht an der Schriftart. Es liegt eher an der grundsätzlich versaubeutelten Elementstruktur.

digitalfux · 9. Mai 2012

Hallo Leute,

das mit der Webseite über Smartphone passt jetzt.

Danke an alles hier im Forum

Suche

Webseite für Fotografen - Schrift stimmt nicht

digitalfux

Cadet 4th Year

Yuuri

Fleet Admiral

Velines

Lt. Junior Grade

Nico25394

Lieutenant

kampfspatz

Banned

Daaron

Fleet Admiral

digitalfux

Cadet 4th Year

Daaron

Fleet Admiral

kampfspatz

Banned

Yuuri

Fleet Admiral

Daaron

Fleet Admiral

digitalfux

Cadet 4th Year

Ähnliche Themen