{CSS} Le contenu se balade

Résolu
alexislevrai Messages postés 603 Statut Membre -  
alexislevrai Messages postés 603 Statut Membre -
Lors du resize de ma page, le contenu se balade et ca me pose problème pour le positionement des images ...

Voyez plutôt: http://ww12.ma-douce.fr
Configuration: Mac OS X
Safari 528.16

12 réponses

  1.
    Eleth Messages postés 138 Statut Membre 17
     
    salut,

    donne nous ton code CSS pour qu'on puisse y voir un peu plus clair et ausi ce que tu as essayé précédemment histoire de ne pas donner des solutions probables que tu as déjà essayé.
    0
    1. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
       
      salut,

      et avec la version en ligne, tu ne trouves pas la CSS ?

      http://www.ma-douce.fr/css/style.css
      0
    2. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
       
      salut,

      avec une version en ligne, tu ne trouves pas la CSS ?

      un indice : 
      <link type="text/css" href="css/style.css" rel="stylesheet"/>
      0
  2. alexislevrai Messages postés 603 Statut Membre 51
     
    body {
	background-image:url(../img/madouce_1.jpg);
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000000;
	width:1100px;
    position: relative;
}

img { 
	 border:none; 
} 


#prochainement {
	position: relative;
    top: 180px;
    left: 340px;
}

#logo {
	position: absolute;
    top: 580px;
    left: 800px;
}


    Et donc j'ai essayé de mettre cela dans une div avec une position fixed et absolute aussi mais .. rien
    0
  3. Eleth Messages postés 138 Statut Membre 17
     
    Si tu veux tout centrer essaye çà : 
    body {
    background-image:url(../img/madouce_1.jpg);
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000000;
}

img { 
	 border:none; 
} 


#prochainement {
    position: absolute;
    top: 180px;
    margin: auto;
}

#logo {
    position: absolute;
    top: 580px;
    margin: auto;
}
    0
  4. alexislevrai Messages postés 603 Statut Membre 51
     
    Désolé j'avais pas vu ta réponse.

    Non Margin Auto fonctionne pas :S
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. alexislevrai Messages postés 603 Statut Membre 51
     
    personne ne peux m'aider ?
    0
  7. PhP Messages postés 1774 Statut Membre 606
     
    Bsr

    En trichant un peu tu peux faire 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Essai</title>
	<style>
	
	* { margin: 0; padding: 0; outline: 0; }
	
	body {
		background-color: #000000;
	}	
	
	img { 
		 border:none; 
	} 

	div#conteneur {
		background-image:url('img/madouce_1.jpg');
		background-position: top center;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-color: #000000;	
		width:1100px;
		height:736px;
		text-align:left;
		margin: auto;
		position: relative;
	}
	
	#prochainement {
		position: relative;
		top: 180px;
		left: 340px;
	}

	#logo {
		position: absolute;
		top: 580px;
		left: 760px;			
	}
	
	#credit {
		position: absolute;
		top: 718px;
		left: 80px;
		font-size: 0.6em;
		color: #989898;
		z-index:2;

	}

	a {
		 color: #585858;
		 text-decoration: none;
	}
	a:hover {
		 color: #989898;
		 text-decoration: none;
	}	
		
		
	#adresse {
		position: absolute;
		top: 410px;
		left: 432px;
		font-family: arial, helvetica, sans-serif ;
		z-index:2;
	}

	#myspace {
		position: absolute;
		font-size: 1.4em;
		font-family: arial, helvetica, sans-serif ;
		top: 455px;
		left: 490px;
		z-index:2;
	}

	#mail {
		position: absolute;
		top: 510px;
		left: 540px;
		font-family: arial, helvetica, sans-serif ;
		font-size: 0.8em;
		z-index:2;
	}		
	
	</style>
