Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: [Résolu] CSS: faire un contour interne pour un div en 100% height et width  (Lu 15274 fois)

fablecrab

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 159
    • Voir le profil
    • E-mail

Bonjour a tous!

Je m'arrache les cheveux sur un cas en ce moment. Comment faire pour attribuer un contour INTERNE a un div dont la largeur et la hauteur sont de 100% (afin de faire un cadre epousant parfaitement l'ecran de tous types de resolutions)?

Le probleme est que si j'attribue un contour de 5px par ex, mon div fait mtn 100% de la largeur et de la hauteur de l'ecran + 5px de chaque cote... Ce qui pose probleme...
« Modifié: août 29, 2009, 12:48:41 pm par kriztho »
IP archivée

kriztho

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1490
    • Voir le profil
    • La veille techno du web
    • E-mail

En CSS 2.1, il n'y a pas la notion de contour interne.
L'épaisseur des contours s'ajoute à la largeur de la boite.
La largeur d'affichage est égale à la largeur du contenu (width) + le remplissage intérieur (padding) + les bordures (border) + les marges extérieures (border).
Même principe pour la hauteur.
IP archivée
______________________________________________________________
Je ne connais pas grand chose, mais je progresse...
[La veille techno du web] - [Histoire d'écrire de l'informatique]

kriztho

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1490
    • Voir le profil
    • La veille techno du web
    • E-mail

<style type="text/css">
body {
   margin: 0px;
   padding: 0px;
}
#boite {
   margin: 0;
   padding: 0;
   background: #0FF;
   border: 5px solid #03C;
}
</style>


<body>
<div id="boite">
  <p>Contenu de ma boite.</p>
</div>
</body>

Le problème reste pour la hauteur qui dépend du contenu de la boite.
IP archivée
______________________________________________________________
Je ne connais pas grand chose, mais je progresse...
[La veille techno du web] - [Histoire d'écrire de l'informatique]

kriztho

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1490
    • Voir le profil
    • La veille techno du web
    • E-mail

Information supplémentaire avec petite recherche dans la norme W3C des CSS, la hauteur en pourcentage d'une boite est proportionnelle à son élément conteneur.
Si tu as une boite 1 qui contient une boite 2, si la boite 2 à une hauteur de 100% , elle sera égale à 100% de la hauteur de la boite 1.
Si ta boite est à la racine du document HTML, l'élément conteneur sera à priori le <body>. Car chaque navigateur est libre de déterminer le bloc conteneur racine et ces caractéristiques.
IP archivée
______________________________________________________________
Je ne connais pas grand chose, mais je progresse...
[La veille techno du web] - [Histoire d'écrire de l'informatique]

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail

Aussi pour avoir une hauteur de 100 %, il faut que tous les éléments parents aient une taille précisée.

Si on donne un height:100%; à une div contenue directement dans le body et que la hauteur du body n'est pas spécifiée, le height de l'élément fille ne s'applique pas.
De la même manière, le body ne fera pas 100 % si on ne spécifie pas que la balise html est aussi à 100 % en hauteur.
« Modifié: août 28, 2009, 15:36:55 pm par edfred »
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

kriztho

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1490
    • Voir le profil
    • La veille techno du web
    • E-mail

Petite boduille avec deux boites imbriquées et positionnées :

<style type="text/css">
body {
   margin: 0;
   padding: 0;
}
#conteneur {
   position:absolute;
   width:100%;
   height:100%;
   left:0;
   top:0;
   background-color: #0F3;
}
#boite {
   position:relative;
   margin: 0 auto;
   width:95%;
   height:95%;
   background-color:#FFF;
}
</style>
</head>
<body>
<div id="conteneur">
  <div id="boite">
    <p>Contenu de la boite</p>
  </div>
</div>
</body>
</html>
IP archivée
______________________________________________________________
Je ne connais pas grand chose, mais je progresse...
[La veille techno du web] - [Histoire d'écrire de l'informatique]

kriztho

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1490
    • Voir le profil
    • La veille techno du web
    • E-mail

Effectivement Edfred, le fait de spécifier la hauteur de <html> est nécessaire, mais les bordures posent toujours problèmes : elles "débordent" à droite et à gauche.

html {
   height: 100%;
}
body {
   height: 100%;
   margin:0;
}
#boite {
   height:100%;
   width:100%;
   background-color:#0F0;
   border: solid 5px #006;
}
p {
   margin:0;
}


<body>
<div id="boite">
  <p>Contenu de la boite</p>
</div>
</body>
« Modifié: août 28, 2009, 15:55:24 pm par kriztho »
IP archivée
______________________________________________________________
Je ne connais pas grand chose, mais je progresse...
[La veille techno du web] - [Histoire d'écrire de l'informatique]

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail

Oui oui, les bords sont toujours à l'extérieur.

Tu cites à mon avis la seule solution possible à savoir utiliser le conteneur comme contour... Mais le pourcentage impliquera une différence entre les bords haut / bas et gauche/droite selon quel e client visite sous un format d'écran 4/3 ou large (16/9 ou 16/10)
« Modifié: août 28, 2009, 16:01:59 pm par edfred »
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

fablecrab

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 159
    • Voir le profil
    • E-mail

Merci beaucoup pour votre aide!

En fait le fait de faire un div qui épouse toute la fenêtre ne pose pas de prob en utilisant le body comme conteneur de base. Le problème vient vraiment de cette histoire de contour qui dépasse de la fenêtre...

Que veut tu dire par utiliser le conteneur de base comme contour? Je pensais aussi à un truc dans le genre, mais je ne comprends pas comment faire...
IP archivée

Eddy

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 3239
  • Éternel apprenti.
    • Voir le profil
    • Scriptopedia.org
    • E-mail

Tu passes par exemple une DIV à 100 % en couleur de fond noir
Dans cette DIV, tu en insères une autre à 98% de hauteur et largeur et tu la centres.
La DIV mère passera comme un contour de la DIV fille.
IP archivée
Config : I-Mac 27" Core I5 12Go RAM - OSX 10.10.X

kriztho

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1490
    • Voir le profil
    • La veille techno du web
    • E-mail

Citation de: fablecrab
mais je ne comprends pas comment faire
Regarde le code que j'ai donné en exemple à la réponse #6.
L'imbrication des élément est clairement indiquée :
<body>
#conteneur
#boite
Le div #boite étant plus petit que le div #conteneur, tu vois alors en "arrière-plan" la couleur de fond de #conteneur, qui fait office de contour.
IP archivée
______________________________________________________________
Je ne connais pas grand chose, mais je progresse...
[La veille techno du web] - [Histoire d'écrire de l'informatique]

fablecrab

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 159
    • Voir le profil
    • E-mail

Ok je vais me pencher dessus merci beaucoup! :)
IP archivée
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum