28173 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai un petit problème avec mes feuilles de styles...
Les réglages que j'y ai fait sont correctes pour mon site dans FireFox mais pour ce qui est de IE je me retrouve avec des écarts entre mes div... Je ne sais pas du tout comment faire pour résoudre ce problème aussi j'espere que vous m'apprendrez comment le régler!!

A bientot Smiley biggrin
Bonjour,
Sans exemple de ton site en ligne ou même un morceau de ton code ça va être très difficile de te guider
Tu peux faire une recherche ici ou sur un moteur de recherche et tu verras que tu n'es pas le seul à avoir ce type de problème Smiley langue
Bon courage
voila ma feuille de style...

body {
background-color:#C080FF ;
position: absolute;
width:900px;
text-align:center;
}

#page {
border:3px solid #000000;
position:relative;
width:800px;
height:1000px;
margin:auto; 
background-color:#FFC0FF;
}

#entete {
vertical-align:middle;
height:80px;
background-color:#FFFFFF;
border:solid 5px black;
text-align:center;
font-family:monotype corsiva;
}

#texte {
border:2px solid #000000;
background-color:#FF80C0;
padding:10px;
margin-left:150px;
height:890px;
width:629px;
text-align:center;
}

#menu {
border:2px solid #000000;
position:absolute;
left:-2;
width:152px;
height:910px;
font-family:monotype corsiva;
background-color:#C00080;
}

#ligne {
text-align:left;
}

th {
border: solid black 2px;
}

h3 {
   text-decoration:underline;
   color:black;
}


HELP!! Smiley ohwell


<Edit par Florent V.: merci de penser à utiliser les balises de mise en forme pour le code! />
Modifié par Florent V. (26 Nov 2007 - 17:16)
Bonjour,

Une feuille de style seule ne sert pas à grand chose. Avec le code HTML correspondant, ça serait mieux. L'idéal serait d'avoir un lien vers la page en ligne.
Voici donc le code HTML de ma page...

<Edit par Florent V.>
Code supprimé. Merci de tenir compte de l'avertissement donné dans le message précédent.
Conseil: ne pas créer de nouveau message pour poster à nouveau le code HTML (correctement balisé, bien entendu Smiley cligne ), mais éditer ce message pour remettre le code, le baliser correctement, et pourquoi pas supprimer cet avertissement de modération disgracieux. Smiley smile
</Edit>

merci de votre aide! Smiley cligne
Modifié par Florent V. (26 Nov 2007 - 20:30)
Le problème c'est que je n'ai pas mis ma page en ligne encore...
Donc je ne peux pas vous donner d'adresse!

Help!! Smiley sweatdrop
Moi aussi, j'ai un problème également entre firefox et IE 7 !

http://www.medrano.ch/photos/roses.html[/url]

Sur Firefox, la présentation est juste alors que sur IE 7, le menu des petites images à droite, sont comme mangées...

code css

@import "layout.css";

ul#galerie_mini
{
	list-style-type: none;
	float: right;
	height:495px;
	overflow:auto;
	background-color: #666666;
	border: thin solid #FFFFFF;
	width: 130px;
	margin-right: 130px;
}


ul#galerie_mini li
{
	margin-top: 10px;

	
}

ul#galerie_mini li a img
{
	border: thin solid #FFFFFF;
	margin-top: 2px;
	margin-bottom: 2px;
}

dl#photo
{
	height:400px;
	padding-top: 20px;
  
}

dl#photo dt
{
	color: #F90;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: bold;
	margin-top: -10px;
	text-align: center;
	list-style-type: none;
	background-color: #FFCC99;
	margin-bottom: 20px;
}

dl#photo dd
{
	margin: 0;
	text-align: center;
}

dl#photo img
{
	border: thick solid #FFFFFF;
}
/* @import "layout-gauche.css"; */
 
/* Les éléments HTML en général
*******************************************************************************/
body{
	background-image:url(../../img/arriere_plan.jpg);
	background-repeat:no-repeat;
	background-position: right top;
	background-color:#f5b079;
	margin: 0 auto;
}
.titre {
	color: #FFFFFF
}
.cadre {
	border: thin solid #FFFFFF;
}


