Scrollbalken "verschönern"

Xenolith · Post by **Xenolith** » Wed Apr 21, 2010 7:31 pm

Gute Idee! aber leider gehts noch immer nicht $:-\$

BTW:

Muss das in Body oder in den Header?

{literal}   
<__script__  type="text/javascript">    
$(document).ready(function()
{
   $('#content').jScrollPane();
});
</__script>
{/literal}

NaN · Post by **NaN** » Wed Apr 21, 2010 8:19 pm

Versuch doch mal die URL zu den Javascripts selber aufzurufen.
Die Scripte können nämlich nicht geladen werden.
404 Fehler.
D.h. sie sind nicht auf Deinem Server zu finden.
Guck da nochmal genau nach.

Du brauchst jquery.mousewheel.js und jScrollPane.js.
Und das ganze natürlich in den Header gleich nach dem

Code: Select all


<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></__script>

Was das Prototype da im Template macht, weiß ich nicht.

Xenolith · Post by **Xenolith** » Wed Apr 21, 2010 9:16 pm

funktioniert leider noch immer nicht.
Dein Document ready wirft fehler... (siehe screenshot)

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<!-- Titel der Website -->
      <title>{sitename} - {title}</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        
        <!-- Einbindung von Stylesheets -->
         {stylesheet}
<link  rel="stylesheet"  type="text/css" media="all" href="http://jesusourcaptain.org/testcms/uploads/joc_template/css/jScrollPane.css" />

        <!-- Einbindung von Javascript -->
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></__script>
<__script__ type="text/javascript" src="http://jesusourcaptain.org/testcms/uploads/joc_template/js/jquery-1.4.2.min.js"></__script>
<__script__ type="text/javascript" src="http://jesusourcaptain.org/testcms/uploads/joc_template/js/jScrollPane.js"></__script>
<__script__ type="text/javascript" src="http://jesusourcaptain.org/testcms/uploads/joc_template/js/jquery.em.js"></__script>
<__script__ type="text/javascript" src="http://jesusourcaptain.org/testcms/uploads/joc_template/js/jquery.mousewheel.js"></__script>
{metadata}

{literal}   
<__script__  type="text/javascript">
 $(function()  
 {
     $('#content').jScrollPane();
 });    
</__script>
{/literal}

</head>

Xenolith · Post by **Xenolith** » Thu Apr 22, 2010 2:57 pm

Habe es jetzt hin bekommen. Allerdings versaut mir scrollpane das gesamte Layout auch auf Seiten wo kein Scrollbalken ist und da wo einer ist ist erst recht alles kaputt;)

EDIT: Ist schon viel besser! Allerdings hab ich noch ein Problem mit dem overflow!

http://jesusourcaptain.org/testcms/spor ... b/climbone

Die für das content div gesetzten Einstellungen werden nicht verwendet...

NaN · Post by **NaN** » Thu Apr 22, 2010 3:47 pm

Im Content ist es sowieso fehl am Platz.
Gib mal stattdessen dem div .jScrollPane im stylesheet overflow:hidden.

Xenolith · Post by **Xenolith** » Sun Apr 25, 2010 10:24 am

Vielen Dank jetzt scheint alles wie gewünscht zu funktionieren.

BTW: Kennt jemand eine Möglichkeit die Website in verschiedenen Browsern zu testen? (IE6 / IE8 / Safari / Chrome / Firefox 3.0 / Firefox 3.5 / etc )

Gruß Xenolith

nockenfell · Post by **nockenfell** » Sun Apr 25, 2010 10:43 am

Xenolith wrote: BTW: Kennt jemand eine Möglichkeit die Website in verschiedenen Browsern zu testen? (IE6 / IE8 / Safari / Chrome / Firefox 3.0 / Firefox 3.5 / etc )

https://browserlab.adobe.com
http://browsershots.org/

Oder in dem du die einzelnen Browser installierst. IE 6 wird hier jedoch unter Win7 ein wenig schwierig (unter 64-Bit habe ich in nicht mehr zum laufen gebraucht)

Xenolith · Post by **Xenolith** » Sun Apr 25, 2010 11:27 am

Das Browserlap von Adobe ist echt gut! Allerdings habe ich mit erschrecken festgestellt das meine Seite nur im Firefox 3,5 100% funktioniert.

Am schlimmsten finde ich das im Firefox 2.0 / Firefox 3.0 / IE 7
die mittige Positionierung der Seite nicht funktioniert.

Hier der Code dafür:

Code: Select all

html {
position: absolute;
margin: -280px 0px 0px -485px;
top: 50%;
left: 50%;
overflow: hidden;
}

Link zur website:
http://www.jesusourcaptain.org/testcms

Vielen Dank

mike-r · Post by **mike-r** » Sun Apr 25, 2010 12:13 pm

Bei diesem Konstrukt hast Du noch ein paar andere Probleme, nicht nur in der Browserdarstellung. Zieh Dir mal Dein Browserfenster etwas kleiner, da kannst Du Deinen Inhalten schön beim Verschwinden im Nirvana zuschauen. Ich möchte nicht wissen, wie das auf einem Netbook aussieht

