[RESOLU]Problème lors de la mise en ligne,mise en page

Question

lilop

13 Jul 2005 à 16:54

Bonjour a tous!
Voilà je fais mon site perso et tout est nickel chez moi...j'ai donc voulu le mettre en ligne.
Probleme:ma mise en page est a l'ouest une fois sur internet,alors que chez moi ca marche super bien Smiley confus

Les images et les liens marchent tres bien,ca a l,air de venir plutot du CSS...
Voilà mon code...dites-moi si y a qqch qui cloche Smiley sweatdrop


body
{
   width: 760px;
   margin: auto; /* Pour centrer notre page */
   margin: 0 auto;
   background-image: url("fond_site.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc [langue] */
   background-repeat: no-repeat; /* Le fond ne se répètera que sur la première colonne, verticalement */
   
   }

 body a
 {
 text-decoration:none;
 }
 body h1
 {
 margin-top:5px;
 text-align:center;
 font-family: Arial, "Times New Roman", Verdana, serif;
 font-size:16px;
 text-decoration: underline;
 font-weight: normal;

 }
 body h2
 {
 margin-top:5px;
 text-align:left;
 font-family: Arial, "Times New Roman", Verdana, serif;
 font-size:13px;
 text-decoration: none;
 font-weight: normal;

 }
 h2 a
 {
 font-style:italic;
text-decoration: none;
color: #7B9941;
}
h2 a:visited /* Quand le visiteur a déjà vu la page concernée */
{
   text-decoration: none;
}
 h2 a:hover /* Quand on pointe sur un lien du menu */
{
 color: #99e352;
}
h2 a:active /* Quand le visiteur clique sur le lien */
{
color: #f7f74d
}

 body h4
 {
 text-decoration: none;
 margin-left:5px;
 text-align:center;
 font-family: Arial, "Times New Roman", Verdana, serif;
 font-size:13px;
 font-weight: normal;

 }
  body h5
 {
 text-decoration: none;
 margin-left:5px;
 text-align:left;
 font-family: Arial, "Times New Roman", Verdana, serif;
 font-size:13px;
 font-weight: bold;

 }

#post-it
{
   width: 5%;
   height: 200px;
   border-right: 8px double #F7F74D;
   border-bottom: 3px double #98E250;
   background-repeat: no-repeat;
   margin-bottom: 50px;
   
}
#post-it img
 {
 border:none;
 }


dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
	position : absolute;
	top: 65px;
	width:957px;
	margin-left:220px;
	height: 200px;
	left: 270px;
}
#menu a {
text-decoration: none;
color: #7B9941;
border: ridge;
border-left:2px solid #98E250;
border-top:2px solid #98E250;
/*image elements menu et ss menus*/
font-size: 100%;
}
#menu a:visited /* Quand le visiteur a déjà vu la page concernée */
{
   text-decoration: none;
}
#menu a:hover /* Quand on pointe sur un lien du menu */
{
 color: #99e352;
}
#menu a:active /* Quand le visiteur clique sur le lien */
{
color: #f7f74d
}

#menu dl {
float: left;
background-color: #fcfcfa;
border: 1px solid #99e352;
font-variant: small-caps;
font-family: Arial;
font-size:80%;
font-weight: bold;

text-align:right;
letter-spacing:1px center;
}
#menu li {
display: inline;
}
#smenu1, #smenu2, #smenu3, #smenu4 
{
	position: absolute;
	left: 40px;
	width:433px;
	top: 50px;
	font-family: Arial;
	font-size:75%;
	font-weight: bold;
}
#nouveautes {

color:#678435;
width: 20%;
height:250px;
border-left:3px double #98e250;
border-right: 3px double #F7F74D;
font-size:small;
}
#nouveautes img
 {
 border:none;
 }
.nouveautehaut
{
   height:10px;
   width:auto;
   margin:5px;
}

.nouveautebas
{
   text-align: center;
   width:auto;
	height:auto;
    margin:2px;
}