h1, h2, h3, h4, h5, h6{
	font-family: Cambria;}

h1{font-size: 1.5em;}
h2{font-size: 1.4em;}
h3{
	font-size: 14px;
}
h4{
	font-size: 14px;
}
h5{font-size: 1.1em;}
h6{font-size: 1em;}

pre, code{
	font-size: 1.2em;
}

pre{
 	width: 100%;
	overflow: auto;
	border: 1px solid #CCC;
}

html>body pre {
	overflow: auto;
	width: auto;
}

fieldset{
	border: none;
}

label{
	cursor: pointer;

}

.field label{
	display: block;
}

input{
	border: 1px solid #999;
}

textarea{
	width: 100%;
	font-size: 1em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

a{
	color: #FFFFFF;
}

a:visited{
	color: #FF9900;
}

a:hover{
	color: #FF0000;
}


.left{
	float: left;
	margin-right: 1em;
}

.right{
	float: right;
	margin-left: 1em;
	text-decoration: none;
}


	
/* Le contenu
*******************************************************************************/
.day-date {
	display: none;
}
.post-date {
	float: left;
	color: #FF9933;
	font-family: Georgia, 'Lucida sans ms', Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	text-align: center;
	font-weight: bold;
	margin: 0px 10px 0 0;
	padding: 8px 3px;
	width: 55px;
	line-height: 1em;
	background-color: #FFFFFF;
}
	
.post-title{
	color: #000000;
	margin-bottom: 0;
	background-color: #FFCC99;
	margin-left: 70px;
	font-size: 17px;
}

	.post-title a{
		color: #F90;
		background: transparent;
		text-decoration: none;
	}
	
.post-info{
	margin-top: 5px;
	color: #FFFFFF;
	background: transparent;
	padding-bottom: 1ex;	/*border-bottom: 1px solid #FC0;*/
	font-size: 14px;
}

	.post-info a{
	color: #666666;
	background: transparent;
	text-decoration: none;
	}
	
.post-content{
	text-align: justify;
	margin-top:10px;
	margin-left: 70px;
	
}

.post-content blockquote{
	font-family: Cambria;
	font-style: italic;
	
}

.post-info-co{
	text-align: right;
	font-size: 13px;
	color: #FF9966;
}

#trackbacks blockquote, #comments blockquote{
	padding: 1ex 1em;
	margin-left: 0px;
	margin-right: 0px;
	border-left:#FFFFFF  solid 2px;
	border-right:#FFFFFF solid 2px;
	background-color:#FFCC99;
}

/* La barre de navigation
*******************************************************************************/
	#sidebar div ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}

#sidebar h2, #sidebar h3{
	color: #FFCC66;
	margin: 0 0 1ex 0;
}

#sidebar h3{
	font-size: 14px;
	margin: 0;
	text-align:center; 
}
#sidebar h2{
	font-size: 17px;
	margin: 0;
}

#sidebar div#search{
	background: #666666;
	line-height: 2.3em;
}
	
	#search fieldset, #search p{
		margin: 0;
		padding: 0;
	}

	#q{
		padding-left: 18px;
		background: #fff url(img/q.png) no-repeat 4px center;
	}
	
#sidebar div#calendar{
	/*border-top: 1px solid #F0F0F0;*/
}

	#sidebar div#calendar table{
	font-size: 0.7em;
	text-align: center;
	margin: 0 auto;
	border-collapse: collapse;
	}
	
	#sidebar div#calendar table caption{
		margin: 0 auto;
	}
	
	#sidebar div#calendar table th{
		color: #f5b079;
		background: transparent;
	}
	
	#sidebar div#calendar table td{
		width: 14%;
		line-height: 2em;
		border: 1px solid #EEE;
	}
	
	#sidebar div#calendar table td a{
		display: block;
		background: #EFA;
		color: #493;
		font-weight: bold;
		text-decoration: none;
	}
	
	#sidebar div#calendar table td a:hover{
		background: #DBB8DC;
		color: #636;
	}

