28172 sujets

CSS et mise en forme, CSS3

Cadrer un conteneur sur une image d'arrière plan

Bonjour,
J'ai cherché longtemps, longtemps d'où venait mon problème et essayer plusieurs solutions mais ne voit pas d'où vient le problème. Smiley sweatdrop
Voilà, j'ai décidé de mettre une image d'arrière plan dans le body, je l'ai centrée sur la page.
Sur cette image d'arrière plan je souhaiterai placer un cadre (container) dans lequel se trouve toutes les infos concernant mon expo. Je sais que je pourrai mettre des marges mais le souci est que je travaille sur un petit écran et lorsque j'essaierai sur un grand la mise en page se cassera la gueule.
Je vous joint le lien pour que vous voyez ce que je veux dire:http://www.livre-poitoucharentes.org/Escales/testbody.php

ainsi que mon code css
html { margin-top:0;
margin-left: 0;
margin-right:0;
margin-bottom:0;
padding: 0;
}

body {background-image:url(../image/fondpac.jpg);
background-repeat:no-repeat;
width:775px;
height:620px;
background-position:center center;
text-align:center;
}

#containertest{background-color:red;
width:600px;
height:200px;
text-align:center;
background-position: center center;
}
et mon code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html;charset=ISO-8859-1"http-equiv="content-type" />
<title>test body</title>
<link href="CSS/screen2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="CSS/print.css" rel="stylesheet" type="text/css" media="print" />


</head>

<body>

<div id="containertest">
<p>jhfjdhjhriuhrehuhfjhnhiughreuhgvhrguhuhugrhu</p>
</div>


</body>
</html>

Aidez-moi svp, ça me prendre la tête car je suis sûr que c un truc tout couillon.
merci Smiley biggrin
Modifié par hb4 (04 Jun 2009 - 17:18)
Bonjour hb4 Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour Benjamin D>C,

a écrit :
html { margin-top:0;
margin-left: 0;
margin-right:0;
margin-bottom:0;
padding: 0;
}

remplace les quatres margin par margin:0; se sera plus simple.

a écrit :

body {background-image:url(../image/fondpac.jpg);
background-repeat:no-repeat;
width:775px;
height:620px;
background-position:center center;
text-align:center;
}

Pourquoi mettre deux fois center pour background-position??? Un seul sufie Smiley cligne D'ailleurs pour partout ou tu as mis deux fois center tu peut semplement en mettre un. Mais pour ton body il n'est pas utile puisque le body fait la taille de ton image de fond il me semble. Du coup si tu centre le body tu n'a plus besoin de centrer l'image de fond.

Enfin pour resoudre ton probleme je pense qu'un margin: 0px auto; dans ton #containertest et body devrait fair l'affair...
En gros voila ce que ca donne

html { margin:0;
padding: 0;
font-size: 100%; /* Pour evite un bug d'IE 6-7.*/
}

body {background-image:url(../image/fondpac.jpg);
background-repeat:no-repeat;
width:775px;
height:620px;
margin:0px auto;
}

#containertest{background-color:red;
width:600px;
height:200px;
margin:0px auto;
text-align:center;
}


test et dit nous si ca fonctionne.
Au passage fait ce que le gentil modo t'a dit se sera plus simple pour t'aider
Modifié par Dim (04 Jun 2009 - 13:42)
Hello Dim,

Dim a écrit :
Bonjour Benjamin D>C,
C'est sympa de vouloir dépanner Benjamin mais que fais-tu de hb4 ? Smiley lol
Veuillez m'excuser pour ce manque de civisme mais il est vrai que je n'avais pas tout compris et de plus c ma première fois sur un forum. Mais aucune excuse et vraiment désolé. Je réessaye.
Voici mon code css:

html { margin-top:0;
margin-left: 0;
margin-right:0;
margin-bottom:0;
padding: 0;
}

body {background-image:url(../image/fondpac.jpg);
background-repeat:no-repeat;
width:775px;
height:620px;
background-position:center center;
text-align:center;
}

#containertest{background-color:red;
width:600px;
height:200px;
text-align:center;
background-position: center center;
}

et voici mon code html

<body>
<div id="containertest">
<p>jhfjdhjhriuhrehuhfjhnhiughreuhgvhrguhuhugrhu</p>
</div>
</body>
</html>


Je vais essayer les indications de dim et indiquerai si ça marche.
C ok pour la mise en forme?
C vraiment génial le code est presque parfait car mon image d'arrière plan n'était plus placé au centre.
J'ai donc ajouté un background position: center dans le body et ça passe.
Merci de votre aide et encore mille excuses. Smiley confused
a écrit :
Veuillez m'excuser pour ce manque de civisme

Quel manque de civisme?? Smiley confus Celui de ne pas avoir lu les consignes avant? olala Smiley hum Mais bon c'est toujours pas corrige. En faite il faut que tu edit ton premier message avec la petite icone edit. Comma ca le premier post sera dans les regles. Smiley cligne

Sinon effectivement si ton image de fond est moin large que le body qui la contient sa position initial sera celle du coin en haut a gauche. Donc effectivement un background-position: center resout le probleme du positionnement horizontal.

Bon courage pour la suite.
Modifié par Dim (04 Jun 2009 - 15:26)
Sujet clos
Aller à