Probleme de DIV + CSS

Résolu/Fermé
P-Xelle Messages postés 39 Date d'inscription lundi 9 février 2009 Statut Membre Dernière intervention 8 mai 2009 - 9 févr. 2009 à 11:27
P-Xelle Messages postés 39 Date d'inscription lundi 9 février 2009 Statut Membre Dernière intervention 8 mai 2009 - 10 févr. 2009 à 09:41
Bonjour,

Tout d'abord, voici mon code :

Page php :
<div id="page">
..... d'autres DIV
</div>


CSS :
#page {
margin-left: auto;
margin-right: auto;
background-image: url(wp-content/themes/theme_natie/images/fond.jpg);
}



Je cherche à mettre une image en background de ma div "page". Avec cela, ça ne s'affiche pas.
Ensuite je voudrais qu'elle contienne toutes les autres div de ma page afin de tout centrer quelque soit la taille de la fenêtre du navigateur.
Enfin, je travail en local donc l'url de mon image de fond et bon.


Je suis actuellement en stage donc sans vouloir faire le "boulet" j'aimerais une réponse assez rapide SVP, car j'ai besoin d'avancer sur mon projet (à rendre dans 1semaine/1semaine et demi).

Merci beaucoup pour le coup de pouce ! =D
A voir également:

10 réponses

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
9 févr. 2009 à 11:32
Enfin, je travail en local donc l'url de mon image de fond et bon. 

L'un n'implique pas forcement l'autre...
Vérifie quand même.

ce que je fais parfois pour vérifier le positionnement de mes div c'est d'y rajouter momentanément un cadre (border).
Exemple:
border:1px solid #000; 
1
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
9 févr. 2009 à 11:30
Il faut pas des guillemets dans url ? Genre :
background-image: url('wp-content/themes/theme_natie/images/fond.jpg'); 
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
9 févr. 2009 à 11:36
Non pas besoin dans ce cas.
0
remi3211 Messages postés 479 Date d'inscription dimanche 15 juin 2008 Statut Membre Dernière intervention 21 novembre 2015 54
9 févr. 2009 à 11:33
dans ce cas insère la mais ne la met pas en background, met la direct dans ton fichier html.
pour cela :
<img style="border: 0px solid ; width: longueur en px; height: largeur en px;" alt="" src="nom.attribut">
exemple:
<img style="border: 0px solid ; width: 180px; height: 40px;" alt="" src="films.bmp">


et pas besoin de css !
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
9 févr. 2009 à 11:38
salut,

très mauvais conseil.
à ne pas suivre !

0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
9 févr. 2009 à 11:36
salut,

si ton <div> ne sert à rien d'autre tu peux le faire directement sur <body>.
body{
width:800px; /* à adapter */
margin:0 auto;
background-image:url(tonimage.jpg);
background-position:50% 0;
background-repeat:no-repeat;
}

si l'image ne s'affiche pas, vérifie ton ciblage en appliquant une propriété bidon et en voyant si elle s'applique bien :
body{
border:1px solid red;
}

si cette propriété s'applique c'est que l'URL de l'image est mauvaise. si ton style est dans une feuille de style distincte et qu'elle est contenue dans un dossier, ajoute "../" au début de ton URL.
les guillemets ne sont pas obligatoires pour l'URL.
0

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

Posez votre question
Bonjour,

pour centrer une div de façon compatible tous navigateurs, il suffit de donner une taille fixe à cette div puis de lui donner des valeurs de margin droite et gauche en "auto".

/* par exemple */

#page {
width: 700px; // à modifier selon le résultat voulu
margin: 0 auto; // cette notation désigne les valeurs de marign haut et bas pour le premier chiffre puis gauche et droit pour le suivant.
}
0
remi3211 Messages postés 479 Date d'inscription dimanche 15 juin 2008 Statut Membre Dernière intervention 21 novembre 2015 54
9 févr. 2009 à 11:40
il veut mettre en fond de page ou insérer l'image ??
car si c'est en fond de page jme suis trompé tu as raison dalida
parce que je peux t'aider si c'est en fond de pâge
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
9 févr. 2009 à 11:42
Il cherche visiblement à la mettre en fond d'une div qui sert de container a d'autre div.
0
P-Xelle Messages postés 39 Date d'inscription lundi 9 février 2009 Statut Membre Dernière intervention 8 mai 2009 2 > arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016
9 févr. 2009 à 11:51
Exact ! :)
0
P-Xelle Messages postés 39 Date d'inscription lundi 9 février 2009 Statut Membre Dernière intervention 8 mai 2009 2
9 févr. 2009 à 11:51
arthezius :
<<ce que je fais parfois pour vérifier le positionnement de mes div c'est d'y rajouter momentanément un cadre (border). >>
Je fais la même avec des background de couleur ^^

remi3211 :
C'est en fond de DIV !


Oui Dalida, je vais tester en fond de page pour voir, je vous tiens au jus.
Mais en fait je ne peux pas le laisser en fond de page car j'ai besoin que l'image soit toujours derrière ms autres div même quand je redimensionne...
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
9 févr. 2009 à 12:03
je vais tester en fond de page pour voir
ça c'est juste pour simplifier le HTML.
sinon fais exactement la même chose avec ton <div>.

et pour l'image, si elle ne s'affiche toujours pas regarde du côté de l'URL, ça doit manquer de point point barre…
0
P-Xelle Messages postés 39 Date d'inscription lundi 9 février 2009 Statut Membre Dernière intervention 8 mai 2009 2
9 févr. 2009 à 13:17
Alors...

J'ai testé avec l'image en fond :
body { ...
etc.

Ca ne fonctionne pas.
j'ai rajouté les bordure, et là je m'aperçois que la div ne prends pas toutes mes div ! (elle laisse "left" et "content")

Voici la hiérarchie des div :

dans mon fichier header.php :
<div id="page">
       <div id="header">
              <div id="logo"></div>
              <div id="band_menu">
                     <div id="bandeau"></div>
                     <div id="menu"></div>
               </div>
               </div>
         </div>

// la div "page" se ferme sur ma page index que voici :

<?php get_header(); ?>// appel de la page header.php
      <div id="left"></div>
     <div id="content">
            <div id="text_present"></div>
            <div id="cadre1"></div>
     </div>

</div>  // fermeture de la div "page"


J'ai suivit un tuto pour créer des templates de wordpress donc le fait que ma div "page" soit coupé est normal, à priori.
Même sans êrte coupée, elle ne prends que mon entete.

EDIT : en fait l'image s'affiche avec l'url : http://localhost:8888/....bla bla bla.../images/fond.jpg
Seulement ca reste dans ma div "header" !

Voici un schéma de ma page :
https://imageshack.com/
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
9 févr. 2009 à 13:24
re,

la div ne prends pas toutes mes div !
doit y avoir du flottement pour les <div> contenus essaie de lui ajouter {float:left;}.

as-tu une version en ligne ?
0
P-Xelle Messages postés 39 Date d'inscription lundi 9 février 2009 Statut Membre Dernière intervention 8 mai 2009 2
9 févr. 2009 à 14:00
Non pas de version en ligne, désolé. :/

Ok, je vais essayer les float:left

EDIT :
En enlevant :
float: left;

des DIV "content" et "left" et ma DIV "page" les prends.
Seulement maintenant "content" et "left" sont l'une au dessous de l'autre !

Je pense qu'il faudrait rajouter encore une div qui englobera "content" + "left" + ma 3eme DIV que je dois rajouter par la suite et qui les mettra bien en place. (e vais tester) !

Mais ca ne fait pas trop de DIV ?? y'a t'il une limite à respecter étant donnée que mes DIV sont toutes utiles à la mise en page ?
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922 > P-Xelle Messages postés 39 Date d'inscription lundi 9 février 2009 Statut Membre Dernière intervention 8 mai 2009
9 févr. 2009 à 17:59
y'a t'il une limite à respecter étant donnée que mes DIV sont toutes utiles à la mise en page ?
théoriquement non.
les <div> ne servent qu'à organiser le contenu et à faire de la mise en page.
Les éléments DIV et SPAN, en conjonction avec les attributs id et class, offrent un mécanisme générique qui rajoute de la structure aux documents. Ces éléments définissent le contenu comme étant en-ligne (SPAN) ou de bloc (DIV) mais n'imposent aucune autre expression de présentation sur le contenu. Ainsi, les auteurs peuvent utiliser ceux-ci en conjonction avec les feuilles de style, l'attribut lang, etc., pour exploiter HTML selon leurs besoins et leurs goûts propres.

source

mais bon, faut pas non plus pousser et tomber dans l'excès de balises (soupe de tags).
cela complique ton code, donc c'est plus difficile à coder et à maintenir et ça finit par noyer la structure.
mais dans ton cas, on en est loin !

bon courage pour la suite !
-;o)
0
P-Xelle Messages postés 39 Date d'inscription lundi 9 février 2009 Statut Membre Dernière intervention 8 mai 2009 2 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
10 févr. 2009 à 09:41
Ok d'acc' merci ! ;)
0
P-Xelle Messages postés 39 Date d'inscription lundi 9 février 2009 Statut Membre Dernière intervention 8 mai 2009 2
9 févr. 2009 à 15:19
Bon ca à l'air d'être bon tout ca.
Merci à vous tous ;)

Bonne continuation !
tchô
0