#pageencours
{

text-align:center;
color:#7B9941;
font-weight:bold;
float: left;
width: 30%;
border-right:1px solid	 #98E250;
border-bottom:1px solid #F7F74D;
margin-left:200px;
margin-top: -310px;
margin-bottom: 20px;
font-family: Arial, "Times New Roman", Verdana, serif;
}
#bloccentral
{
position:absolute;
text-indent: -30px;
text-align: justify;
color:#678435;
height:300px;
width: 70%;
margin-top: -250px;
margin-left: 200px;
border-left:5px double #98E250;
border-bottom:1px solid #F7F74D;
text-transform: normal;

}
#piedepage
{

text-align:left;
font-weight:bold;
margin-top: 30px;
margin-bottom: 20px;
font-family: Arial, "Times New Roman", Verdana, serif;
}
#piedepage a {
text-decoration: none;
color: #7B9941;
border-right:2px solid #98E250;
border-bottom:2px solid #98E250;
/*image elements menu et ss menus*/
font-size: 100%;
}
#piedepage a:visited /* Quand le visiteur a déjà vu la page concernée */
{
   text-decoration: none;
}
#piedepage a:hover /* Quand on pointe sur un lien du menu */
{
   color: #99e352;
}
#piedepage a:active /* Quand le visiteur clique sur le lien */
{
  color: #f7f74d
}

.image img
{

float:right;
 border:none;
 margin-right: 470px;
 margin-top: 110px;
border:1px solid #98E250;
 }
div#galerie
{	
	position:absolute;
	height:300px;
	width: 460px ;
	padding: 15px ;
	margin-top: -30px; 
	margin-left: 30px;
	text-align: center ;
	font: 1em arial, serif ;
}

#galerie_mini img
{	float:left;
 border:none;
 height:50px;
 width:40px;
 
	
}
ul#galerie_mini
{
	margin-top: 10px;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	float: left ;
}

ul#galerie_mini li a 
{
	margin: 2px 1px ;
	border: 1px solid #dcb ;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic 1em/1.5em arial, serif ;
	color: #7B9941 ;
	margin-bottom:10px;
	margin-left: 30px ;
}

dl#photo dd
{
	margin-bottom: 20px ;
	margin-left: 30px ;
}

dl#photo img
{	height:192px;
	border: 1px solid #dcb ;
}

J'ai essayé de rajouter le fameux position:absolute; là ou il n'y avait rien mais c pire!!
Aidez-moi que je puisse enfin le mettre en ligne! Smiley bawling

Merci

Modifié par lilop (15 Jul 2005 - 10:47)

lilop

14 Jul 2005 à 14:12

Personne peux m'aider???
Smiley bawling

Laurent Denis

14 Jul 2005 à 14:14

disons qu'une longue css sans le code html auquel elle s'applique n'est pas très parlante Smiley cligne

le mieux, puisque c'est en ligne, ce serait l'url .

lilop

14 Jul 2005 à 14:30

ok désolé!
http://florencepistre.ifrance.com/indexIE.html
En fait mon design est centré normalement...
cv en ligne centré a gauche
l image aleatoire sur la gauche centré aussi
le menu du haut est bien placé
le bloc nouveauté et le bloc central sont trop a gauche et se chevauchent...
Merci!

brunocaccio

14 Jul 2005 à 15:25

Pour centrer ta page :


position: absolute;
left: 50%;
margin-left: -375px;
height: auto;

Retire


margin: auto; /* Pour centrer notre page */
   margin: 0 auto;

D'ailleurs, tu dois mettre ça dans un div, pas dans body. Par exemple, tu créé un div nommé conteneur :


#conteneur {
	position: absolute;
	width: 750px;
	height: auto;		
	left: 50%;
	margin-left: -375px;	
}

Et bien sûr dans ta page HTML, tu devras ajouter le div conteneur juste après la balise body.
Pour le reste, il faudrait voir au fur et à mesure...
Modifié par brunocaccio (14 Jul 2005 - 15:30)

lilop

15 Jul 2005 à 10:46

Merci
Ct le coup de pas avoir mis de #conteneur qui faisait tout planter!!
Merci de m'avoir eviter d'y passer encore des heures et des heures!!!
Smiley biggrin

Sujet clos