Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

Pages : 1

#1 Le 12/07/2010, à 15:17

TheCaméléon

[Résolu] Problème de border en CSS

Bonjour !

Je ne sais pas si c'est la bonne catégorie, mais bon, il fallait bien choisir, alors j'ai pris celle-ci wink

Je développe actuellement un site web (php), parlant de tout et de rien (en ce moment plutôt rien étant donné qu'il n'est pas fini ^^). Ce sera surtout des geekeries, et des choses en rapport avec Ubuntu.

Je suis actuellement occupé à (re)faire le design et je rencontre un problème assez étrange, que je n'arrive pas à résoudre (même après une journée entière de tests)... Ne trouvant vraiment rien, je sollicite des connaisseurs wink

Le design du site est assez épuré et tout le "contenu" est centré (dans un gros "block")(page centré, pas le texte). Pour tout centrer, proprement, j'ai dans un premier temps, centré de <html> avec "margin-auto". Ça marche... aucun problème, mais si je veux mettre un fond d'écran ça ne passe pas car il faut alors un bloc parent pour lui appliquer le background, or html est le bloc le principal et n'a donc pas de parent.
J'ai donc essayé de mettre TOUT le site dans un <div> et de lui donner le style qui était avant donné à <html>. Mais là, je bloque... j'ai modifié le css, mais un truc vraiment bizarre se produit : le html prend plus que 100% de largeur, même si je mets tous les margin et padding à 0. En fait le problème est dû aux bordures. En effet sur le site j'utilise une bordure de 37 pixels (une de chaque côté, faites donc un total de 2x37px de bordures horizontalement). Or ces bordures ne se "décomptent" pas de la largeur, et viennent s'ajouter à la largeur, agrandissant le <html>, mais pas la <div> ni le <body>...

Là est le problème, et je ne sais vraiment pas à quoi c'est dû :S J'ai lu à gauche à droite qu'on ne pouvait pas changer les margin du <body> étant donné que c'est le div qui donne la largeur de référence à la page. je ne peux donc pas utiliser <body> pour centrer ma page, et c'est pour ça que j'utilise <html> ou une <div>

Pour voir ce que ça donne : [Edit : liens morts]
> <html> centré (sans problème)
> <div> centré (avec problème)

Sur les 2 j'ai mis le <html> en rouge et le <body> en rose.



Merci d'avance
TheCaméléon

Dernière modification par TheCaméléon (Le 31/07/2010, à 19:40)

Hors ligne

#2 Le 13/07/2010, à 12:58

chopinhauer

Re : [Résolu] Problème de border en CSS

body { overflow-x: hidden; }

fait ce que vous voulez. Sinon il y a aussi moyen de jouer avec des marges et padding négatifs.

Personnellement je trouve votre version sans fond coloré beaucoup plus élégante et lisible.

Pensez à donner un bon titre à vos sujets : cela permettra d'aider d'autres utilisateurs dans votre même situation. Ce n'est pas qu'en donnant des solutions qu'on aide, mais aussi en posant des bonnes questions et… facilement trouvables.

Hors ligne

#3 Le 13/07/2010, à 16:30

Mathieu147

Re : [Résolu] Problème de border en CSS

Bonjour,

Je pense que la meilleure solution est de mettre tout le site dans un DIV, et de styler ce div. Ensuite, il faut appliquer des styles à la balise body pour mettre un fond.

Les bordures ne sont pas comprises dans le calcul de la largeur, ni le padding. Donc si on a un DIV avec une largeur de 300px, des bordures de 10px et un padding de 15px, la largeur totale de ce DIV sur l'écran sera de 300+10×2+15×2=350px.

(à noter que les anciennes versions de IE comptent différement)

L'élément HTML a une largeur de 100%, donc en lui ajoutant des bordures de 37 pixels, on arrive à une largeur totale de 100%+2×37 pixels.


Quel est l'effet final auquel tu veux arriver?

Pffff…

Hors ligne

#4 Le 14/07/2010, à 10:12

TheCaméléon

Re : [Résolu] Problème de border en CSS

Merci pour vos réponses big_smile

En fait je désire obtenir http://pictuga.0dollarwebspace.com/ (page centrée avec <html>), mais je désire garder la possibilité d'ajouter un fond d'écran à la page, d'où la nécessité d'utiliser un <div>.
Je ne connaissais pas la variante overflow-x (mais je connaissais overflow wink), je vais m'en servir dans un premier, temps et j'essayerais ensuite d'utiliser des margins/padding négatifs. J'ai déjà fait qq essais avec les margins/paddings négatifs, mais pour l'instant le succès n'a pas été au rendez-vous...

@chopinhauer : les fond d'écrans colorés sont très "moches", mais visibles... pratiques pour repérer les différents élément de type block sur une page de test wink

Pour l'instant je suis en vacances, je m'occuperai des tests de retour wink

Edit : html { overflow-x : hidden } div { margin-bottom : -74px; } est parfait wink
mais il faut voir ce que ça donne si le navigateur n'affiche pas les border-image... (ex internet explorer)

Merci encore pour vos conseils, je vous tiendrai au courant lorsque je me pencherai à nouveau sur le problème.

Dernière modification par TheCaméléon (Le 14/07/2010, à 10:19)

Hors ligne

#5 Le 31/07/2010, à 19:40

TheCaméléon

Re : [Résolu] Problème de border en CSS

Pour finir, je me suis contenté d'utiliser un overflow-x wink
Je n'ai pas beaucoup testé les margin/paddings négatifs car ça marchait déjà sans...

Hors ligne

Pages : 1