Retour à Forum de site web

Qu'est-ce que je fais de mal? Nested DIV + float semble simple...

  • anticowboyism
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Mar 21, 2005
  • Messages: 11
  • Status: Offline

Message Août 4th, 2009, 8:52 pm

Im getting ceci: Image
mais je veux ceci: Image

Évidemment, le texte est fait baisser la div avec l'image circulaire. J'ai l'image flottante à droite et à l'intérieur du p. Je veux que le texte de couler le long du côté gauche de l'image, à l'image de repos en haut à droite. Ill afficher le code aussi afin que vous puissiez voir whats going on...

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="page_container">
 
  <div id="left_column"><img src="images/left_shadow.png" width="195" height="1024" /></div>
  <div id="main_column">
    <div id="header"><img src="images/nav_bar_top.jpg" width="635" height="32" /><img src="images/Header_Img.jpg" width="635" height="150" /></div>
    <div id="center_column"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <div id="circle_img"><img src="images/Header_circle.jpg" width="365" height="233" /></div>
        <div id="tag_img"><img src="images/tag_img.png" width="177" height="350" /></div>
        </p>
    </div>
    <div id="footer"><img src="images/Flash_place.jpg" width="635" height="116" /><img src="images/footer_img.jpg" width="635" height="143" /></div>
  </div>
  <div id="right_column"><img src="images/right_shadow.png" width="194" height="1024" /></div>
 
</div>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="style1.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="page_container">
  11.  
  12.   <div id="left_column"><img src="images/left_shadow.png" width="195" height="1024" /></div>
  13.   <div id="main_column">
  14.     <div id="header"><img src="images/nav_bar_top.jpg" width="635" height="32" /><img src="images/Header_Img.jpg" width="635" height="150" /></div>
  15.     <div id="center_column"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  16.         <div id="circle_img"><img src="images/Header_circle.jpg" width="365" height="233" /></div>
  17.         <div id="tag_img"><img src="images/tag_img.png" width="177" height="350" /></div>
  18.         </p>
  19.     </div>
  20.     <div id="footer"><img src="images/Flash_place.jpg" width="635" height="116" /><img src="images/footer_img.jpg" width="635" height="143" /></div>
  21.   </div>
  22.   <div id="right_column"><img src="images/right_shadow.png" width="194" height="1024" /></div>
  23.  
  24. </div>
  25. </body>
  26. </html>
  27.  


et le css

Code: [ Select ]
@charset "utf-8";
/* Intrinsic HTML Elements */
body{
    margin:0;
    padding:0;
    background-image: url(images/rustflakes_bkgd.jpg);
}
div{margin:0;padding:0;}
h1{margin:0;padding:0;}
h2{margin:0;padding:0;}
h3{margin:0;padding:0;}
p{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{list-style-type:none;}
 
/* Uniquely Identified Containers */
#page_container{
    margin: 0 auto;
    width: 1024px;
}
#left_column{
    width: 195px;
    float: left;
}
#main_column{
    float: left;
}
#header{
    background:#999;
    width: 635px;
}
#center_column{
    background:#FFF;
    width: 635px;
    height: 583px;
}
#footer{
    background:#999;
    width: 635px;
    clear: both;
}
#right_column{
    width: 194px;
    float: left;
}
#circle_img{
    float: right;
    width: 365px;
}
#tag_img{
    clear: right;
    float: right;
    width: 177px;
}
 
  1. @charset "utf-8";
  2. /* Intrinsic HTML Elements */
  3. body{
  4.     margin:0;
  5.     padding:0;
  6.     background-image: url(images/rustflakes_bkgd.jpg);
  7. }
  8. div{margin:0;padding:0;}
  9. h1{margin:0;padding:0;}
  10. h2{margin:0;padding:0;}
  11. h3{margin:0;padding:0;}
  12. p{margin:0;padding:0;}
  13. ul{margin:0;padding:0;}
  14. li{list-style-type:none;}
  15.  
  16. /* Uniquely Identified Containers */
  17. #page_container{
  18.     margin: 0 auto;
  19.     width: 1024px;
  20. }
  21. #left_column{
  22.     width: 195px;
  23.     float: left;
  24. }
  25. #main_column{
  26.     float: left;
  27. }
  28. #header{
  29.     background:#999;
  30.     width: 635px;
  31. }
  32. #center_column{
  33.     background:#FFF;
  34.     width: 635px;
  35.     height: 583px;
  36. }
  37. #footer{
  38.     background:#999;
  39.     width: 635px;
  40.     clear: both;
  41. }
  42. #right_column{
  43.     width: 194px;
  44.     float: left;
  45. }
  46. #circle_img{
  47.     float: right;
  48.     width: 365px;
  49. }
  50. #tag_img{
  51.     clear: right;
  52.     float: right;
  53.     width: 177px;
  54. }
  55.  


