La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  div centré
« Précédent Suivant »
Pages: [1] 2 Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: div centré  (Lu 4762 fois)
div centré
« sur: le 04-03-2012 a 11:19:19 »
r88
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 38





Voir le Profil
Répondre avec citation

Bonjour,
Sur une page d'accueil, je veux qu'il y ai un div de largeur 500 et hauteur 100 qui soit toujour centré en hauteur et largeur par rapport l'écran.
Que l'écran soit petit ou grand, je veux que mon div soit toujours au milieu.
Pouvez vous me dire comment cela car je ne trouve pas.
Merci d'avance

Rapporter au modérateur  

Apprenti webmaster

Re:div centré
« Répondre #1 sur: le 04-03-2012 a 12:20:12 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Centrer à proprement parlé une div verticalement n'est pas possible. Il y a certes un attribut en css pour le faire mais cela n'est pas compatible avec tous les navigateurs.

Une solution est de jouer avec des tableaux au lieu de div.

« Dernière Édition: le 04-03-2012 a 23:41:10 par WebVitrine » Rapporter au modérateur  

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:div centré
« Répondre #2 sur: le 04-03-2012 a 12:24:55 »
r88
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 38





Voir le Profil
Répondre avec citation

Ok, alors comment faire un tableau qui sera toujours centré verticalement et horizontalement quelque soit la taille de l'écran ?

Rapporter au modérateur  

Apprenti webmaster
Re:div centré
« Répondre #3 sur: le 04-03-2012 a 12:29:54 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Juste une piste :

Tu créer un tableau à 3 colonnes et 3 lignes, avec une largeur et une hauteur de 100%.
Tu donnes une largeur de cellule de 10% (par exemple) à ta première et troisième colonne.
Tu donne aussi une hauteur de cellule de 10% ou 20% (c'est au choix) à ta première et troisième ligne.

Rapporter au modérateur  

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:div centré
« Répondre #4 sur: le 04-03-2012 a 12:31:54 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Je t'invite à lire ceci pour en savoir plus.
http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

Il y a toutes les réponses dans ces articles..

Rapporter au modérateur  

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:div centré
« Répondre #5 sur: le 04-03-2012 a 21:30:08 »
dandreaweb
P'tit nouveau
**

Hors-Ligne

Sexe: Male
Messages: 124



dandreaweb

Voir le Profil    WWW    E-Mail
Répondre avec citation

Bonjour r88,
Je vous propose cette solution en div :

code html :

<div id="bloc">
  <p> Votre contenu  </p>
</div>

Code css:
    #bloc {   
   position: absolute;
   top: 50%;
   left: 50%;
   height: 100px;
   margin-top: -50px;
   width: 500px;
   margin-left: -250px;
   background:#000000;
   color:#FFFFFF;
      }

Je vous ai mis un fond noir avec une contenu de couleur blanche pour que vous voyez mieux.
Si votre bloc s'aggrandit ou se réduit, jouer avec les marges
Cordialement

« Dernière Édition: le 04-03-2012 a 21:39:43 par dandreaweb » Rapporter au modérateur  

Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618
Re:div centré
« Répondre #6 sur: le 04-03-2012 a 21:47:10 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Préviens le que ça n'est pas compatible avec tous les navigateurs...
C'est pas une fois qu'il aura tout fini, qu'il faudra lui dire

Rapporter au modérateur  

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:div centré
« Répondre #7 sur: le 04-03-2012 a 22:47:34 »
dandreaweb
P'tit nouveau
**

Hors-Ligne

Sexe: Male
Messages: 124



dandreaweb

Voir le Profil    WWW    E-Mail
Répondre avec citation

Bonsoir WebVitrine,
Ce code est testé sur les principaux navigateurs ( inclus IE 5.5 et 6 ), je préfère le faire à chaque fois que je propose une solution sur le fofo ou lorsque je crée un site. Si vous trouvez un navigateur qui ne le supporte pas je suis prêt à vérifier de nouveau pour éventuellement proposer une autre alternative.
Cordialement

Rapporter au modérateur  

Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618
Re:div centré
« Répondre #8 sur: le 04-03-2012 a 22:52:58 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

J'ai testé sur mon IE7
Les marges en valeur négative ne sont pas prisent en charge.

Alors 5.5 et 6 
Tu m'excuseras d'en douter...

Rapporter au modérateur  

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:div centré
« Répondre #9 sur: le 04-03-2012 a 22:57:43 »
dandreaweb
P'tit nouveau
**

