Titre: div centré
Posté par: r88 le le 04-03-2012 a 11:19:19
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 |
Titre: Re:div centré
Posté par: WebVitrine le le 04-03-2012 a 12:20:12
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. |
Titre: Re:div centré
Posté par: r88 le le 04-03-2012 a 12:24:55
| Ok, alors comment faire un tableau qui sera toujours centré verticalement et horizontalement quelque soit la taille de l'écran ? |
Titre: Re:div centré
Posté par: WebVitrine le le 04-03-2012 a 12:29:54
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. |
Titre: Re:div centré
Posté par: WebVitrine le le 04-03-2012 a 12:31:54
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.. |
Titre: Re:div centré
Posté par: dandreaweb le le 04-03-2012 a 21:30:08
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 |
Titre: Re:div centré
Posté par: WebVitrine le le 04-03-2012 a 21:47:10
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 :) |
Titre: Re:div centré
Posté par: dandreaweb le le 04-03-2012 a 22:47:34
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 |
Titre: Re:div centré
Posté par: WebVitrine le le 04-03-2012 a 22:52:58
J'ai testé sur mon IE7
Les marges en valeur négative ne sont pas prisent en charge.
Alors 5.5 et 6 ;D
Tu m'excuseras d'en douter...
|
Titre: Re:div centré
Posté par: dandreaweb le le 04-03-2012 a 22:57:43
| Tester également IE7, 6 et 5.5. Je n'ai rien à gagner ;D |
Titre: Re:div centré
Posté par: WebVitrine le le 04-03-2012 a 23:01:36
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. |
Titre: Re:div centré
Posté par: dandreaweb le le 04-03-2012 a 23:13:04
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
|
Titre: Re:div centré
Posté par: WebVitrine le le 04-03-2012 a 23:17:54
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. |
Titre: Re:div centré
Posté par: integrateur web le le 06-03-2012 a 16:55:46
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 (http://www.pole-integration.fr) |
Titre: Re:div centré
Posté par: WebVitrine le le 06-03-2012 a 17:21:15
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. |
Titre: Re:div centré
Posté par: integrateur web le le 06-03-2012 a 17:39:26
Ne crie pas ! j’essaie juste de t'expliquer
Les tableaux ne sont pas bannis ni invalide w3c.
Ils servent sémantiquement à structurer des données tabulaires tout comme les nouveaux tag html5 qui servent à donner une valeur sémantique aux éléments et ainsi être facilement lisible par les moteurs de recherche. A chaque balise sa fonction !
Pour les cours non merci lol
http://www.pole-integration.fr/ (http://www.pole-integration.fr/)
|
Titre: Re:div centré
Posté par: WebVitrine le le 06-03-2012 a 18:00:26
Mon précédent message explique clairement que la majorité des webmasters, fraîchement sortis d'usine, ne jure que par des div car ils ne connaissent que ça... Chose inutile dans certains contextes. Le plus simple pour un novice reste l'utilisation de tableaux.
Tu as pourtant ta société, et donc professionnellement parlant, tu devrais le savoir...
Comment fais tu lorsque tu vends une prestation de site web à un client, et que celui ci souhaite avoir un backend pour créer d'autres pages ??? Tu lui apprends le CSS ainsi que le HTML 5 ?
Non ! Le plus simple pour lui reste l'utilisation de tableau pour réaliser sa mise en forme de ses futures pages.
Et pourquoi tu me parles de moteurs de recherche et de sémantique ? Cela n'entre pas en compte dans le référencement... Tant que ça reste valide W3C, il n'y a aucun problème de lisibilité pour le moteur de recherche.
J'ai pas trop envie de faire une joute verbale avec toi. Et surtout, je n'ai pas le temps.
Sur ce, bonne soirée.
EDIT : Excuse moi si tu as cru que je criais. Ça n'était pas mon intention ! Je suis juste super speed car beaucoup de boulot m'attend ! |
Titre: Re:div centré
Posté par: integrateur web le le 06-03-2012 a 18:16:13
Tu es fatiguant avec tes div. C'est fini le temps des tableaux c'est tout. tu vas à contre courant . On est deux a te démontrer une solution qui fonctionne mais tu es tellement de mauvaise fois, tu ne supporte pas avoir tort.
Si tu conseilles à tes clients de faire des tableaux c'est gravissime!
"Et pourquoi tu me parles de moteurs de recherche et de sémantique ? Cela n'entre pas en compte dans le référencement... Tant que ça reste valide W3C, il n'y a aucun problème de lisibilité pour le moteur de recherche"
>>il serait temps que tu décroches de ton boulot et que tu consacres ton temps à faire un peu de veille parce-que la c'est plus grave que ce que je ne pensais!
|
Titre: Re:div centré
Posté par: WebVitrine le le 06-03-2012 a 18:30:43
Surement deux novices ;D
Tu conseils quoi à tes clients ? D'apprendre le xhtml, le css, et pourquoi pas le php aussi, avec un peu de java et de jscript ? S'ils font appels à toi pour réaliser un site, c'est surement qu'ils n'ont pas le temps d'apprendre tous ces langages. Ce n'est pas leur métier. Le plus simple pour leur apprendre la mise en forme reste les tableaux ! Ils sont très loin d'être fini. Simplifier la vie de tes clients, ça n'est pas aller à contre courant.
A moins peu être que ce soit pour être sûr qu'ils restent et qu'ils passent toujours par toi pour faire des créations de page... Autant leur verrouiller l'accès pendant que tu y es !
| il serait temps que tu décroches de ton boulot et que tu consacres ton temps à faire un peu de veille parce-que la c'est plus grave que ce que je ne pensais! |
|
Évite d'insinuer se genre de connerie ! Comme si Google ou bing avait besoin de lire par sémantique pour pouvoir s'y retrouver... Je t'invite à discuter avec Olivier Duffez, il risque de t'apprendre beaucoup de chose. C'est comme quand on disait que la densité des mots clés dans une page web était très importante ! Pendant longtemps, des webmaster se sont gavés de cette connerie. On apprend aujourd'hui au grand jour que ça n'a jamais été prit en compte ! |
Titre: Re:div centré
Posté par: integrateur web le le 06-03-2012 a 18:45:51
Mais pourquoi détourne le sujet. On parle pas de clients la, on répond à une personne qui a besoin d'aide et ta solution n'est pas la bonne.
Pour mes clients je conseil et JE FAIS !
Ce n'est pas en sortant le nom d'un des plus grand spécialiste du référencement en France que tu vas impressionner ton monde puisque je lis ses articles régulièrement et ce qui est sur c'est qu'il n'échange pas avec toi !
Google aime de plus en plus les sites bien fait, sémantiquement structuré et optimisé, même si ce n'est qu'un critère parmi tant d'autre.
Bref on va s’arrêter la ! bonne continuation ^^ |
Titre: Re:div centré
Posté par: WebVitrine le le 06-03-2012 a 19:11:48
Depuis quand ma solution n'est pas bonne ?
A juste titre, l'utilisation des tableaux est toujours accepter en html. Ça fonctionne, c'est valide W3C, donc évite de dénigrer le boulot des autres de cette façon !
Et pour qui te prends tu pour venir juger de ce qui est gravissime ou pas ? Oui je conseils à mes clients de faire des tableaux car ils n'ont pas la connaissance et ils ne veulent pas perdre de temps avec ça. C'est loin d'être gravissime, au contraire de ce que tu dis. C'est la solution la plus simple pour eux lorsqu'ils ne savent se servir que du wysiwyg. Ils ne sont pas restreins à toujours passer par un prestataire pour évoluer. C'est grave que le client puisse évoluer sans payer en permanence ?
Je n'te juge pas, alors évite ce genre de réflexion ou d'insinuation !
Concernant Duffez, ce qui est sûr, c'est que tu devrais bavarder un peu plus souvent avec lui sur le forum.
Oui, c'est ça. Bonne continuation. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|