Merci pour toute aide!
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Août 4th, 2009, 8:52 pm

  • Fabinator
  • Proficient
  • Proficient
  • No Avatar
  • Inscription: Mai 05, 2007
  • Messages: 467
  • Status: Offline

Message Août 5th, 2009, 4:56 am

Positionnement absolu dans la position relative serait une bonne technique à utiliser dans ce cas. Si vous ajoutez position: relative; à #page_container dans votre CSS, vous pouvez utiliser position: absolute; à la position #circle_img et #tag_img exactement où vous voulez qu'ils soient.

Lisez ceci pour une explication: http://css-tricks.com/absolute-position ... sitioning/

Bonne chance
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Août 5th, 2009, 5:56 am

simplement mettre une
Code: [ Select ]
<div style="clear:both;"></div>
au bas de votre div contenant (après la balise recherchez chose). Le cercle ressemble à son dans l'emplacement correct pour moi.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • anticowboyism
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Mar 21, 2005
  • Messages: 11
  • Status: Offline

Message Août 5th, 2009, 2:01 pm

Merci pour les conseils! J'ai utilisé l'. Div qui fixe clairement l'une des questions du conteneur ne s'étendant pas vers le bas, car les deux images ont été avancées. Puis je me suis frustré et vient de créer 2 divs pour le texte sur le côté gauche et puis tout à gauche de manière à flotter ses tous empilés les uns contre les autres. Il semble fonctionner, mais j'ai essentiellement créé une table de divs, ce qui n'est pas terrible. Je pourrais essayer d'utiliser l'astuce de positionnement que vous avez mentionné la place...
  • anticowboyism
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Mar 21, 2005
  • Messages: 11
  • Status: Offline

Message Août 5th, 2009, 6:08 pm

Alors, j'ai essayé le positionnement absolu, maintenant que je sorte de le comprendre plus, mais il ya une bizarrerie bizarre dans IE6 qui met un espace 1px sur le bord droit des deux divs Je suis positionnement. Maintenant que je comprends de plus de flotter, je vais tenter à nouveau float ces 2 divs vers la droite, tout en ayant un débit normal de divs sur la gauche pour le texte. Cela fonctionne très bien dans Firefox, mais là encore IE6 me donne un mal de tête. Son poussant les deux divs texte sur la page plutôt que d'utiliser un flux normal autour de 2 divs flotté. Découvrez les images (Ive a teinté les divs 2 texte de sorte que vous pouvez voir whats happening):

Firefox est normal:
Image

IE6 est merdique:
Image

Donc, comme vous pouvez le voir, les divs sur la gauche sont à essayer de rétablir la flotte sur la droite quand ils ne devraient pas être de compensation. Le code:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="page_container">
 
  <div id="left_column"></div>
 
  <div id="center_column">
    <div id="header">
      <div id="nav_bar_top"></div>
      <div id="header_img"></div>
    </div>
    <div id="content_area">
      <div id="circle_img"><img src="images/Header_circle.jpg" width="365" height="233" /></div>
      <div id="tag_img"><img src="images/tag_img.png" width="177" height="350" /></div>
      <div id="main_text"></div>
      <div id="main_text2"></div>
      <div class="clear"></div>
    </div>
    <div id="footer">
      <div id="flash_holder"><img src="images/Flash_place.jpg" width="635" height="116" /></div>
      <div id="footer_img">
        <div id="footer_contact_wrapper"><p class="footer_contact">3rd Octave Theatricals   &nbsp; &nbsp; &nbsp; &nbsp;
      Los Angeles, CA 90004 &nbsp; &nbsp; &nbsp; &nbsp; </p></div>
      </div>
    </div>
  </div>
 
  <div id="right_column"></div>
  <div class="clear"></div>
