tobee
Erfahrenes Mitglied
LINK IST NICHT MEHR AKTUELL!!
Ich arbeite gerade an meiner neuen Homepage und experimentiere gerade ein wenig mit CSS und jQuery: http://i.grolba.de/social.html
Die roten Überschriften h3.fixed (Doug Crockford, John Resig, Lee Brimelow, Michael Plank) positionieren sich oben am Fenster,
bevor sie verschwinden würden (klingt komisch, ist aber so
):
Leider funktioniert das in den IEs überhaupt nicht. Die Überschriften bleiben fixiert.
Desweiteren kann man über die 2 Pfeile die Spalten nach rechts und links verschieben.
Leider sind alle Überschriften immer sichtbar. Auch rechts und links vom Content.
Desweiteren "wandern" nur im Firefox 3.5.9 die Überschriften mit. Ein Bug?
Ich hoffe ihr könnt mit den Infos was anfangen. Falls nicht, gebe ich gerne Weitere.
Schonmal vielen Dank für Hilfe oder/und Tipps
Ich arbeite gerade an meiner neuen Homepage und experimentiere gerade ein wenig mit CSS und jQuery: http://i.grolba.de/social.html
Die roten Überschriften h3.fixed (Doug Crockford, John Resig, Lee Brimelow, Michael Plank) positionieren sich oben am Fenster,
bevor sie verschwinden würden (klingt komisch, ist aber so
):
Javascript:
setInterval(function(){
var top = 111 - $(window).scrollTop();
if (top <= 0) {
top = 0;
}
$('div.image h3.fixed').each(function(i, item){
$(item).css('top', top + 'px');
});
}, 10);Desweiteren kann man über die 2 Pfeile die Spalten nach rechts und links verschieben.
Leider sind alle Überschriften immer sichtbar. Auch rechts und links vom Content.
Desweiteren "wandern" nur im Firefox 3.5.9 die Überschriften mit. Ein Bug?
HTML:
<div id="slider">
<div id="slider-helper" class="clearfix">
<div class="image left">
<h3 class="fixed">Doug Crockford</h3>
<a href="##">
<img src="res/img/social-doug-crockford.jpg" width="215" height="180" alt="" />
</a>
<ul>
<li><h3><a href="##">The XFL File Format Explained</a></h3><p>One of the most underrated features of Flash CS5 is the new XFL file format. But there is some confusion out there about what it is and how to use it. This quick post will hopefully clear some of these things up. The XFL format is a way to represent a Flash Professional...</p></li>
<li><h3><a href="##">Fixing Code Hinting in Flash CS5</a></h3><p>I’m sure that most people who frequent this blog have already downloaded the Flash CS5 trial and started playing with it. If not, go over to the Adobe site to get it. One of the coolest new features is custom class introspection in the Actions editor. There is one important thing to be aware of...</p></li>
<li><h3><a href="##">Flash Is Not Designed For Touch?</a></h3><p>Everyone who actually programs in Flash knows that there is now full multi-touch and gesture support available. Unfortunately, some people still like to make claims to the contrary in an effort to make Flash appear behind the times. It is fortunately very easy to prove them wrong. Below is a great example built by StruckAxiom...</p></li>
<li><h3><a href="##">FITC Toronto Dead Drop Explained</a></h3><p>FITC Toronto is done for another year and it was again a great event. This year there seemed to be a lot more students and the turnout in general was fantastic. During the conference I did a dead drop for Master Collection CS5, an unlocked Google Nexus One, and admission onto the AIR for Android...</p></li>
<li><h3><a href="##">Win An Ultimate Android Developer Kit At FITC Toronto</a></h3><p>I leave tomorrow for FITC Toronto and this is looking to again be a great conference. Luckily the volcano cleared up just in time so the European crew should make it. As part of the conference I am going to be doing another dead drop. If you’re familiar with the dead drops you know that...</p></li>
</ul>
</div>
...
</div>
</div>
CSS:
div#slider {
width: 940px;
overflow: hidden;
}
div#slider-helper {
width: 2000px;
}
div#slider div.image {
padding: 10px;
width: 215px;
}
div#slider div.image h3 {
font-size: 18px;
font-weight: 700;
line-height: 22px;
text-align: left;
margin-bottom: 6px;
background-color: #fff;
}
div#slider div.image h3.fixed {
background-color: #D33432;
padding: 4px;
color: #fff;
width: 207px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}Schonmal vielen Dank für Hilfe oder/und Tipps
Zuletzt bearbeitet:
