Du bist nicht angemeldet. [Anmelden]
Optionen
Thema bewerten
Suche: Bessere möglichkeit JavaScript/CSS Problem (Bild) - #1522498 - 09.07.2008, 08:47:53
The Ball Master
Famil​ymitg​lied​

Registriert: 24.04.2005
Beiträge: 956
Ort: Berlin
Huhu Knuddelsfreunde,

ich erstelle derzeit eine Neue Private Homepage und suche ein JavaScript was sich für meine Zwecke besser eignet und habe dann noch eine Grafische Frage an die Spezailisten hier.
Sinn und zweck der Homepage ist es, das sie sich Grafisch verändert.
Meine Homepage ist so gestaltet das am Menü sogenannte ''Smileykogeln'' sind, die sich alle 10 Sekunden verändern.
Funktioniert soweit auch ganz gut.
Nur muss ich 6 verschiedene JavaScripts laufen lassen damit das Funktioniert und da suche ich eine bessere möglichkeit.
Zumal der wechsel in die nächste kugel zu abrubt geht.
Ich hätte dort am Liebsten einen weichen wechsel.
Um sich ein Bild davon zu machen hier der Link, fals der Link unerwünscht ist wegen werbung bitte entfernen und per /m in Knuddels nach den Link fragen.

URL: Smileyklick.de

Soviel zu meinem ersten Problem.
So, dann habe ich das Problem das die CSS für InternetExplorer nicht Funktioniert und da suche ich eine Lösung das diese auch Funktioniert.
Die Homepage verschiebt sich im IE7 und die Kugelgrafiken sind nicht mehr Transparent (Warum auch immer).
Wäre schön wenn sich der eine oder andere damit befassen könnte und mir hilfreiche tips bzw. Lösungen vorschlagen kann.


Ich danke dann schon mal für das Lesen glücklich

[zum Seitenanfang]  
Re: Suche: Bessere möglichkeit JavaScript/CSS Problem (Bild) [Re: The Ball Master] - #1522681 - 09.07.2008, 13:18:52
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Muss es denn Java-Script sein?!
Dafuer gibt es doch extra Animationen. In deinem Fall, waere wohl eine *.gif-Animation das beste. Mit einem Bilbearbeitunsprogramm, laesst sich das alles sehr leicht umsetzten.

Zitat:
So, dann habe ich das Problem das die CSS für InternetExplorer nicht Funktioniert und da suche ich eine Lösung das diese auch Funktioniert.
Die Homepage verschiebt sich im IE7 und die Kugelgrafiken sind nicht mehr Transparent (Warum auch immer).
Wäre schön wenn sich der eine oder andere damit befassen könnte und mir hilfreiche tips bzw. Lösungen vorschlagen kann.

Wie hat mal jemand so schoen im IRC-Channel gesagt: Die Inkompetenz der IE-Entwickler von Microsoft, ist Gottes Strafe fuer Bills Erfolg und uebermaessigem auffressen der Konkurrenz. lach

Aber mal ernsthaft.
So schoen, lebendig und frisch ich das Disign finde - Respekt an dieser Stelle - so grausig empfinde ich den Quellcode dahinter und wenn man eben unsauber Programmiert, dann meckert der IE.

So wie du es hier machst, hat das auch keinen Sinn bzw. macht man so nicht:
Zitat:
<div class="sidel">
<h2>Die Smileys <span class="gfxinside" style="margin:-61px 0 0 -63px;"><img src="images/kugeln/Kugel_2.png" name="animation2" onLoad="setTimeout('naechstesBild2()', verzoegerung)"></span></h2>
<a class="menu" href="">Meine Smileys</a>
<a class="menu" href="">Shop Standart</a>
<a class="menu" href="">CT Smileys</a>
<a class="menu" href="">Heatpats</a>
<a class="menu" href="">Sonder Händy Smileys</a>
<a class="menu last" href="">Lanyards</a>
<div class="side_bot"></div>
</div>
<div class="spacer"></div>


So oder so aehnlich - soll jetzt nur ein Beispiel sein und ich will auch nicht behaupten, dass es 100% richtig ist, weil ich es nur schnell mal angesehen hab:

Markup:
Zitat:
<ul class="left">
<li class="back"><span></span><h2>Allgemeines</h2></li>
<li class="back"><a class="menu" href="">Info zur Homepage</a></li>
<li class="back"><a class="menu" href="">sdfsdfsdf</a></li>
<li class="back"><a class="menu" href="">sdfsdfsdf</a><span class="bttn"></span></li>
</ul>


CSS:
Zitat:
<style type="text/css">
* {
margin:0;
padding:0;
}

body {
background:#d9abef;
color:#fff;
}

li {
list-style-type: none;
}

li h2 {
background:url(Dein Hintergrund fuer die jeweilligen Menueueberschriften.png);
width:133px;
height:45px;
font:bold 12px/58px Tahoma;
text-align:left;
vertical-align:center;
padding-left:60px;
}

li span {
background: url(DEIN BUBBLE BILD MIT DER SMILEY-Animation.gif);
position:absolute;
height:58px;
width:66px;
margin-top:-5px;
margin-left:-8px;
}

