probleme de CCS

Question

Bonjour, Voila j'ai un gros problème avec mon css en fait j'ai fait deux feuilles différentes pour mozilla et IE . Mon problème c'est que mon design  part complètement en sucette kan on réduit la page par exemple je pourrait avoir une explication svp

danna · Answer

Tu peux donner plus de détails ? 
On peut voir un peu ton code?

HACKER 712 · Answer

Bonjour !

C'est normal, tu n'as peut-être pas utilisé les pourcentages pour width et height...

danna · Answer

Salut,

On peut avoir plus de détails ?
Et voir ton code un peu?

pierre1098 · Answer

Mon code est hyper long je suis pas sur que vous voulez tous voir si ?

pierre1098 · Answer

Mais le voila c'est un peu le fouillie parce que j'essaye de le modifier

body
{
   width: 100%;
   height: 100%;
   margin: 0px;
   margin-top: 0px; 
   background-color : #ffffff;   
}

/* L'en-tête */
.en_tete
{
width :200px;
height :120px;
border:none;
margin-top:-75px;
margin-left:0px;
background-image:url("img/bandeau.jpg");
}

.bandeau
{
width: 100%;
height: 100%;
margin-left :22px;
}


/* Le menu */
#menu
{
  margin-top:-47px;
  float: left;
  width: 175px;
  height: 720px;
  background-image :url("img/silWEB.jpg");
}

#menu img
{
margin-top:-10px;
}

.element_menu h2
{    
   color: White;
   font-family: Century,"Times New Roman", Times, serif;
   text-align: center;
}

.element_menu a
{
   font-weight:bold;
   position:relative; 
   border : 2px #ffffff;
   color : white;
   display :block;
   margin: 5px ;
   text-align :center;
   font-family : Century,"Times New Roman","Arial Black",Times,sherif;
   LINE-HEIGHT: 50px;
}

.element_menu a:hover
{
   background-repeat:no-repeat; 
   border :solid 1px #ffffff;
   color: orange;
 
}
/* Le corps de la page */

#corps
{
   width : 59.5%;
   color: Black;
   font-family : Century;
   margin-left:175px;
}

.print #corps{
overflow:hidden;
}
/* menu déroulant*/

#conteneur-bande{
		width: 110.4%;
		background-color: #00488C;
		height:41px;
		margin-left:-28px;
		position:relative;
	    margin-top: -28px;
		}
	
		#bande{
		position:absolute;
		}
		#bande dl{
	
		height:40px;
		margin:0; padding:0;
		display:block;
		float:left;
		}

		#bande dt{
			font-weight:bold;
		font-family: Century;
		width:182px;
		display:block;
		height:40px;
		color:white;
		line-height:40px;
		text-align:center;
		border-left:dotted 1px #aa6b13;
		border-right:dotted 1px #aa6b13;
		cursor:pointer;
		font-size: 18px;
		}
		#bande dt:hover{
		background-color :#96BC2D;
		color:white;
		}

		#bande dd{
		display:block;
		margin:0;padding:0;
		}
		#bande dd ul{
		margin:0; padding:0;
		text-align:center;
		list-style:none;
		}
		#bande dd ul li a{
		background-color:white;
		color:black;
		display:block;
		text-decoration:none;
		height:30px;
		line-height:30px;
		width: 182px;
		border:solid 1px #aa6b13;
		}
		#bande dd ul li a:hover{
		color:White;
		background-color:#e26719;
		}
		#bande dl dd{
		display:none;
		}
		#bande dl:hover dd{
		display:block;
		}
.imgcorps
{
   margin-top:-1px;
   background-image: url("img/fondUVERT.jpg");
   background-repeat : repeat-x; 
   width :110.3%;
   margin-left :-28px;
}
.texterreur
{
text-align : center;
font-family :Century;
font-size: 30px;
}
.signalerreur
{
text-align :center;
font-family :Century;
font-size: 15px;
}
.retour
{
margin-left :440px;
color : orange;
}

/* fleche retour*/
.img
{
margin-left: 440px;
width :50px;
height:50px;
border : none;
}

.img2
{
margin-left:370px;
width: 200px;
height:200px;
}

#corps h1
{
   margin-top : 200px;
   color: #96BC2D;
   text-align: center;
   font-family: Consolas, "Arial Black", "Times New Roman", Times, serif;
   border : 0px solid black;
}

#corps h2
{
   height: 30px;
   background-image: url("img/corps.jpg");
   background-repeat: no-repeat;
   padding-left: 30px;
   color: #a832c3;
   text-align: left;
   border : 0px solid black;
}

/* image accueil*/
#img1
{ 

position : absolute;
margin-top:400px;
left : -230px;
margin-left : 480px;
}
#img1 img
{
width : 18%;
height : 16%;
border : none;
}
#img1 img:hover
{
width :20%;
height : 18%;
border: 3px solid green;
}

