28172 sujets

CSS et mise en forme, CSS3

[Decalage sous Safari et Chrome]

Bonjour,

Voilà depuis quelques mois je cherche la solution en dilettante sans succès.
J'ai bien isoler le problème mais je n'arrive pas à le corriger.
Le fait est qu'effectivement il y a beaucoup de messages portant sur ce thème mais je n'ai pu trouver d'élément me permettant de fixer ce soucis.

J'ai un décalage d'un div sous un autre uniquement sous safari et chrome.
J'ai tenté les structures conditionnel sans résultat, et je ne sais plus que faire aujourd'hui pour trouver une solution "seul".


voici à quoi ressemble ma page sous safari

Voici le lien qui vous permettra de visualiser cela sur ie ou firefox le lien


Il s'agit de l'interaction entre les div id='par' et id='sidebar'.

Afin de ne pas surcharger l'affichage du forum je vous propose de cliquer sur ce lien pour visualiser l'entièreté du css.

Et voici à quoi ressemble ces deux id:




#par{
	width:640px ;
	width:858px !important;
	margin-top:30px !important;
	border:0;
	/* background-color:#0F0;*/
	}	
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #par{
	  clear:right !important;
	 
  }
}

/** menu dans les encarts de droite **/
.sidebar{
	height:auto;
	padding: 0 !important;
	margin-left:0px !important;
	
	}

.sidebar ul { 
padding: 0 !important;
}

.sidebar li { 
margin-left: 25px;
}
.leftm{
	clear:both;
	background-image:url(xxxxx);
	width:218px;
	margin-top:-10px;
	margin-bottom:-10px;
	margin-left:10px;
	float:right;
	text-align:left;
	margin-right:-18px;
	}
.leftm a,
.leftm hover a{
	color:#FFF;
	text-decoration:none;
	font-weight:bold !important;
	font-size:12px !important;
}
.leftm p{
	padding-left:5px;
	padding-right:5px;
	font-weight:100 !important;
	}
	
.leftm form{
	margin:0 !important;
	padding:0 !important;
	clear:both;
	margin-top:2px;
	padding-left:10px;
	padding-right:5px;
	padding-bottom:5px;
	line-height:25px;
	margin-bottom:2px;
	border:0px;
	}
	
.leftm img{
	
	border:0px;
	}
.topm{
	background-image:url(xxxxx);
	height:27px;
	
	
	line-height:35px;
	}
.botm{
	background-image:url(xxxxx);
	height:16px;
	}

.topm h1{
	line-height:25px !important;
	margin: 0 !important; 
	padding: 0 !important;
	font-weight:bold !important;
	text-align:center;
	font-size:13px;
	/*color:#999!important;*/
	color:#ABBED3;
		}

		
/** fin menu de encarts de droite **/


En espérant avoir rédiger cela de manière claire et lisible pour vous, et merci pour ces quelques minutes d'attention.

Pour info j'ai fait ce site seul, et le développement web n'est pas une de mes qualités comme vous aller le constater. Smiley cligne
Modifié par fvsch (02 Dec 2011 - 16:52)
Bonjour, j'ai regardé rapidement la structure du code html et je crois que c'est à vérifier...

Par exemple, je ne comprends pas pourquoi tu as mis ton div #par à l'intérieur du div #pic ? À moins que ce soit une erreur et que le #pic ne soit pas fermé ?

De plus, tu utilises plusieurs <br/> ce qui pourrait être corrigé facilement en utilisant la balise <p> et les ajustements de marge dans la feuille de styles.
Très intéressant! merci Mabelle de ton retour.

par et dans pic c'est une erreur... peut être que cela à eu un intérêt à un moment.. je ne sais plus. Du coup j'ai corrigé. merci Smiley cligne

J'ai passé la page à dans des validateurs sans soucis, peut être n'ai je pas le savoir nécessaire pour "voir" des erreurs à ce niveaux la.

Ensuite les br sont utilisé car j'injecte le texte depuis une source en bdd, lors de la rédaction il y a plusieurs br qui passe comme ça.

Pour l'instant je ne sais pas bien comment m'y prendre pour les minimiser, mais je met ça dans un coin de ma tête pour la prochaine release Smiley cligne
Modifié par Marc-vincent (21 Jan 2011 - 17:23)
Supprime 


@media screen and (-webkit-min-device-pixel-ratio:0) {
  #par{
	  clear:right !important;
	 
  }
}


Qui cible clairement webkit et qui dit que à droite de #par il doit pas y avoir de block, hors sidebar est un block ....

(n’hésites pas à utiliser développer tools sous chrome Smiley cligne , en 30secondes le problème a été trouvé)
Modifié par rs459 (22 Jan 2011 - 20:25)
Bonjour

J'ai à peu près le même problème sous safari et Chrome mais pas sous IE et FF

Sur ma page d'accueil, www.laboutiquedoptique.com, le slider central n'est pas convenablement positionné.
J'ai l'impression que le problème vient de la div: <div id="div-interaktingslider" align="center">, mais je n'arrive pas à trouver le paramètre qui fait que!

J'ai bien essayé avec l'outil wed developer de chrome mais ne maitrisant ni l'outil ni le navigateur je cale sur la solution.

Si vous avez une idée, je serais très preneur

JP
En baissant ta margin-left: 199px; à 20px sur ton #frame et en lui mettant un float: left; tu recentres ton slider.

Ensuite un float:left; sur la div conteneur de ton h3 et tes fiches produit.
jpbauer a écrit :
J'ai à peu près le même problème

Chaque cas est différent. Merci de créer un nouveau sujet.
Modifié par fvsch (02 Dec 2011 - 16:55)
Sujet clos
Aller à