| Cindows Profil : Modo | Bonjour à tous !
Je crée présentement un site web dans le cadre d'un projet scolaire.
Mon site comporte un arrière-plan pour la totalité du site mais également un arrière-plan pour le texte
Mon problème est que je souhaiterais que l'image qui sert d'arrière-plan s'étire selon le texte et non qu'elle se répète
J'ai déjà essayé plusieurs trucs comme le no-repeat mais l'image fini tout simplement et une partie du texte n'a plus d'arrière-plan
Toute aide est la bienvenue 
Edit: Le problème est que j'ai découpé mon fond (image) pour le corps (texte) en trois parties : celle du haut, celle du milieu (qui se répète) et celle du bas
Celle du milieu se répète très bien et celle du bas se colle à l'image du milieu ; le problème est que l'image du haut, elle , ne se colle pas avec l'image du milieu. Il demeure une espace verticale entre les deux images.
J'ai retiré le padding-top et tentez de retirer les floats mais je ne peux pas sinon la mascotte (image de points colorés pour l'instant) se retrouve au dessus du corps et vice-versa.
J'ai tenté de retirer la mascotte mais rien n'a changé ce qui signifie que le problème ne vient pas de là
Les codes HTML et CSS sont disponibles dans un de mes derniers messages du topic
Un grand merci à toute personne qui m'aidera
Message édité par Cindows le 09-04-2010 à 23:34:33
| |
benigone Profil : New Penguin | (Tin' 3h du mat' et j'fais du HTML, ou va le monde ?! ^^)
En fait il faut découper l'image en 3 :
- Une image (que tu peux mettre en arriere plan d'une div pour que ça soit plus pratique) pour le haut (tu prends le haut de ton image avec les arrondis du haut).
- Une div pour le texte (avec comme arriere plan de la div une image de 1px de haut qui se repete en y qu tu prends sur ton image de départ).
- Une image pour la bas (meme principe que celle du haut).
(en plus tu gagnes en perf parce que tu charges pas l'image entiere).
J'sais pas si j'ai été tres clair, hésite pas a me demander si tu vois pas c'que j'veux dire 
PS: Je sais pas si c'est la maniere la plus clean mais c'est pour moi la moins prise de tete ---------------
| |
Cindows Profil : Modo | Oui je crois bien avoir saisi ce que tu voulais dire !
En gros le haut et le bas de l'arrière-plan qui serait dans une div séparé sans repeat tandis que l'image du milieu se répètera verticalement
C'est bien ça ?
Sinon, je te remercie grandement de ton aide | |
benigone Profil : New Penguin | Voila c'est ça  ---------------
| |
Cindows Profil : Modo | Rebonjour !
Ça marche très bien sauf qu'il y a un espace entre l'image du haut et l'image du milieu (celle qui se repète)
J'ai tenté de voir si il y avait pas un margin-top avec mon corps ou un truc du genre mais apparement non donc je sais plus trop où chercher 
Voici mon code css si ça peut éclaircir :
Citation :
body
{
margin-top: 20px;
margin-bottom: 20px;
background-image: url("fond.png" );
background-attachment: fixed;
}
#en_tete
{
background-image: url("" );
}
.element_men
{
margin-top:150px;
margin-bottom:30px;
height: 74px;
display:block;
background-image: url("menu.png" );
background-repeat: no-repeat;
border:none;
}
.element_men img
{
padding-left:70px;
border:none;
height: 60px;
}
.accueil img
{
right:20px;
padding-right: 10px;
padding-top: 2px;
}
.macronutriments img
{
margin-right:30px;
}
.alicaments img
{
margin-left:20px;
}
#mascotte
{
float: right;
width: 150px;
padding-top: 120px;
}
h1
{
text-decoration:blink;
}
p
{
color: white;
}
#haut_corps
{
padding-top:40px;
margin-left:100px;
}
#corps
{
background-image: url("milieu_corps.png" );
margin-left: 100px;
float:left;
width: 936px;
text-align: center;
}
#bas_corps
{
margin-left:100px;
}
#pied_de_page
{
padding: 5px;
clear: both;
text-align: center;
}
|
En espérant que quelqu'un puisse m'aider !
---------------
| |
benigone Profil : New Penguin | C'est dans ton HTML que ça doit coincer. Je sais que si tu mets des balises h1 ou h2 ou meme p ça met des marges auto, donc pour remédier à ça faut que dans ton CSS tu mettes toutes les marges a 0 avec un #tadiv p, h1, h2 etc. {
margin: 0 0 0 0;
} Voila dis moi si ça marche PS: Apres pour placer ton texte etc faut te dépatouiller avec les paddings. ---------------
| |
Chaodam Everybody lies
Profil : Penguin Pro | benigone a écrit :
C'est dans ton HTML que ça doit coincer.
Je sais que si tu mets des balises h1 ou h2 ou meme p ça met des marges auto, donc pour remédier à ça faut que dans ton CSS tu mettes toutes les marges a 0 avec un
#tadiv p, h1, h2 etc. {
margin: 0 0 0 0;
}
Voila dis moi si ça marche
PS: Apres pour placer ton texte etc faut te dépatouiller avec les paddings.
|
Vaut mieux utiliser
* {
margin : 0;
padding :0;
}
Et placer ça au début de son fichier CSS ça va plus vite, et c'est quand même moins long à taper  (* désignant TOUT les éléments ne pas l'oublier) ---------------
Tweet me I'm famous - Last.fm, because music is my drug - Portfolio
| |
benigone Profil : New Penguin | Ah oui, bah ça me servira aussi, j'savais pas ^^ Merci Chaodam (et pour le 0 0 0 0 c'est pour me forcer a me rappeler dans quel ordre c'est ^^) ---------------
| |
Chaodam Everybody lies
Profil : Penguin Pro | | |
Cindows Profil : Modo | Merci du coup de pouce
Seulement, j'applique ça à quel div au début du fichier CSS ? Body ? ---------------
| |
MasterCloud Youkaïdi, youkaïda.
Profil : Animateur | Non, tu mets ça tel quel, dans ton fichier css
En gros, "*" -> Toutes les balises. Ca remet les balises au même niveau, un reset quoi  ---------------
Pour examiner la vérité, il est besoin, une fois dans sa vie, de mettre toutes choses en doute autant qu'il se peut. (René Descartes.)
| |
Chaodam Everybody lies
Profil : Penguin Pro | | |
Cindows Profil : Modo | Je voudrais bien uploader mon fichier sauf que le problème c'est que je ne sais pas comment
Je glisse donc mes deux codes ci-dessous en espérant que sa suffira !
Html:
Citation :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<link rel="stylesheet" media="screen" type="text/css" title="nutrali" href="index.css" />
<head>
<title>Nutrali</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="en_tete">
<!-- Laissez vide -->
</div>
<div class="element_men">
<a href="index.html" onMouseOver="document.accueil.src='menu_accueil2.png';"onMouseOut="document.accueil.src='menu_accueil.png';">
<img name="accueil" src="menu_accueil.png"> </a>
<a href="macronutriments.html" onMouseOver="document.macronutriments.src='menu_macronutriments2.png';" onMouseOut="document.macronutriments.src='menu_macronutriments.png';">
<img name="macronutriments" src="menu_macronutriments.png"> </a>
<a href="micronutriments.html" onMouseOver="document.micronutriments.src='menu_micronutriments2.png';" onMouseOut="document.micronutriments.src='menu_micronutriments.png';">
<img name="micronutriments" src="menu_micronutriments.png"> </a>
<a href="alicaments.html" onMouseOver="document.alicaments.src='menu_alicaments2.png';" onMouseOut="document.alicaments.src='menu_alicaments.png';">
<img name="alicaments" src="menu_alicaments.png"> </a>
</div>
<div id="haut_corps">
<img name="haut_corps" src="haut_corps.png">
</div>
<div id="mascotte">
<img title= "Bienvenue sur Nutrali!" src="te.png">
</div>
<div id="corps">
<h1>Accueil</h1>
<p>
Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege.<br/>
Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis,<br/>
Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem <br/>
colebat suosque omnes per se posse esse ampliores volebat.<br/>
<br/>
Hoc inmaturo interitu ipse quoque sui pertaesus excessit e vita aetatis nono anno atque vicensimo cum quadriennio imperasset. <br/>
natus apud Tuscos in Massa Veternensi, patre Constantio Constantini fratre imperatoris, matreque Galla sorore Rufini et Cerealis, <br/>
quos trabeae consulares nobilitarunt et praefecturae.<br/>
</p>
</div>
<div id="bas_corps">
<img name="bas_corps" src="bas_corps.png">
</div>
<div id="pied_de_page">
<p>Copyright 2010 , tous droits réservés</p>
</div>
</body>
</html>
|
CSS :
Citation :
*
{
margin :0;
padding :0;
}
body
{
margin-top: 20px;
margin-bottom: 20px;
background-image: url("fond.png" );
background-attachment: fixed;
}
#en_tete
{
background-image: url("" );
}
.element_men
{
margin-top:150px;
margin-bottom:30px;
height: 74px;
display:block;
background-image: url("menu.png" );
background-repeat: no-repeat;
border:none;
}
.element_men img
{
padding-left:70px;
border:none;
height: 60px;
}
.accueil img
{
right:20px;
padding-right: 10px;
padding-top: 2px;
}
.macronutriments img
{
margin-right:30px;
}
.alicaments img
{
margin-left:20px;
}
#mascotte
{
float: right;
width: 150px;
padding-top: 120px;
}
h1
{
text-decoration:blink;
}
p
{
color: white;
}
#haut_corps
{
padding-top:40px;
margin-left:100px;
}
#corps
{
background-image: url("milieu_corps.png" );
margin-left: 100px;
float:left;
width: 936px;
text-align: center;
}
#bas_corps
{
margin-left:100px;
}
#pied_de_page
{
padding: 5px;
clear: both;
text-align: center;
}
|
| |
benigone Profil : New Penguin | Essaye d'enlever tous les float. Ca c'est un truc que perso j'utilise le moins souvent possible a part pour mettre les listes a l'horizontal, j'trouve ça super galère a utiliser! Edit: a moins que ça vienne de ton padding-top de ton haut_corps (qu'est ce qu'il fait la d'ailleurs ce truc ? ^^)
Message édité par benigone le 01-03-2010 à 21:54:28
---------------
| |
Cindows Profil : Modo | Je sais pas trop ce qu'un padding-top fait là non plus 
Bref je l'ai viré mais toujours le même problème et impossible d'enlever tout les floats sinon c'est le bordel total dans ma page ---------------
| |
Cindows Profil : Modo | Je lance un petit up en rappelant les développements :
Le problème est que j'ai découpé mon fond (image) pour le corps (texte) en trois parties : celle du haut, celle du milieu (qui se répète) et celle du bas
Celle du milieu se répète très bien et celle du bas se colle à l'image du milieu ; le problème est que l'image du haut, elle , ne se colle pas avec l'image du milieu. Il demeure une espace verticale entre les deux images.
J'ai retiré le padding-top et tentez de retirer les floats mais je ne peux pas sinon la mascotte (image de points colorés pour l'instant) se retrouve au dessus du corps et vice-versa.
J'ai tenté de retirer la mascotte mais rien n'a changé ce qui signifie que le problème ne vient pas de là
Les codes HTML et CSS sont disponibles dans un de mes derniers messages du topic
Un grand merci à toute personne qui m'aidera ---------------
| |
Mutsu Carpe Diem
Profil : Penguin Pro | As tu essayé de mettre un margin-top négatif pour la div "corp" ?
Ou alors précise dans ton CSS la hauteur de ton image, peut être que le calibrage auto déconne.
Euh... aussi, je n'arrive pas du tout à repérer tes div... parce que je ne vois pas le nom de ton image...
Message édité par Mutsu le 09-04-2010 à 00:12:56
---------------
.::Mon iGloo::.  .::Mon Flickr::.
Hey mon ami ! T'aime ça la procrastination ? Viens Procrastiner en pixel avec graphic-guestbook !!!
| |
mitsuko-b No fue Shimatta !
Profil : Big Penguin | Cindows a écrit :
Un autre petit up étant donné que la date de remise du projet approche et que je n'ai toujours pas trouvé de solutions 
Le problème est donc ce petit espace qui demeure entre les deux images d'arrière-plan et qui est incompréhensible
Si quelqu'un aurait un peu de temps pour jeter un coup d'oeil sur mon code et tout sa sera grandement apprécié
Merci d'avance à toute personne 
|
Bonjour.
Je me suis permise de mettre en ligne votre code.
N'ayant pas les images de fond, j'ai simplement ajouté de la couleur à chaques div.
A première vue tout part en vrille.
A défaut d'avoir les images originales, pouvez-vous me donner les dimensions de celles-ci ?
C'est bien plus simple de voir comme cela se qui cloche plutôt que de lire du code...
Edit : contente que le problème ait été résolu.
Je supprime le lien...
Message édité par mitsuko-b le 10-04-2010 à 08:10:00
---------------
 .
| |
Mutsu Carpe Diem
Profil : Penguin Pro | | |
| |