#img2
{
position : absolute;
margin-top:100px;
left : -230px;
margin-left : 480px;
}

#img2 img
{
width : 18%;
height : 10%;
border : none;
}
#img2 img:hover
{
width :20%;
height : 18%;
border: 3px solid orange;
}
#img3
{
position : absolute;
margin-top:100px;
left : 230px;
margin-left : 494px;
}
#img3 img
{
width : 20%;
height : 18%;
border : none;
}
#img3 img:hover
{
width :100%;
height : 98%;
border: 3px solid blue;
}
#img4
{
position : absolute;
margin-top:400px;
left : 230px;
margin-left : 480px;
}
#img4 img
{
width : 18%;
height : 16%;
border : none;
}
#img4 img:hover
{
width :20%;
height : 18%;
border: 3px solid black;
}

/*formulaire */

.form {
 padding:1px;
 font-family : Century;
 width:500px;
 }

 .text
 {
 margin-left :50px;
 font-family:Comic sans MS;
 }
 
.input {
  width: 184px;
  font-weight:bold;
  font-family: Century, "Arial Black", "Times New Roman", Times, serif;
  border:1px solid black;
  background-color:#A6BEDE;
 }

.select {
 width :188px;
 font-weight: bold;
 font-family: Century, "Arial Black", "Times New Roman", Times, serif;
 background-color:#A6BEDE;
 }
 
 .option
 {
 width :185px;
 }
 
 .select :hover
 {
 background-color : green;
 }
 
.textarea {
 border:1px solid black;
 font-family: Century, "Arial Black", "Times New Roman", Times, serif;
 background-color:#A6BEDE;
 overflow : scroll;
 }
 
.submit
 {
font-family: Century;
font-weight:bold;
display:block;
margin-left:100px;
width:110px;
line-height:10px;
text-align:center;
color:black;
}

#tableau1
{
border :solid 1px #000000;
margin-left : 200px;
}
#tableau
{
border :solid 1px #000000;
margin-left : 100px;
}

.caption
{
font-weight:bold;
color:#00488C;
font-size:x-large;
margin-top :40px;
font-family:Century, "Arial Black", "Times New Roman", Times, serif;
margin-bottom: 20%;
}

.th
{
font-size : large;
color : black;
font-family : Bauhaus 93, "Arial Black", "Times New Roman", Times, serif;
}


.td
{
font-family:Century, "Arial Black", "Times New Roman", Times, serif;
text-align : center;
border :dotted 1px #000000;
background-color :#96BC2D;

}

.td1
{
font-family:Century, "Arial Black", "Times New Roman", Times, serif;
text-align : center;
border :dotted 1px #000000;
background-color :	#DCDCDC;

}

#pagination
{
	color:#00488C;
	font-size: 15px;
	font-family:Comic sans MS;
    font-weight:bold;	
	margin-left:50%;
	margin-top:4%;
}

.pagination:hover
{
	color: orange;
	font-size: 15px;
	font-family:Comic sans MS;
	font-weight:bold;
}

.pagination1
{
	color:#00488C;
	font-size: 15px;
	font-family:Comic sans MS;
    font-weight:bold;
	margin-left:0%;
	margin-top:4%;
}
.pagination1:hover
{
	color: orange;
	font-size: 15px;
	font-family:Comic sans MS;
	font-weight:bold;
}

/*partie droite */
#partiedroitehaut
{
   margin-top :-47px;
   text-align:center;
   float : right;
   font-family : Century,"Times New Roman","Arial Black",Times,sherif;
   width : 21%;
   border-style: double;
   border-color : black;
}
.marquee
{
text-align: center;
font-family : Century,"Times New Roman","Arial Black",Times,sherif;
}
.imageactu
{
margin-top :1px;
float : right;
width :100%;
background-image :url("img/actualité.jpg");
}


#partiedroitebas
{
   text-align :center;
   font-family : Century,"Times New Roman","Arial Black",Times,sherif;
   float : right;
   margin-right :-26%;
   margin-top : 22%;
   width : 21%;
   height: 21%;
   border-style: double;
   border-color : black;
}
.imagepartenaire
{
float:right;
width : 100%;
background-image:url("img/partenaires.jpg");
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{ 
   margin-bottom :-20px;
   height: 50px;
   text-align: center;
   color: white;
   background-color: #00488C;
   margin-top: -2px;
   border: 0px solid black;
}
   
#pied_de_page a
{
color : white;
}

#pied_de_page a:hover
{
color : orange;
}
#peid_de_page a:visited
{
color :black;
}
.element_pied_de_page
{
background-image :url("img/bandebas.jpg");
text-align : center;
}

HACKER 712 · Answer

Je vois que tu as utilisé les pourcentages !
C'est mieux comme ça.

Au fait, préciser la largeur et la hauteur de body est inutile...

Probleme de CCS

6 réponses

Votre réponse

Discussions similaires

Newsletters