</div>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link href="style1.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="page_container">
  11.  
  12.   <div id="left_column"></div>
  13.  
  14.   <div id="center_column">
  15.     <div id="header">
  16.       <div id="nav_bar_top"></div>
  17.       <div id="header_img"></div>
  18.     </div>
  19.     <div id="content_area">
  20.       <div id="circle_img"><img src="images/Header_circle.jpg" width="365" height="233" /></div>
  21.       <div id="tag_img"><img src="images/tag_img.png" width="177" height="350" /></div>
  22.       <div id="main_text"></div>
  23.       <div id="main_text2"></div>
  24.       <div class="clear"></div>
  25.     </div>
  26.     <div id="footer">
  27.       <div id="flash_holder"><img src="images/Flash_place.jpg" width="635" height="116" /></div>
  28.       <div id="footer_img">
  29.         <div id="footer_contact_wrapper"><p class="footer_contact">3rd Octave Theatricals   &nbsp; &nbsp; &nbsp; &nbsp;
  30.       Los Angeles, CA 90004 &nbsp; &nbsp; &nbsp; &nbsp; </p></div>
  31.       </div>
  32.     </div>
  33.   </div>
  34.  
  35.   <div id="right_column"></div>
  36.   <div class="clear"></div>
  37. </div>
  38. </body>
  39. </html>
  40.  


Code: [ Select ]
@charset "utf-8";
/* Intrinsic HTML Elements */
body{
    margin:0;
    padding:0;
    background-image: url(images/rustflakes_bkgd.jpg);
}
div{margin:0;padding:0;}
h1{margin:0;padding:0;}
h2{margin:0;padding:0;}
h3{margin:0;padding:0;}
p{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{list-style-type:none;}
 
/* Uniquely Identified Containers */
#page_container{
    margin: 0 auto;
    width: 1024px;
    position: relative;
}
#left_column{
    width: 195px;
    height: 1024px;
    float: left;
    background-image:url(images/left_shadow.png);
}
#center_column{
    float: left;
    width: 635px;
    position: relative;
}
#header{
    background:#999;
    width: 635px;
    height: 182px;
}
#nav_bar_top{
    background-image:url(images/nav_bar_top.jpg);
    height: 32px;
}
#header_img{
    background-image:url(images/Header_Img.jpg);
    height: 150px;
}
#content_area{
    background:#FFF;
    width: 635px;
    height: 583px;
}
#circle_img{
    width: 365px;
    float: right;
}
#tag_img{
    width: 177px;
    float: right;
    clear: right;
}
#main_text{
    width: 269px;
    height: 233px;
    background: #EEE;
}
#main_text2{
    width: 457px;
    height: 350px;
    background: #DDD;
}
#footer{
    background:#999;
    width: 635px;
}
#flash_holder{}
#footer_img{
    background-image:url(images/footer_img.jpg);
    height: 143px;
    position: relative;
}
#footer_contact_wrapper{
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
#right_column{
    width: 194px;
    height: 1024px;
    float: left;
    background-image:url(images/right_shadow.png);
}
 