Die Positionierung würde ich eher auf den Body anwenden, aber ich denke, dass Du Dich wahrscheinlich eh von dieser starren Zentrierung verabschieden musst. Oder vielleicht besser mit prozentualen Werten arbeiten. Weiss nicht, ob man das entschärft bekommt, hab das grade nicht getestet.

Xenolith · Post by **Xenolith** » Sun Apr 25, 2010 1:00 pm

wow! Das Problem mit dem Zentrieren der Website konnte ich durch eine einfache Änderung beheben.

Vorher (Geht nicht!!)

Code: Select all

html {
position: absolute;
margin: -280px 0px 0px -485px;
top: 50%;
left: 50%;
overflow: hidden;
}

body {
height: 560px;
width: 970px;
border: 1px solid grey;
margin: 0;
padding: 0;
}

Nachher (Geht!!!)

Code: Select all

body {
height: 560px;
width: 970px;
border: 1px solid grey;
margin: 0;
padding: 0;
position: absolute;
margin: -280px 0px 0px -485px;
top: 50%;
left: 50%;
overflow: hidden;
}

Vielen Dank für deine Wertvollen Hinweise! Allerdings versteht ich noch nicht ganz warum es im html {} nicht funktioniert hat...

Gruß Xenolith

Xenolith · Post by **Xenolith** » Sun Apr 25, 2010 5:22 pm

Gibt es eine Seite auf der IE6 / IE7 Hacks aufgelistet sind?

Windows:
Firefox 2.0 -OK
Firefox 3.0 -OK
Firefox 3.5 -OK
IE 6 -failed (Transparente Box wird weiß dargestellt / falsch positioniert)
IE 7 -failed (Transparente Box wird falsch/doppelt positioniert)
IE 8 -OK
Chrome 3.0 -OK

Mac OS:
Safari 4.0 -OK
Safari 3.0 -OK
Firefox 2.0 -OK
Firefox 3.0 -OK
Firefox 3.5 -OK

nockenfell · Post by **nockenfell** » Sun Apr 25, 2010 6:59 pm

http://paulirish.com/2009/browser-specific-css-hacks/

mike-r · Post by **mike-r** » Sun Apr 25, 2010 11:12 pm

Unterschiedliche Position: http://carsten-protsch.de/zwischennetz/ ... l_bug.html
Weisse Box: http://jeenaparadies.net/weblog/2007/ju ... -ie-nutzen

Für so ein komplexes und unübersichtliches Gerüst wird man Dir allerdings ohne grossen Aufwand schlecht helfen können. Hier wäre das einfachste, Du baust reduzierte Testcases, wo der Fehler auftritt. Meist findet man beim Reduzieren den Fehler auch schnell allein...

Wichtig sind weiterhin fehlerfreie Dokumente, siehe:
http://jigsaw.w3.org/css-validator/vali ... testcms%2F
http://validator.w3.org/check?verbose=1 ... testcms%2F

Speziell beim CSS mit so vielen Fehlern muss man sich nicht allzuviel Wundern.

Xenolith · Post by **Xenolith** » Mon Apr 26, 2010 5:41 pm

mike-r wrote:
Speziell beim CSS mit so vielen Fehlern muss man sich nicht allzuviel Wundern.

Da hast du recht ich werd da mal "aufräumen"

CSS 2.1
Dieses Dokument wurde als CSS level 2.1 validiert!

Code: Select all

<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="CSS ist valide!" />
</a>
</p>

http://jigsaw.w3.org/css-validator/vali ... testcms%2F

Beim HTML-Validator hab ich allerdings noch einen Fehler.
Aber der ist im {content} Bereich... und zwar kommt er wohl nicht mit dem target="_blank" klar.
hat jemand ne Idee?
http://validator.w3.org/check?verbose=1 ... testcms%2F

Windows:
Firefox 2.0 -OK
Firefox 3.0 -OK
Firefox 3.5 -OK
IE 6 -failed (Transparente Box wird weiß dargestellt [zu 70% Transparente PNG Bilddatei als Hintergrund])
IE 7 -OK
IE 8 -OK
Chrome 3.0 -OK

Mac OS:
Safari 4.0 -OK
Safari 3.0 -OK
Firefox 2.0 -OK
Firefox 3.0 -OK
Firefox 3.5 -OK

Vielen Dank und liebe Grüße,
Xenolith

NaN · Post by **NaN** » Tue Apr 27, 2010 10:26 am

Schau Dir doch einfach mal Deinen Code selber ganz genau an.
Du hast den kompletten Absatz innerhalb einer Überschrift:

...
...

Und demzufolge ist der komplette Inhalt invalide.

Was das target angeht... verwende als DOCTYPE doch einfach mal nicht XHTML 1.1 sondern einfach nur XHTML 1.0 Transitional

Dann dürftest Du was die Validität angeht weniger Probleme haben.

CMS Made Simple Forums

Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"

Re: Scrollbalken "verschönern"