probleme affichage html Résolu/Fermé

Question

bonjour,

je suis entrain de creer un site, pour mon groupe de musique, et un probleme se pose.

les boites dans lesquelles je met mon texte se positionnent differement sur chaque pc sur lequel je teste mon site, donc tout se decale. je l'ai testé sur 3 pc et sur les 3 g un resultat different.

j'ai créé mon sit via dreamweaver, programme que j'apprends en cours du soir. donc je travaille sur mon site sur 2 pc differents, et quand je passe de l'un a l'autre tout est faussé... que faire?

merci pour vos lumieres.

LelLex · Answer

" les boites dans lesquelles " Oula !
Les balises, tu veux dire ; quelles sont-elles ?

La différence d'affichage est dû au PC, tu es sûr ? Non pas au calibre d'écran ? ( taille, résolution ).

Micka · Answer

oui ce sont des balises div donc j'ai créé des "boites" dans lesquelles je met mon texte. dans ma feuille de style, pour les utiliser sur mes differentes pages.

sinon oui c un probleme de resolution a mon avis, d'ailleurs quand je modifie la taille de mon navigateur mon image de fond se deplace  mais pas mes "boites" donc voila, j'aimerais que ca s'adapte a n'importe quelle resolution.

LelLex · Answer

Pour que ca s'adapte à n'importe quelle résolution, tu dois mettre toutes les valeurs en pourcentage : %

Tu as mi quoi dans ta feuille de style ?

Micka · Answer

@charset "utf-8";
/* CSS Document */




#container{padding: 0px 0px 0px 0px ;}html, body{}

html, body, #fullBanner, #container{background-color:#000; }#main{background-color:#000;}


#tout{
	position:center;
	padding:auto;
	background-color:#000;
	height:768px;
	width:1024px;
	margin-left:auto;
	margin-right:auto;
	border:none;
}
	
	
#menu{
	width:1024px;
	border:none;
	
}

#menu ul{
	list-style:none;
}

#menu li{
	float:left;
	list-style:none;
}

body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

#boite1{
position:absolute;
z-index:1;
left:195px;
top:272px;
height:477px;
width:310px;
background-color:none;
overflow-x: hidden; 
overflow-y: scroll;
font-size: 16px;


}

#boite2{
position:absolute;
z-index:2;
left:783px;
top:272px;
height:477px;
width:310px;
background-color:none;
overflow-x: hidden; 
overflow-y: scroll;
font-size: 16px;

}


#boite3{
	position:absolute;
	z-index:3;
	left:475px;
	top:360px;
	height:300px;
	width:400px;
	background-color:none;
	font-size:12px;
}

#boitebiosw{
	position:absolute;
	left:151px;
	top:244px;
	height:100px;
	width:100px;
	background-color:none;
}

#boitebioym{
	position:absolute;
	left:272px;
	top:349px;
	height:100px;
	width:100px;
	background-color:none;
}

#boitebiojh{
	position:absolute;
	left:449px;
	top:458px;
	height:100px;
	width:100px;
	background-color:none;
}

#boitebiomb{
	position:absolute;
	left:638px;
	top:561px;
	height:100px;
	width:100px;
	background-color:none;
}

#boitebiotb{
	position:absolute;
	left:828px;
	top:674px;
	height:100px;
	width:100px;
	background-color:none;
}


#boitelarks{
	position:absolute;
	left:145px;
	top:313px;
	height:25px;
	width:250px;
	background-color:none;
}

#boitetoys{
	position:absolute;
	left:145px;
	top:363px;
	height:25px;
	width:250px;
	background-color:none;
}

#boitelady{
	position:absolute;
	left:145px;
	top:413px;
	height:25px;
	width:250px;
	background-color:none;
}

#boiteepic{
	position:absolute;
	left:145px;
	top:463px;
	height:25px;
	width:250px;
	background-color:none;
}

#boitereveller{
	position:absolute;
	left:145px;
	top:513px;
	height:25px;
	width:250px;
	background-color:none;
}

#boitepicnic{
	position:absolute;
	left:752px;
	top:313px;
	height:25px;
	width:250px;
	background-color:none;
}

#boitesilent{
	position:absolute;
	left:752px;
	top:363px;
	height:25px;
	width:250px;
	background-color:none;
}

#boiteabyss{
	position:absolute;
	left:752px;
	top:413px;
	height:25px;
	width:250px;
	background-color:none;
}

#boiteurban{
	position:absolute;
	left:752px;
	top:463px;
	height:25px;
	width:250px;
	background-color:none;
}

#boiteburn{
	position:absolute;
	left:752px;
	top:513px;
	height:25px;
	width:250px;
	background-color:none;
}

#boitemyspace{
	position:absolute;
	left:802px;
	top:435px;
	height:100px;
	width:100px;
	background-color:none;
}

#boitefacebook{
	position:absolute;
	left:795px;
	top:562px;
	height:100px;
	width:100px;
	background-color:none;
}
	
#boiteprochainconcert{
	
	position:absolute;
	left:540px;
	top:600px;
	height:200px;
	width:200px;
	background-color:none;
}

#boitefond{
	
	position:absolute;
	position:center;
	padding:0px;
	top:218px;
	height:577px;
	width:1024px;
	margin-left: auto;
	margin-right: auto;
	border:none;
}

LelLex · Answer

J'ai eu peur que tu mettes tes div dedans. Donc au cas où. ;)
Donc tu mets tes valeurs px en % en changeant les valeurs bien sûr !

Micka · Answer

je dois ecrire % a la place de "px" c'est  ca?

parce que j'ai essayé et ca me donne un truc tout bizare...

chico95 · Answer

780px n'est pas égal a 780%, arrange toi pour retrouver ton ancien resultat !

Ou sinon arrète les position absolute en px !

Micka · Answer

ben en fait meme ca ne marchait pas et j'ai fini par reussir a obtenir mon resultat en changeant simplement tout ce qui etait top et left en margin-top et margin-left.

merci quand meme pour vos aides.

Probleme affichage html

8 réponses

Discussions similaires