</head>
<body>
	<div id="conteneur">
		<img id="prochainement" src="img/prochainement.png"/>
		<img id="logo" src="img/logo.png"/>
		<span id="adresse"><a href="https://www.google.fr/maps?f=q&source=s_q&hl=fr&geocode&q=7+rue+Arnaud+Bernard+31000+Toulouse&sll=47.15984,2.988281&sspn=18.418028,40.429688&ie=UTF8&ll=43.609715,1.439145&spn=0.009571,0.019741&z=16&iwloc=A">7 rue Arnaud Bernard 31000 Toulouse - France</a></span>
		<span id="myspace"><a href="http://www.myspace.com/ma_douce">Visitez notre MySpace</a></span>
		<span id="mail"><a href="mailto:contact@ma-douce.fr">contact@ma-douce.fr</a></span>
		<span id="credit">Annabelle est photographiée par Benjamin Guindre</span>
	</div>
</body>
</html>
    --

    PhP  
    Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
    0
  8. alexislevrai Messages postés 603 Statut Membre 51
     
    Finalement j'ai triché :D

    Mais j'ai un problème avec mon serveur et le PHP je comprend pas pourquoi.

    SUr mon serveur, mon index était en .html, j'y accédait. Et là je passe en .php et j'obtient "403 Forbiden !You don't have permission to access".

    Pourtant mon fichier est en permission "755"
    0
  9. Eleth Messages postés 138 Statut Membre 17
     
    bon je vais refaire ton code à zero, à toi de l'interpréter et de le modifier en fonction de ton travail déjà effectué.

    Je vais partir de principe que tes images sont ainsi :
    madouce_1.jpg : 11000px de haut et 1300px de large
    tonimageannonce.jpg : 600px de haut et 800px de large
    tonimagemacherie.jpg : 70px de haut et 200px de large

    evidement se sont des mesures fantaisistes mais ainsi tu pourras adapter la suite à tes besoins.

    ne me demande pas pourquoi mais je préfère les class aux id
    ce qui donnerais en html : 

    <body>

<img class="fond" href="../img/madouce_1.jpg" title="fond.jpg" />
<img class="imageannonce" href="../img/tonimageannonce.jpg" title="annonce" />
<img class="imagemacherie" href="../img/tonimagemacherie.jpg" title="macherie" />

</body>


    et en CSS : 

    body {
    margin:0;
    padding: 0;
    background-color: #000000;
}

img { 
	 border:none; 
} 

.fond{
    height: 1100px;
    wight: 13000px;
    margin: auto;
    position: absolute;
    top: 10px;
}

.imageannonce {
    height: 600px;
    wight: 8000px;
    margin: auto;
    position: absolute;
    top: 180px;
}

.imagemacherie{
    height: 70px;
    wight: 2000px;
    margin: auto;
    position: absolute;
    top: 580px;
}


    je suis fatigué donc j'ai pas vérifié ... si ça ne marche pas et que tu as la patience d'attendre demain, je te ferais un truc béton au taff

    edit : j'ai pas vu ton dernier message quand j'ai écris ça. je vais dormir car il le faut bien ^^ je te répond demain :P
    0
  10. alexislevrai Messages postés 603 Statut Membre 51
     
    Ouais mais c'est pour quoi ca ?

    Pour que le contenu ne se promène pas ou pour l'image en aléatoire ?
    0
  11. Eleth Messages postés 138 Statut Membre 17
     
    pour que le contenu ne se promène pas
    0
  12. alexislevrai Messages postés 603 Statut Membre 51
     
    Actuellement j'ai mis un align left avec X px de marge.

    Mais si je met align: top center, mon vontenu lui reste fixe, il ne suit pas le background lorsqu'on redinentionne le navigateur.
    0
  13. alexislevrai Messages postés 603 Statut Membre 51
     
    J'ai touvé !!!

    ajouter
    margin:auto;
    dans ma balise body{}
    0

Discussions similaires

Contenue masqué
Hippolyte -
Hippolyte -

6 réponses
Contenu masqué HTML
Gus_6531 -
jordane45 -

2 réponses
Enlever le contenu masque
Julie17 -
Julie17 -

2 réponses
Message recurent : Un site est en train de lire vos données
marcm_54 -
Gg -

7 réponses
Messenger. Contenus multimédias
Anne -
Radinoz -

3 réponses