li.back {
width:209px;
background:url(Dein Hintergrund mit den Border-Elementen fuer die Listenpunkte.png) 0px 45px repeat-y;
}

li span.bttn {
background:url(Dein Border-Bottom fuer den jeweills letzten Menuepunkt.png);
width:171px;
height:8px;
margin-left:20px;
margin-top:-3px;
}

a.menu {
border-bottom:1px solid #c798dd;
display:block;
width:148px;
height:28px;
text-decoration:none;
font-size:12px;
margin:0 auto;
padding-left:10px;
line-height:28px;
vertical-align:center;
color:white;
}
</style>

Ich glaub, das erklaert sich von selbst, wenn du dir mal das ganze ansiehst.

Ab IE6 abwaerts, wird kein transparentes, mehrschichtiges *.png-Format unterstuetzt.

Design: TOP - Quellcode: Flop.

Ach und falls du evtl. php Unterstuetzung auf deinem Webspace hast, dann ueberleg dir mal, ob du nicht lieber die Seiten per include einbindest und nicht mit dem doofen framegesette.

der meker ~leo engel

[zum Seitenanfang]  
Re: Suche: Bessere möglichkeit JavaScript/CSS Problem (Bild) [Re: huendchen] - #1522724 - 09.07.2008, 13:56:35
The Ball Master
Famil​ymitg​lied​

Registriert: 24.04.2005
Beiträge: 956
Ort: Berlin
Ich werde das Morgen gleich mal ausprobieren, da man mir zuhause mein Internet dicht gemacht hat, muss ich mich damit in der Schule ärgern.
Ich gebe dir vollkommen recht was die CSS umsetzung meines Desings angeht, diese umsetzung beruht nicht auf meinem Mist.
Kann ich den die content, header, footer, und die realc CSS anwendung so lassen ?
Oder hast du da auch eine idee ? glücklich


Mit Grafiken die Animiert sind bin ich nicht so zufrieden, den ich will nicht 6 verschiedene Grafiken haben wo jedesmal 30 verschiedene Smileys in verschiedener reihenfolge gemacht sind.
Deswegen diese Lösung und ich sag ja, diese gefällt mir auch nicht.
Aber deswegen jetzt eine Smileyanimation zu machen gefällt mir auch nicht gut.
Deswegen meine Frage ob es nicht einfach ein besseres Script gibt um dem ganzen einen besseren Style zu verleihen.

[zum Seitenanfang]  
Re: Suche: Bessere möglichkeit JavaScript/CSS Problem (Bild) [Re: The Ball Master] - #1523773 - 10.07.2008, 15:32:33
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Es gibt ne sehr einfache Loesung, fuer dein FadeIn-FadeOut Problem:
Du kreierst dir in einem Listenpunkt, wie oben angezeigt, eine Imagemap - fuer jeden Menuepunkt, wo das auftreten soll - und nimmst dir einfach ein Script aus den aktuellen Gallerien, die dieses Prinzip inne haben, hast du bestimmt schon mal gesehen.

Sollte eigentlich kein zu hoher Trafficverbrauch sein, da die images so gross dann auch wieder nicht sind.

Naja, zum restlichen Markup, sag ich mal lieber nichts auch sind einige fehler im CSS drin die du mit einem Validator rausfinden kannst:

[zum Seitenanfang]  
Re: Suche: Bessere möglichkeit JavaScript/CSS Problem (Bild) [Re: huendchen] - #1527695 - 15.07.2008, 12:34:16
The Ball Master
Famil​ymitg​lied​

Registriert: 24.04.2005
Beiträge: 956
Ort: Berlin


Sry für die Späte antwort, aber ich schaffe im moment einfach garnichts (kein internet).
Zur ersten seite spunkt er anscheint die fehler im HTML bereich aus.
Leider kann ich kein English und kann damit nichts anfangen =(

Die 2 Seite fand ich sehr intressant, nur frage ich mich...ob der untere CSS code der korigierte CSS ist ?

Ps: Von einem Listenpunkt-System hab ich leider noch nichts genaues gehört und kann mir von daher nichts drunter vorstellen.

[zum Seitenanfang]  
Re: Suche: Bessere möglichkeit JavaScript/CSS Problem (Bild) [Re: huendchen] - #1531880 - 21.07.2008, 12:30:29
The Ball Master
Famil​ymitg​lied​

Registriert: 24.04.2005
Beiträge: 956
Ort: Berlin
So, ich bin nun endlich mal dazu gekommen deine variante auszuprobieren und bin damit ehr zufrieden als mit der alten.
Ich musste nur noch den a.hover einfügen und alle grafiken einmal anpassen.
Nun sieht es auf beiden seiten gleich aus und vom abstand her stimmt auch alles.
Mit den kugeln wird es wohl beim alten bleiben, da deine möglichkeit keinen grafik wechsel beinhaltet.

Demo: Klick mich

Ich bin noch nicht ganz fertig, aber es sieht jetzt schon besser aus als vorher, bzw genauer und ordentlicher.

[zum Seitenanfang]