Retour à Forum de site web

Calques / CSS me NUTS!

  • Zpoon
  • Novice
  • Novice
  • Avatar de l’utilisateur
  • Inscription: Mar 20, 2004
  • Messages: 32
  • Loc: Norway
  • Status: Offline

Message Avril 7th, 2004, 3:18 pm

http://ariel.norlinux.com/~philodox/dogs/

Pourquoi ne pas élargir la DIV principal à la baisse car le contenu ne doit pas?

Mon code CSS:

Code: [ Select ]
body {
    margin: 0;
    padding: 0;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    width: 100%;
    height: 100%;
}

.main {
    background-image: url(images/styleset1/bg1.gif);
    background-position: top;
    background-repeat: repeat-x;
    position: absolute;
    background-color: #EEEEEE;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
}

.head {
    background-color: #F1F1F1;
    z-index: 1;
    position: absolute;
    width: 50%;
    height: 120px;
    left: 25%;
    right: 25%;
    top: 0px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.content {
    background-color: #F1F1F1;
    z-index: 2;
    position: absolute;
    width: 50%;
    height: inherit;
    left: 25%;
    right: 25%;
    top: 120px;
    bottom: 16px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.content2 {
    padding: 15px 0px 15px 0px;
}

.foot {
    background-color: #F1F1F1;
    z-index: 3;
    position: absolute;
    width: 50%;
    left: 25%;
    right: 25%;
    bottom: 0px;
    height: 16px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.border_left {
    background-image: url(images/styleset1/border.png);
    background-repeat: repeat-y;
    height: 100%;
    width: 15px;
    position: absolute;
    left: 25%;
    top: 0px;
    bottom: 0px;
    z-index: 4;
}

.border_right {
    background-image: url(images/styleset1/border.png);
    background-repeat: repeat-y;
    height: 100%;
    width: 15px;
    position: absolute;
    right: 24%;
    top: 0px;
    bottom: 0px;
    z-index: 5;
}

.header {
    background-image: url(images/styleset1/head.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 40%;
    position: absolute;
    left: 30%;
    right: 30;
    top: 0px;
    z-index: 6;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.linkbox1 {
    padding: 5px 7px 5px 7px;
    border-left: 1px dashed #777777;
    border-right: 1px dashed #777777;
    border-top: 1px dashed #777777;
    border-bottom: 1px dashed #777777;
    position: absolute;
    z-index: 7;
    left: 27%;
    top: 200px;
    width: 20%;
  height: 200px;
    overflow: auto;
}

.linkbox2 {
    padding: 5px 7px 5px 7px;
    border-left: 1px dashed #777777;
    border-right: 1px dashed #777777;
    border-top: 1px dashed #777777;
    border-bottom: 1px dashed #777777;
    position: absolute;
    z-index: 8;
    right: 27%;
    top: 200px;
    width: 20%;
}

.h1 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: 600;
}
  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4.     color: #000000;
  5.     font-family: Verdana, Arial, Helvetica, sans-serif;
  6.     font-size: x-small;
  7.     width: 100%;
  8.     height: 100%;
  9. }
  11. .main {
  12.     background-image: url(images/styleset1/bg1.gif);
  13.     background-position: top;
  14.     background-repeat: repeat-x;
  15.     position: absolute;
  16.     background-color: #EEEEEE;
  17.     color: #000000;
  18.     font-family: Verdana, Arial, Helvetica, sans-serif;
  19.     width: 100%;
  20.     height: 100%;
  21. }
  23. .head {
  24.     background-color: #F1F1F1;
  25.     z-index: 1;
  26.     position: absolute;
  27.     width: 50%;
  28.     height: 120px;
  29.     left: 25%;
  30.     right: 25%;
  31.     top: 0px;
  32.     color: #000000;
  33.     font-family: Verdana, Arial, Helvetica, sans-serif;
  34. }
  36. .content {
  37.     background-color: #F1F1F1;
  38.     z-index: 2;
  39.     position: absolute;
  40.     width: 50%;
  41.     height: inherit;
  42.     left: 25%;
  43.     right: 25%;
  44.     top: 120px;
  45.     bottom: 16px;
  46.     color: #000000;
  47.     font-family: Verdana, Arial, Helvetica, sans-serif;
  48. }
  50. .content2 {
  51.     padding: 15px 0px 15px 0px;
  52. }
  54. .foot {
  55.     background-color: #F1F1F1;
  56.     z-index: 3;
  57.     position: absolute;
  58.     width: 50%;
  59.     left: 25%;
  60.     right: 25%;
  61.     bottom: 0px;
  62.     height: 16px;
  63.     color: #000000;
  64.     font-family: Verdana, Arial, Helvetica, sans-serif;
  65. }
  67. .border_left {
  68.     background-image: url(images/styleset1/border.png);
  69.     background-repeat: repeat-y;
  70.     height: 100%;
  71.     width: 15px;
  72.     position: absolute;
  73.     left: 25%;
  74.     top: 0px;
  75.     bottom: 0px;
  76.     z-index: 4;
  77. }
  79. .border_right {
  80.     background-image: url(images/styleset1/border.png);
  81.     background-repeat: repeat-y;
  82.     height: 100%;
  83.     width: 15px;
  84.     position: absolute;
  85.     right: 24%;
  86.     top: 0px;
  87.     bottom: 0px;
  88.     z-index: 5;
  89. }
  91. .header {
  92.     background-image: url(images/styleset1/head.jpg);
  93.     background-repeat: no-repeat;
  94.     background-position: center;
  95.     width: 40%;
  96.     position: absolute;
  97.     left: 30%;
  98.     right: 30;
  99.     top: 0px;
  100.     z-index: 6;
  101.     border-left: 1px solid #000000;
  102.     border-right: 1px solid #000000;
  103.     border-bottom: 1px solid #000000;
  104. }
  106. .linkbox1 {
  107.     padding: 5px 7px 5px 7px;
  108.     border-left: 1px dashed #777777;
  109.     border-right: 1px dashed #777777;
  110.     border-top: 1px dashed #777777;
  111.     border-bottom: 1px dashed #777777;
  112.     position: absolute;
  113.     z-index: 7;
  114.     left: 27%;
  115.     top: 200px;
  116.     width: 20%;
  117.   height: 200px;
  118.     overflow: auto;
  119. }
  121. .linkbox2 {
  122.     padding: 5px 7px 5px 7px;
  123.     border-left: 1px dashed #777777;
  124.     border-right: 1px dashed #777777;
  125.     border-top: 1px dashed #777777;
  126.     border-bottom: 1px dashed #777777;
  127.     position: absolute;
  128.     z-index: 8;
  129.     right: 27%;
  130.     top: 200px;
  131.     width: 20%;
  132. }
  134. .h1 {
  135.     font-family: Geneva, Arial, Helvetica, sans-serif;
  136.     font-weight: 600;
  137. }


N'importe qui avez des idées?
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Avril 7th, 2004, 3:18 pm

  • b_heyer
  • Web Master
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juin 15, 2003
  • Messages: 4583
  • Loc: Maryland
  • Status: Offline

Message Avril 7th, 2004, 3:35 pm

Lequel est votre div principal? Vous pouvez essayer de
Code: [ Select ]
height : auto;
Pixel Acres V2
  • Zpoon
  • Novice
  • Novice
  • Avatar de l’utilisateur
  • Inscription: Mar 20, 2004
  • Messages: 32
  • Loc: Norway
  • Status: Offline

Message Avril 7th, 2004, 3:38 pm

essayé, n'ont pas aidé...

Code: [ Select ]
.content {
  background-color: #F1F1F1;
  z-index: 2;
  position: absolute;
  width: 50%;
  height: inherit;
  left: 25%;
  right: 25%;
  top: 120px;
  bottom: 16px;
  color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
  1. .content {
  2.   background-color: #F1F1F1;
  3.   z-index: 2;
  4.   position: absolute;
  5.   width: 50%;
  6.   height: inherit;
  7.   left: 25%;
  8.   right: 25%;
  9.   top: 120px;
  10.   bottom: 16px;
  11.   color: #000000;
  12.   font-family: Verdana, Arial, Helvetica, sans-serif;
  13. }


Ceci est celui dont j'ai besoin pour développer je pense...
Ive a essayé height: 100%, height: auto et de la hauteur: inherit
Aucun d'entre eux travaillaient
  • b_heyer
  • Web Master
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juin 15, 2003
  • Messages: 4583
  • Loc: Maryland
  • Status: Offline

Message Avril 7th, 2004, 3:45 pm

bien en ce moment le "contenu" seulement div imbriqués dans ce texte, rien d'autre.
Pixel Acres V2
  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Déc 29, 2003
  • Messages: 5169
  • Loc: SC-USA
  • Status: Offline

Message Avril 8th, 2004, 12:28 pm

Je n'ai pas enquêter de manière approfondie, mais lorsque vous utilisez le positionnement en CSS, il prend l'objet de l'écoulement normal de rendre. Ainsi, alors que le contenu mai être imbriquées ne sont pas inclus dans les dimensions du contenant DIV.
- dM

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 5 messages
  • Utilisateurs parcourant ce forum: ScottG et 144 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC