28172 sujets

CSS et mise en forme, CSS3

[Résolu]Probleme de positionnement empechant l'affichage de texte pla

Problème de positionnement empêchant l'affichage de texte placé en absolu

Bonjour,

En fait, il s'agit de l'utilisation d'un slideshow que j'ai trouvé sur le web: au lieu d'image, j'utilise du texte mais pas n'importe lequel
(http://jonraasch.com/blog/a-simple-jquery-slideshow)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">

/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it [smile]
***/

function slideSwitch() {
    var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    // use this to pull the divs in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');

    // uncomment below to pull the divs randomly
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 1000 );
});

</script>

<style type="text/css">

/*** set the width and height to match your images **/

#slideshow {
   /*position:relative;*/
	width:390px;
    height:130px;
	border:1px solid black;
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
	width:390px;
    height: 130px;
    background-color: #FFF;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

</style>
</head>

<body>
   <div style="width:1000px; margin-left: auto; margin-right: auto; ">
            <div style="position:relative;float:left;width:600px;height:130px;border:1px solid black;">
               <div class="takerdv" style="position:absolute;top:22px;left:37px;margin: 0 0;"><span style="font-style:oblique;font-size:x-large;">Take </span><span style="font-style:oblique;font-size:xx-large;font-weight:bold">RAKNAL</span></div>
               <div class="takerdv" style="position:absolute;top:38px;left:360px;margin: 0 0;"><span style="font-style:oblique;font-size:x-large;">by </span><span style="font-style:oblique;font-size:xx-large;font-weight:bold">Studio</span></div>
               <div class="takerdv" style="position:absolute;top:84px;left:166px;margin: 0 0;"><span style="font-style:oblique;font-size:x-large;">dance </span><span style="font-style:oblique;font-size:xx-large;font-weight:bold">floor</span></div>
            </div>           
            <div id="nuage-stickers" style="position:relative;float:left;width:390px;height:130px;border:1px solid black;">
				 <div id="slideshow">
				    <div class="active">
	                    <div style="position:relative;width:400px;height:130px">
	                        <div style="position:absolute;top:22px;left:50px;">Text1</div>
	                        <div style="position:absolute;top:35px;left:300px;">Text2</div>
	                        <div style="position:absolute;top:50px;left:110px;">Text3</div>
	                        <div style="position:absolute;top:70px;left:60px;">Text4</div>
	                        <div style="position:absolute;top:100px;left:310px;">Text5</div>
	                    </div>
				    </div>
				    
				    <div>
				        This will work with any markup
				    </div>
				    
				    <div>
				        Swap this out for anything, links, paragraphs, whatever
				    </div>
				    
				    <div>
				        Just make sure to set a background color if you use text
				    </div>
				    
				</div>
            </div>
    </div>
</body>
</html>


Le soucis c'est que le div avec les textes placés en absolu ne s'affiche pas sous Firefox et Chrome mais marche très bien dans IE

Je crois qu'il y a là le problème des positionnements de IE et les non-IE. Le code en question c'est à partir de
<div id="nuage-stickers" style="position:relative;float:left;width:390px;height:130px;border:1px solid black;">
<div id="slideshow">
Modifié par raknal (12 Apr 2010 - 08:25)
Des amis me conseillent d'utiliser outre les positionnements de texte! Or je dois faire comme ça car en image c'est lourd

En fait, pourquoi ça marche sous FF et autres mais sous IE oui
A la fin j'ai décidé de ne pas positionner ainsi
Mais ligne par ligne en utilisant span et padding-left

L'affichage est ressemblant
Je mets en résolu en n'ayant pas résolu le soucis avec les autres qu'IE
Sujet clos
Aller à