Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1110 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Un site extensible

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Un site extensible

n°1945643
Goungo
Posté le 29-11-2009 à 12:13:51  profilanswer
 

Bonjour,
Je suis nouveau sur le site.
Je cherche à réaliser un site en prenant comme base une maquette que j'ai réalisé sur Photoshop.
 
En gros, il est constitué de trois balises div.
Une pour l'en-tête qui avec une image ne se répète pas.
Une pour le pied de page avec une image qui ne se répète pas.
 
Et au milieu, avec une image qui se répète en y pour pouvoir y mettre un texte.
Seulement, pour pouvoir cadrer le texte, je recrée une quatrième balise div à l'intérieur de celle du milieu, je règle les marges à droit et à gauche, mais quand je tape un texte avec <p> à l'intérieur de la quatrième balise, il me met un écart en haut et en bas avec la balise du milieu par rapport à l'en-tête et le pied de page.
 
Je sais pas si j'ai été clair...  
 
_________________
 
Voici une petite image pour vous faire comprendre :
http://img42.imageshack.us/img42/9182/capturegp.th.png

mood
Publicité
Posté le 29-11-2009 à 12:13:51  profilanswer
 

n°1946047
Goungo
Posté le 30-11-2009 à 18:42:54  profilanswer
 

Voulez-vous que je donne mes codes ?
 
Je pense que c'est un problème de padding, mais je sais pas comment le corriger... :/

n°1946159
gatsu35
Blablaté par Harko
Posté le 01-12-2009 à 09:39:19  profilanswer
 

Goungo a écrit :

Voulez-vous que je donne mes codes ?

 

Je pense que c'est un problème de padding, mais je sais pas comment le corriger... :/


C'est n'est pas un problème mais un comportement naturel des CSS. On appelle cela le traping margin
http://www.maxdesign.com.au/presen [...] lide47.htm
les marges du <p> se retrouvent reportées sur le div parent.
le mieux c'est de mettre un padding de 1px en haut et en bas du div qui contient le p ou bien appliquer du contexte de formatage sur ce div.
overflow:hidden; zoom:1


Message édité par gatsu35 le 01-12-2009 à 09:39:50

---------------
Blablaté par Harko
n°1946437
Goungo
Posté le 01-12-2009 à 20:50:36  profilanswer
 

Oh, merci beaucoup, je pensais que ça venait de mon codage !

n°1947685
Goungo
Posté le 06-12-2009 à 15:01:42  profilanswer
 

J'ai un autre problème avec mon site...
En fait, je souhaiterai avoir ma barre de menu qui arrive ainsi :
http://img37.imageshack.us/img37/787/sanstitre1jd.th.jpg
 
Seulement, elle se place en haut du site comme ceci :
http://img707.imageshack.us/img707/212/sanstitre3v.th.jpg
 
Alors que dans Dreamweaver, avec mon code, elle se place correctement :
http://img109.imageshack.us/img109/4364/sanstitre2sy.th.jpg
 
 
 
Je ne vois pas trop d'où peut venir le problème... :/


Message édité par Goungo le 06-12-2009 à 20:09:21
n°1947704
gatsu35
Blablaté par Harko
Posté le 06-12-2009 à 17:01:00  profilanswer
 

CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE CODE


---------------
Blablaté par Harko
n°1947707
Goungo
Posté le 06-12-2009 à 17:18:58  profilanswer
 

CSS :

Code :
  1. body{
  2. width:100%;
  3.  background-color: #eeeeee;}
  4. .bloc1 {
  5.   height: 332px; 
  6.   width: 979px;
  7. background-image: url(image/haut.jpg);
  8.   background-repeat: no-repeat; 
  9.   margin-left: auto;
  10.   margin-right: auto;
  11. }
  12. .bloc2 {
  13.   width: 979px;
  14.   height: auto
  15.   background-image: url(image/milieu.jpg);
  16.   background-repeat: repeat-y;
  17.   margin-left: auto;
  18.   margin-right: auto;
  19. }
  20. .bloc3 {
  21.   height: 285px; 
  22.   width: 979px;
  23.   background-image: url(image/bas.jpg);
  24.   background-repeat: no-repeat;
  25. margin-left: auto;
  26. margin-right: auto;
  27. }
  28. .bloc4 {
  29. position: absolute;
  30. left: 214px;
  31. top: 165px;
  32. width: 594px;
  33. height: 309px;
  34. margin-left: auto;
  35. margin-right: auto;
  36. }
  37. .Texte2 {
  38. font-family: Georgia, "Times New Roman", Times, serif;
  39. font-size: 18px;
  40. font-style: normal;
  41. line-height: normal;
  42. font-weight: normal;
  43. font-variant: normal;
  44. text-transform: none;
  45. text-align: justify;
  46. margin-left: 20%;
  47. margin-right: 18%;
  48. padding-bottom: 1px;
  49. padding-top: 1px;
  50. }
  51. .Menu {
  52. text-align: center;
  53. height: 49px;
  54. width:  560px;
  55. margin-left: 23%;
  56. margin-right: 22%;
  57. padding-bottom: 1px;
  58. padding-top: 1px;
  59. background-repeat:no-repeat;
  60. background-image:url(image/menu.png);
  61. position:static;
  62. margin-top:20%;
  63. }


 
C'est le truc en gras qui fait tout décaler je crois...
 
XHTML :

Code :
  1. <body>
  2.  <div class="bloc1">
  3.        <div class="Menu"><a href="index.html"><img src="image/accueil.png" width="75" height="49" alt="Accueuil Cabinet Strauss - Expert Comptable" border="0" /></a><a href="contact.html"><img src="image/contact.png" width="82" height="49" border="0" alt"contact" /></a></div>
  4. </div>
  5.  <div class="bloc2">
  6.    <div class="Texte2">
  7.      <h2>M'illumina l'immenso
  8.               - Giuseppe Ungaretti - </h2>
  9.      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.</p>
  10.           </div>
  11. </div>
  12.     <div class="bloc3"></div>
  13.     </div>
  14. </body>


Message édité par Goungo le 06-12-2009 à 20:08:44
n°1947724
Goungo
Posté le 06-12-2009 à 20:09:55  profilanswer
 

J'ai posté mon code, j'ai recherché.
En fait, je ne comprends pas pourquoi quand j'augmente le margin-top, tout le site se décale alors que c'est celui d'une balise à l'intérieur d'une autre balise div dont la hauteur est fixe.
 


Message édité par Goungo le 06-12-2009 à 20:14:23
n°1947896
Goungo
Posté le 07-12-2009 à 13:53:48  profilanswer
 

Problème réglé, en rajoutant "overflow:auto;" dans le bloc1.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Un site extensible

 

Sujets relatifs
(resolu) Problème de positionnement d'un bouton CSSProblème d'administration avec site professionnel
[CSS]mettre des boites les unes en dessous des autresLien imprimer basculant vers une autre feuille CSS
[CSS] Question de mise en page/structure générale (résolu)Création de logiciel pour site internet
Lien vers un emplacemet spécifique dans une page d'un autre sitequel genre de solution(s) pour mon projet de site web?
[HTML/CSS/Javascript] Calcul coté client avec visualisationCherche docu CSS (mise en page "basique")
Plus de sujets relatifs à : [CSS] Un site extensible


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR