Probleme de DIV + CSS
Résolu
P-Xelle
Messages postés
39
Date d'inscription
Statut
Membre
Dernière intervention
-
P-Xelle Messages postés 39 Date d'inscription Statut Membre Dernière intervention -
P-Xelle Messages postés 39 Date d'inscription Statut Membre Dernière intervention -
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
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:
- Probleme de DIV + CSS
- Div c++ - Télécharger - Langages
- Enlever le soulignement d'un lien css ✓ - Forum CSS
- Remplacer #div/0 par vide ✓ - Forum Excel
- Css download - Télécharger - HTML
- Background color css ✓ - Forum CSS
10 réponses
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;
Il faut pas des guillemets dans url ? Genre :
background-image: url('wp-content/themes/theme_natie/images/fond.jpg');
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 !
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 !
salut,
si ton <div> ne sert à rien d'autre tu peux le faire directement sur <body>.
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 :
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.
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.
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.
}
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.
}
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
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
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...
<<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...
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 :
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/
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/
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 ?
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 ?
Non pas de version en ligne, désolé. :/
Ok, je vais essayer les float:left
EDIT :
En enlevant :
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 ?
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 ?
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.
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)
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)