/* Elements */
.clear{clear: both;}
.footer_contact {
    color: #FFFFFF;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    background-image: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    position: relative;
    bottom: 0px;
 
  1. @charset "utf-8";
  2. /* Intrinsic HTML Elements */
  3. body{
  4.     margin:0;
  5.     padding:0;
  6.     background-image: url(images/rustflakes_bkgd.jpg);
  7. }
  8. div{margin:0;padding:0;}
  9. h1{margin:0;padding:0;}
  10. h2{margin:0;padding:0;}
  11. h3{margin:0;padding:0;}
  12. p{margin:0;padding:0;}
  13. ul{margin:0;padding:0;}
  14. li{list-style-type:none;}
  15.  
  16. /* Uniquely Identified Containers */
  17. #page_container{
  18.     margin: 0 auto;
  19.     width: 1024px;
  20.     position: relative;
  21. }
  22. #left_column{
  23.     width: 195px;
  24.     height: 1024px;
  25.     float: left;
  26.     background-image:url(images/left_shadow.png);
  27. }
  28. #center_column{
  29.     float: left;
  30.     width: 635px;
  31.     position: relative;
  32. }
  33. #header{
  34.     background:#999;
  35.     width: 635px;
  36.     height: 182px;
  37. }
  38. #nav_bar_top{
  39.     background-image:url(images/nav_bar_top.jpg);
  40.     height: 32px;
  41. }
  42. #header_img{
  43.     background-image:url(images/Header_Img.jpg);
  44.     height: 150px;
  45. }
  46. #content_area{
  47.     background:#FFF;
  48.     width: 635px;
  49.     height: 583px;
  50. }
  51. #circle_img{
  52.     width: 365px;
  53.     float: right;
  54. }
  55. #tag_img{
  56.     width: 177px;
  57.     float: right;
  58.     clear: right;
  59. }
  60. #main_text{
  61.     width: 269px;
  62.     height: 233px;
  63.     background: #EEE;
  64. }
  65. #main_text2{
  66.     width: 457px;
  67.     height: 350px;
  68.     background: #DDD;
  69. }
  70. #footer{
  71.     background:#999;
  72.     width: 635px;
  73. }
  74. #flash_holder{}
  75. #footer_img{
  76.     background-image:url(images/footer_img.jpg);
  77.     height: 143px;
  78.     position: relative;
  79. }
  80. #footer_contact_wrapper{
  81.     width: 100%;
  82.     position: absolute;
  83.     bottom: 0px;
  84.     left: 0px;
  85. }
  86. #right_column{
  87.     width: 194px;
  88.     height: 1024px;
  89.     float: left;
  90.     background-image:url(images/right_shadow.png);
  91. }
  92.  
  93. /* Elements */
  94. .clear{clear: both;}
  95. .footer_contact {
  96.     color: #FFFFFF;
  97.     font-family: Geneva, Arial, Helvetica, sans-serif;
  98.     font-weight: bold;
  99.     text-align: center;
  100.     font-size: 14px;
  101.     background-image: none;
  102.     border-top-style: none;
  103.     border-right-style: none;
  104.     border-bottom-style: none;
  105.     border-left-style: none;
  106.     padding: 0px;
  107.     border-top-width: 0px;
  108.     border-right-width: 0px;
  109.     border-bottom-width: 0px;
  110.     border-left-width: 0px;
  111.     position: relative;
  112.     bottom: 0px;
  113.  


Toute aide est appréciée!
ps. Je sais que la transpa pas. png sous IE6 ne travaillent pas, je viens d'ajouter le plugin jQuery, une fois la mise en page est solide.
  • buzzby_247
  • Novice
  • Novice
  • No Avatar
  • Inscription: Aoû 07, 2009
  • Messages: 16
  • Status: Offline

Message Août 10th, 2009, 1:34 pm

peut vous mettre en place une image finale phostop de ce que ça devrait ressembler avec du texte, etc TBH je ne pense pas que vous mai besoin de tous que le CSS à la position de vos images. dans la balise <image> vous pouvez align = left ou align = right. regardant votre modèle final firefox il semble que vous devez le 6 divs.

Code: [ Select ]
a div tag for the header
a div tag for the 1st image and text
a div for clearing
a div tag for the header
a div tag for the 1st image and text
a div for your footer
  1. a div tag for the header
  2. a div tag for the 1st image and text
  3. a div for clearing
  4. a div tag for the header
  5. a div tag for the 1st image and text
  6. a div for your footer


dans votre CSS, vous pouvez spécifier un

html * ()

ce sera toute la maison de vos CSS mondial afin, par exemple, au lieu d'avoir

Code: [ Select ]
div{margin:0;padding:0;}
h1{margin:0;padding:0;}
h2{margin:0;padding:0;}
h3{margin:0;padding:0;}
p{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{list-style-type:none;}
  1. div{margin:0;padding:0;}
  2. h1{margin:0;padding:0;}
  3. h2{margin:0;padding:0;}
  4. h3{margin:0;padding:0;}
  5. p{margin:0;padding:0;}
  6. ul{margin:0;padding:0;}
  7. li{list-style-type:none;}


avoir

Code: [ Select ]
html * {margin:0;padding:0;}


et seul changement dans les divs que la matière
Moderator Remark: added code tags
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Août 10th, 2009, 2:40 pm

l'ajout d'un astérisque est une très mauvaise idée si vous ne savez pas exactement ce que vous faites une déclaration depuis sa couverture, qui lui substituer la marge et l'espacement de chaque élément (champs de formulaires, listes, tableaux, etc) et thats généralement un énorme gâchis à partir d'un utilisabilité point de vue.

Vous pouvez simplifier votre code en utilisant des virgules pour créer une liste d'articles:
Code: [ Select ]
div, h1, h2, h3, h4, p, ul, li {margin:0; padding:0;}


mais j'ai vraiment wouldnt recommander une déclaration à l'emporte.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • buzzby_247
  • Novice
  • Novice
  • No Avatar
  • Inscription: Aoû 07, 2009
  • Messages: 16
  • Status: Offline

Message Août 11th, 2009, 2:38 am

effectivement dans le puitting * a été une erreur.... désolé. simplement html () ou html, body () serait bien. le "html" ajoute universel styles qui peuvent être annulés lorsque vous utilisez un nom div. * remplace le tout et n'est pas encouragée

cheers graphixboy

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 8 messages
  • Utilisateurs parcourant ce forum: Kurthead+1 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