Hors-Ligne

Sexe: Male
Messages: 124



dandreaweb

Voir le Profil    WWW    E-Mail
Répondre avec citation

Tester également IE7, 6 et 5.5. Je n'ai rien à gagner 

Rapporter au modérateur  

Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618
Re:div centré
« Répondre #10 sur: le 04-03-2012 a 23:01:36 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Dans notre métier, tu ne peux pas t'appuyer uniquement sur les versions que tu as d'installer chez toi...
J'ai testé sur le IE7 de mon windows server 2003, et les marges sont annulées.

Et il y a encore beaucoup plus simple que le premier exemple que j'ai proposé...
Créer un tableau width 100% height 100% horizontal-align middle et vertical-align center.
Ensuite tu insères un tableau width 100% ou 90 ou 80 (ou une largeur fixe; selon ton envie) à l'intérieur du premier tableau.
C'est à mon goût le plus simple.

« Dernière Édition: le 04-03-2012 a 23:43:22 par WebVitrine » Rapporter au modérateur  

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:div centré
« Répondre #11 sur: le 04-03-2012 a 23:13:04 »
dandreaweb
P'tit nouveau
**

Hors-Ligne

Sexe: Male
Messages: 124



dandreaweb

Voir le Profil    WWW    E-Mail
Répondre avec citation

Personnellement je garde les tableaux uniquement pour présenter des éléments tabulaires.
J'ai de nombreux outils pour tester sur différents navigateurs et leurs versions antérieures.
Voilà on va pas débattre toute la nuit car on n'en finira pas.
A chacun de tester ce code et de se faire son opinion.
Cordialement

Rapporter au modérateur  

Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618
Re:div centré
« Répondre #12 sur: le 04-03-2012 a 23:17:54 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Les tableaux sont encore très utiles
Le css ayant été créé pour les éléments de structure répétitif sur plusieurs pages, il est toujours plus simple d'utiliser des tableaux lorsqu'ils sont uniques.

Bonne soirée.

Rapporter au modérateur  

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Re:div centré
« Répondre #13 sur: le 06-03-2012 a 16:55:46 »
integrateur web
Membre récent
*

Hors-Ligne

Messages: 5





Voir le Profil    E-Mail
Répondre avec citation

Tout a fait d'accord avec la solution de dandreaweb. les tableaux sont dédiés aux données tabulaires. c'est donc sémantique incorrect.
De la à faire n'importe quoi pour des navigateurs vieux comme le monde et qui ne sont plus utilisés.
la solution: positionner l’élément en absolute à 50% puis marge négative équivalente à la moitié de sa hauteur dans son parent également positionné en relatif

#div2 {
   height:100px;
   background: #0C9;
   width:50px;
   margin:auto;
   position:absolute;
   top:50%;
   margin-top:-50px;
}
#div1 {
   height:300px;
   width:800px;
   border:1px solid red;
   position:relative;
}
</style>

<div id="div1">
    <div id="div2">
    </div>
</div>

www.pole-integration.fr

Rapporter au modérateur  
Re:div centré
« Répondre #14 sur: le 06-03-2012 a 17:21:15 »
WebVitrine
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 639



Critique Mastery Max level !

Voir le Profil    WWW    E-Mail
Répondre avec citation

Sémantique incorrecte ? Tu dois sortir tout juste de l'école non ?

Les tableaux reste valide W3C !

J'ai pas trop le temps de te donner un court de HTML. Mais avant le CSS, tout ce faisait par tableaux. Ainsi que la mise en forme de structure.

Depuis le CSS, tout le monde ne jure que par des div. Une div par ci, une div par là, tiens, on va mettre une div aussi là...
Il ne faudrait pas oublier que les div ont été inventées principalement pour simplifier la gestion d'éléments de structure répétitifs.

A vous écouter, on dirait que tout se fait par des div.
Elles ne sont pas obligatoires !

Les tableaux restent toujours d'actualité lorsqu'ils sont uniques ! Ils restent simples d'utilisation et sont parfaitement compatibles avec tous les navigateurs.

Alors avant de dire que c'est une sémantique incorrecte, renseigne toi un plus. Il existe de beaux sites comme alsacréation qui t'apprendront à maîtriser cela.

« Dernière Édition: le 06-03-2012 a 19:26:35 par WebVitrine » Rapporter au modérateur  

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] 2 Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg