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
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
A voir également:
- Probleme de DIV + CSS
- Div c++ - Télécharger - Langages
- Css download - Télécharger - HTML
- Css retour à la ligne - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum CSS
- Remplacer #div/0 par vide - Forum Excel
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
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;
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
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');
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
9 févr. 2009 à 11:36
Non pas besoin dans ce cas.
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
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 !
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 !
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
9 févr. 2009 à 11:38
salut,
très mauvais conseil.
à ne pas suivre !
très mauvais conseil.
à ne pas suivre !
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
9 févr. 2009 à 11:36
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.
}
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
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
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
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
9 févr. 2009 à 11:42
Il cherche visiblement à la mettre en fond d'une div qui sert de container a d'autre div.
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
9 févr. 2009 à 11:51
Exact ! :)
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
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...
<<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...
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
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…
ç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…
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
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 :
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/
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
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 ?
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 ?
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
9 févr. 2009 à 14:00
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 ?
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
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.
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)
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
10 févr. 2009 à 09:41
Ok d'acc' merci ! ;)
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
9 févr. 2009 à 15:19
Bon ca à l'air d'être bon tout ca.
Merci à vous tous ;)
Bonne continuation !
tchô
Merci à vous tous ;)
Bonne continuation !
tchô