problème de positionnement

par **damaskinos** » 06 août 2009, 17:55

Merci,

Je marque résolut.

par **Victor BRITO** » 06 août 2009, 17:51

Mais j'aurais aimé un éclaircissement sur l'erreur qui se produisait à savoir pourquoi le position en absolut créait se décalage et après je marque résolut.

Pour que le positionnement en absolu soit bien « calé » sous les versions d'IE antérieures à la 8, il faut préciser les propriétés top et left (fût-ce pour en fixer la valeur à 0).

par **damaskinos** » 06 août 2009, 17:43

C'est moi qui jouait avec le javascript un peu. c'est ok.

Mais j'aurais aimé un éclaircissement sur l'erreur qui se produisait à savoir pourquoi le position en absolut créait se décalage et après je marque résolut.

Merci

par **Victor BRITO** » 06 août 2009, 17:36

En essayant de supprimer le positionnement du div #banner et des images, j'obtiens un effet bizarre à l'affichage lors du changement d'image : la nouvelle apparaît en-dessous de l'ancienne en train de disparaître et remonte ensuite.

Si ton problème est résolu, n'oublie pas de le marquer comme tel.

par **damaskinos** » 06 août 2009, 17:29

le problème est résolut.

Je venais de me rendre compte aussi que le problème venait du javascript mais j'avais aucune idée comment le résoudre. Pourrais-tu m'expliquer l'implication que le javascript le positionne en absolut.
Je croyais que ça aurait plus occasionné un chevauchement qu'un décalage non ?

Merci de m'avoir aidé et de m'éclairer si j'abuse pas trop.

par **Victor BRITO** » 06 août 2009, 17:09

Essaie d'ajouter la règle CSS suivante :

Code : Tout sélectionner

.innerfade img {
  top: 0;
  left: 0;
}

Vu que ton JavaScript positionne les images en absolu par rapport au div #banner.

par **damaskinos** » 06 août 2009, 15:44

Désolé du délais mais y a 5h de décalage horaire je crois

Voilà je post l'URL

http://liveplayaz.com/demo/template/akrosport1.html

Regarde sous IE7, IE6

Merci de ton aide.

par **Victor BRITO** » 06 août 2009, 13:08

Aurais-tu, par hasard, une URL à fournir, que je puisse vérifier plus facilement ?

par **damaskinos** » 06 août 2009, 05:29

Merci de ta réponse mais cela n'a rien changé vraiment.

Sous IE 5,6,7 j'ai toujours la bannière décalée vers la droite. J'arrive pas à comprendre. Sous IE8, FF c'est ok.

Merci d'avance je continue à chercher

par **Victor BRITO** » 06 août 2009, 02:30

Essaie d'ajouter ceci :

Code : Tout sélectionner

#menus {
  overflow: hidden;
}

Soit dit en passant, ton div #menus est superflu : l'élément ul qu'il contient suffit amplement.

par **damaskinos** » 05 août 2009, 23:05

Bonjour à tous et merci d'avance pour vos réponses.

N'étant pas un expert en css, je viens solliciter votre aide.

1 - J'ai un rendu différent sous IE et FF. JE comprend pas pourquoi.
sous IE

sous FF

Le code html:

Code : Tout sélectionner

<!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>:: Akrosports ::</title>
<link rel="stylesheet" href="../css/style1.css" type="text/css" charset="utf-8" />
<script src="../js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="../js/jquery.innerfade.js" type="text/javascript"></script>
<script src="../js/scripts.js" type="text/javascript"></script>
</head>

<body>
<div id="container">
    <div id="header">
        <p>Jeudi 9 avril 2009 &nbsp;|&nbsp;<a href="#">Login</a>&nbsp;|&nbsp;<a href="#">Ouvrir un compte</a></p>
        <div id="recherche">
            <input id="inputTop" type="text" name="recherche" value="&nbsp;&nbsp;rechercher"  />
            <input type="image" src="../images/akrosports_05.jpg" alt="submit" />
        </div>
    </div>
    <div id="menus">
         <ul id="menu">
        	<li><a href="">ACCUEIL</a></li>
			<li><a href="">L'ÉQUIPE</a></li>
			<li><a href="">À PROPOS DE NOUS&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
			<li><a href="">FORUM</a></li>
			<li><a href="">NOUS REJOINDRE</a></li>
			<li><a href="">DEVENIR MEMBRE</a></li>
		</ul>
    </div>
    <div id="banner">
        <img src="../images/akrosports_16.jpg" alt="banniere" id="featuredImage" />
		<img src="../images/akrosports_19.jpg" alt="banniere" id="img1" />
		<img src="../images/akrosports_24.jpg" alt="banniere" id="img2" />
    </div>
</div>
</body>
</html>

Le code css

Code : Tout sélectionner

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;background: url(../images/images_01.jpg) repeat-x;
	text-align: center;}
/*p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
img{padding:0px 5px 5px 5px}*/

ul, li, img, body, html,p,a

{

	margin: 0;
	padding: 0;

}



div#container 
{
    width: 990px;
    margin: auto;
    
}

div#header
{
	background: url(../images/akrosports_02.jpg) no-repeat;
    width:800px;
	height:97px;
    margin:auto;
    border-bottom: #b0b0b0 1px solid;
}

div#header p
{
    padding-left:550px;
	padding-top:25px;
	font-size: 10px;
    color: #454545;
}

div#header #recherche
{
	padding-left: 600px;
	padding-top:  5px;
}

#inputTop
{
	font-size: 10px;
    color: #454545;
    width:150px;
    margin-top:0px;
}

#menus
{
    width:800px;
    height:28px;
    margin:auto;
   /* border:#b0b0b0 1px solid;*/
    background:url(../images/akrosports_18.jpg) repeat;
}

#menu
{
    float:left;
    width:100%;
}
#menu li
{
    display:inline;
    float:left;
    width:130px;
    height:25px;
    text-align:left;
	list-style-type: none;
    background:url(../images/akrosports_17.jpg) no-repeat;
}

#menu li a
{
    text-decoration: none;
	color:#222222;
	text-align:left;
	font-weight:300;
	font-size:10px;
	padding:7px;
}

#menu li:hover
{

}

#menu a:hover
{
	text-decoration: none;
	color:#ffffff;
	text-align:left;
    padding-top:2px;
	font-weight:300;
    background:url(../images/akrosports_10.jpg) no-repeat;
}

#menu li a:active
{
	text-decoration: none;
	color:#ffffff;
	background:url(../images/akrosports_10.jpg) repeat-x;
	width:100%;
	text-align:left;
	font-weight:bold;

}

div#banner
{
    width:990px;
    height:150px;
	BORDER-BOTTOM: #b0b0b0 1px solid;
	
}

Merci d'avance pour votre aide

problème de positionnement

Répondre

Étendre la vue Revue du sujet : problème de positionnement

Re: problème de positionnement

Re: problème de positionnement

Re: problème de positionnement

Re: problème de positionnement

Re: problème de positionnement

Re: problème de positionnement

Re: problème de positionnement

Re: problème de positionnement

Re: problème de positionnement

Re: problème de positionnement

problème de positionnement