/* Le pied de page
*******************************************************************************/	
#footer{
	margin: 0;
	padding: 1em;
	border-top: 1px solid #CCC;
	background: #EEE;
	color: #666;
}

#footer a{
	color: #999;
}


#top{
	height:208px;
	width: 674px;
	margin-left: 280px;
	
}
#titres {
	height: 30px;
	background-image: url(../../img/titre.gif);
	margin-left: 80px;
	margin-right: 200px;
	text-indent: 20px;
	margin-top: -20px;
	
}
			
#content{
	float: left;
	width: 600px;
	margin-top:25px;
	margin-left:80px;
	background-color:#CCCCCC;
	padding: 20px;
	border: thin solid #FFFFFF;
}



#sidebar{
	float: right;
	width: 180px;
	margin-right: 150px;
	margin-top: 15px;
}


#sidebar div{
	width: 180px;
	background-color: #666666;
	margin-bottom: 10px;
	border: #FFFFFF solid 1px;
	padding: 10px;
	margin-top: 10px;	
}
#footer{
	padding: 1ex 1em 1ex 1em;
	margin : 0;
	clear: both;
}

#titres_photos {
	height: 30px;
	background-image: url(../../img/titre.gif);
	margin-left: 80px;
	margin-right: 200px;
	text-indent: 20px;
	margin-top: 120px;
}


En fait les div qui sont concernées c'est surtout pour div ul#galerie_mini, mais je ne vois pas qu'est-ce qui manque !! De plus, je n'arrive pas à centrer les photos au milieu de la galerie qu'elle soit owerflow ou non !
http://www.medrano.ch/photos/roses.html[/url]
je vais de faire un changement :

ul#galerie_mini
{
	list-style-type: none;
	height:495px;
	overflow:auto;
	background-color: #666666;
	border: thin solid #FFFFFF;
	margin: 0 auto;
}


ul#galerie_mini li
{
	margin-top: 10px;
	text-align: center;

	
}

ul#galerie_mini li a img
{
	border: thin solid #FFFFFF;
}

dl#photo
{
	height:400px;
	padding-top: 20px;
  
}

dl#photo dt
{
	color: #F90;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: bold;
	margin-top: -10px;
	text-align: center;
	list-style-type: none;
	background-color: #FFCC99;
	margin-bottom: 20px;
}

dl#photo dd
{
	margin: 0;
	text-align: center;
}

dl#photo img
{
	border: thick solid #FFFFFF;
}


Mais cette fois, l'erreur se trouve sous Firefox, car les photos de la galerie se trouvent à droite et non centrées...

franchement, je sais plus ou corrigé, pour que cette page html soit accessibles au deux explorateurs... ca commence vraiment à venir du chinois pour moi Smiley smile
Dernier soucis dans cette même page : sous IE la grande photo, dès qu'elle est verticale, elle dépasse le content.. alors que sur firefox, le content s'adapte automatiquement....
Ce sujet est une plaie à modérer, c'est pas croyable... Smiley rolleyes

@ julow: si tu ne peux pas donner de lien (dommage, tout le monde gagne du temps de cette manière), tu peux poster le code HTML auquel s'applique ton code CSS. C'est ce que tu as fait une fois, mais sans tenir compte des règles de mise en forme pour ce forum, ce qui m'a amené à modérer ton message pour y laisser un avertissement et des explications que j'espère visibles.

@ al_ange: tu dis «Moi aussi, j'ai un problème également entre firefox et IE 7 !», et tu en conclus donc qu'il faudrait poster ton problème dans le même sujet. C'est une erreur: on se retrouve avec un seul sujet où deux problèmes différents (car chaque problème a au moins quelques caractéristiques uniques!) sont mélangés. C'est impossible à suivre, il devient impossible pour la personne ayant posté le deuxième problème d'indiquer que son problème est [Résolu], etc.

Ce sujet étant devenu du grand n'importe quoi sur la forme (je ne juge pas le fond ici), je le ferme sans tarder.

Merci à tous les deux, si vous avez toujours un problème sur lequel vous souhaitez obtenir de l'aide, de créer chacun votre sujet, et d'y donner les informations utiles en les mettant en forme correctement et dans le respect des règles du forum.