Retour à Forum de site web

Centrage d'un site pour une résolution

  • rkeefover
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juin 28, 2008
  • Messages: 16
  • Status: Offline

Message Juin 28th, 2008, 11:48 am

Hey guys,
Je suis à la conception de sites Web de nouvelles et je suis en train de centre de mon site pour un navigateur, quelle que soit la résolution. J'ai couvert la taille de 1024 x 768, mais pour quoi que ce soit plus élevé, il lance la page à gauche plutôt que le centre. J'utilise dreamweaver et j'ai lu un peu et a trouvé que le Jell-O mise en page est ce que je suis à la recherche de ce que je fais pas besoin d'utiliser des pourcentages pour ajuster la page pour chaque navigateur comme un fluide liquide la mise en page, mais je suffit de garder la même taille, mais il centre. Je garde tout en divs, pour ce qui est le meilleur moyen de l'ensemble du centre de la page de n'importe quelle résolution?
Merci encore pour votre temps :)

- Ryan
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juin 28th, 2008, 11:48 am

  • spork
  • Brewmaster
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Sep 22, 2003
  • Messages: 6130
  • Loc: Seattle, WA
  • Status: Offline

Message Juin 28th, 2008, 12:02 pm

Tout Enveloppez dans un élément <div>, puis centre du div en spécifiant des marges automatiques pour les deux parties de celui-ci:

HTML Code: [ Select ]
<div id="wrapper">
 ...
</div>
  1. <div id="wrapper">
  2.  ...
  3. </div>


CSS Code: [ Select ]
div#wrapper {
 width: 1024px;
 margin: 0 auto;
}
  1. div#wrapper {
  2.  width: 1024px;
  3.  margin: 0 auto;
  4. }
The Beer Monocle. Classy.
  • theBruney
  • Student
  • Student
  • Avatar de l’utilisateur
  • Inscription: Mai 30, 2007
  • Messages: 67
  • Loc: China
  • Status: Offline

Message Juin 28th, 2008, 12:12 pm

Oui, ce que dit Spork. :)
  • rkeefover
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juin 28, 2008
  • Messages: 16
  • Status: Offline

Message Juin 28th, 2008, 2:22 pm

Ok alors voici ce que j'ai essayé:
--------------------------------
Code: [ Select ]
<div id="apDiv25">
....all my body content...
</div>
  1. <div id="apDiv25">
  2. ....all my body content...
  3. </div>

---------------------------------
et puis j'ai défini mon div comme suit:
-------------------------------
Code: [ Select ]
#apDiv25 {
    width:1024px;
    margin: 0 auto;
        }
  1. #apDiv25 {
  2.     width:1024px;
  3.     margin: 0 auto;
  4.         }

-----------------------------

Toutefois, il n'a pas fonctionné. J'ai essayé le nommant comme vous le suggère également, le même procédé que précédemment mais avec le "wrapper" nom, et encore, il n'a pas fonctionné. Je crois que je comprends le concept, enveloppe le tout dans un div marge de l'automobile, mais je ne dois pas comprendre comment l'exécuter correctement: /
  • spork
  • Brewmaster
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Sep 22, 2003
  • Messages: 6130
  • Loc: Seattle, WA
  • Status: Offline

Message Juin 28th, 2008, 5:58 pm

Vous avez placé tout au sein de votre balise <body>, right? De la façon dont youve décrit, il semble que vous avez accidentellement mai enveloppé votre <body> dans la div.

Lorsque vous dites que ça ne marche pas, qu'est-ce qui se passe? Est-ce que le contenu se présente pas du tout, ou est-il toujours mal aligné?
The Beer Monocle. Classy.
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Juin 28th, 2008, 7:44 pm

Essayez les touches CTRL + ALT + bouton Actualiser dans le navigateur (Enfin, un disque de rafraîchissement de toute façon).
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • rkeefover
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juin 28, 2008
  • Messages: 16
  • Status: Offline

Message Juin 28th, 2008, 8:41 pm

Désolé, je voulais dire que j'ai mis le div à l'intérieur du corps, donc je n'ai pas accidentellement envelopper l'ensemble du corps. Le contenu apparaît toujours et tout le reste, il n'est pas gâcher le site, ça ne change rien et ne change pas l'alignement à tous.
  • spork
  • Brewmaster
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Sep 22, 2003
  • Messages: 6130
  • Loc: Seattle, WA
  • Status: Offline

Message Juin 28th, 2008, 9:21 pm

Avez-vous effectuer un hard refresh Bogey comme suggéré? (Shift + Reload)
The Beer Monocle. Classy.
  • rkeefover
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juin 28, 2008
  • Messages: 16
  • Status: Offline

Message Juin 28th, 2008, 10:48 pm

Yep, im visualiser le site en utilisant le dreamweaver rendre (par IE ou Firefox) pour qu'il actualise automatique à chaque fois que vous l'avez vue, mais j'ai aussi essayé et il a publié une actualisation dur reste rien ne change. Voici le code i avoir, mais je ne montrait celui déclaré div qui est en cause, j'ai placé ce droit déclaration ci-dessous les déclarations div autre de sorte que doit être correcte:
-------------------------------------------------- -----------------


---- c'est la div de centrage, défini avec les autres éléments div -----
Code: [ Select ]
#apDiv25 {
  width: 1024px;
  margin: 0 auto;
}
  1. #apDiv25 {
  2.   width: 1024px;
  3.   margin: 0 auto;
  4. }

--------------------------------
Code: [ Select ]
<body class="oneColLiqCtrHdr">
 
<div id="apDiv25"> <----- This is the centering div element
<div id="apDiv1"><img src="images/bg.jpg" align="center" width="839" height="598" /></div>
<div id="apDiv2"><img src="images/circle bar.png" width="183" height="441" /></div>
<div id="apDiv3"><img src="images/nav bar.png" width="776" height="106" /></div>
<div id="apDiv6"><a href="index.html"><img src="images/home button.png" width="49" height="25" border="0" /></a></div>
<div id="apDiv7"><a href="about.html"><img src="images/about button.png" width="71" height="19" border="0" /></a></div>
<div id="apDiv8"><a href="news.html"><img src="images/news button.png" width="45" height="24" border="0" /></a></div>
<div id="apDiv9"><a href="events.html"><img src="images/events button.png" width="53" height="20" border="0" /></a></div>
<div id="apDiv10"><a href="fuel.html"><img src="images/fuel button.png" width="38" height="20" border="0" /></a></div>
<div id="apDiv11"><a href="calendar.pdf"><img src="images/calendar button.png" width="79" height="23" border="0" /></a></div>
<div id="apDiv12"><a href="contact.html"><img src="images/contact button.png" width="87" height="25" border="0" /></a></div>
<div id="apDiv13"><a href="media.html"><img src="images/media button.png" width="58" height="23" border="0" /></a></div>
<div id="apDiv14"><a href="fuel.html"><img src="images/fuel logo.png" width="178" height="54" border="0" /></a></div>
<div id="apDiv15"><a href="http://speedthelight.ag.org/"><img src="images/stl logo.png" width="118" height="90" border="0" /></a></div>
<div id="apDiv16"><a href="http://thesevenproject.com/"><img src="images/seven logo.png" width="135" height="58" border="0" /></a></div>
<div id="apDiv17"><a href="http://www.chagwichita.org/"><img src="images/chag button.png" width="78" height="29" border="0" /></a></div>
<div id="apDiv18"><a href="forms.html"><img src="images/forms button.png" width="61" height="19" border="0" /></a></div>
<div id="apDiv19"><a href="map.html"><img src="images/church map button.png" width="94" height="27" border="0" /></a></div>
<div id="apDiv20"><a href="mailto:heirforceyouth@aol.com"><img src="images/email link.png" width="153" height="31" border="0" /></a></div>
<div id="apDiv23">
  <div align="center">
    <div align="justify" class="style8">
      <div align="left">
        <p align="left" class="style16">Our Ministry</p>
        <p>Our ministry exists to have students <span class="style15">honor</span> God with their lives, to <span class="style1">discover</span> their ministry, to help them <span class="style1">grow</span> in their faith so that they can reach non-believing   students and help them <span class="style1">connect</span> with other Christians </p>
      </div>
    </div>
  </div>
  <p align="left" class="style8">Wednesday nights at <span class="style1">7:00</span> P.M.   students from Wichita, and the surrounding community come together for an   evening of fellowship and worship. Teens will be challenged to live a life   without compromise while engaging them to discover all the joys of living for   Christ. To find out more information about our ministry and directions to our   church visit our <a href="about.html" class="style11">About   Us</a> link.</p>
  <p align="left" class="style16">Pastor Tony</p>
  <p align="left" class="style8"> <img src="images/tony1.jpg" width="250" height="375" align="left" />Pastor Tony is what some people like to call <span class="style1">'pro</span>. So if you aren't coming   on Wednesday nights, you're missing out. If you need to get in touch with him or just wanna say hey, be sure to drop him an <a href="mailto:pastorthankins@aol.com" class="style11">email</a>, he'd love to hear from you!</p>
  <p align="left" class="style16">&nbsp;</p>
  <p align="justify" class="style9">&nbsp;</p>
</div>
</div> < ------closing for the centering div element
<!-- TemplateEndEditable -->
</body>
  1. <body class="oneColLiqCtrHdr">
  2.  
  3. <div id="apDiv25"> <----- This is the centering div element
  4. <div id="apDiv1"><img src="images/bg.jpg" align="center" width="839" height="598" /></div>
  5. <div id="apDiv2"><img src="images/circle bar.png" width="183" height="441" /></div>
  6. <div id="apDiv3"><img src="images/nav bar.png" width="776" height="106" /></div>
  7. <div id="apDiv6"><a href="index.html"><img src="images/home button.png" width="49" height="25" border="0" /></a></div>
  8. <div id="apDiv7"><a href="about.html"><img src="images/about button.png" width="71" height="19" border="0" /></a></div>
  9. <div id="apDiv8"><a href="news.html"><img src="images/news button.png" width="45" height="24" border="0" /></a></div>
  10. <div id="apDiv9"><a href="events.html"><img src="images/events button.png" width="53" height="20" border="0" /></a></div>
  11. <div id="apDiv10"><a href="fuel.html"><img src="images/fuel button.png" width="38" height="20" border="0" /></a></div>
  12. <div id="apDiv11"><a href="calendar.pdf"><img src="images/calendar button.png" width="79" height="23" border="0" /></a></div>
  13. <div id="apDiv12"><a href="contact.html"><img src="images/contact button.png" width="87" height="25" border="0" /></a></div>
  14. <div id="apDiv13"><a href="media.html"><img src="images/media button.png" width="58" height="23" border="0" /></a></div>
  15. <div id="apDiv14"><a href="fuel.html"><img src="images/fuel logo.png" width="178" height="54" border="0" /></a></div>
  16. <div id="apDiv15"><a href="http://speedthelight.ag.org/"><img src="images/stl logo.png" width="118" height="90" border="0" /></a></div>
  17. <div id="apDiv16"><a href="http://thesevenproject.com/"><img src="images/seven logo.png" width="135" height="58" border="0" /></a></div>
  18. <div id="apDiv17"><a href="http://www.chagwichita.org/"><img src="images/chag button.png" width="78" height="29" border="0" /></a></div>
  19. <div id="apDiv18"><a href="forms.html"><img src="images/forms button.png" width="61" height="19" border="0" /></a></div>
  20. <div id="apDiv19"><a href="map.html"><img src="images/church map button.png" width="94" height="27" border="0" /></a></div>
  21. <div id="apDiv20"><a href="mailto:heirforceyouth@aol.com"><img src="images/email link.png" width="153" height="31" border="0" /></a></div>
  22. <div id="apDiv23">
  23.   <div align="center">
  24.     <div align="justify" class="style8">
  25.       <div align="left">
  26.         <p align="left" class="style16">Our Ministry</p>
  27.         <p>Our ministry exists to have students <span class="style15">honor</span> God with their lives, to <span class="style1">discover</span> their ministry, to help them <span class="style1">grow</span> in their faith so that they can reach non-believing   students and help them <span class="style1">connect</span> with other Christians </p>
  28.       </div>
  29.     </div>
  30.   </div>
  31.   <p align="left" class="style8">Wednesday nights at <span class="style1">7:00</span> P.M.   students from Wichita, and the surrounding community come together for an   evening of fellowship and worship. Teens will be challenged to live a life   without compromise while engaging them to discover all the joys of living for   Christ. To find out more information about our ministry and directions to our   church visit our <a href="about.html" class="style11">About   Us</a> link.</p>
  32.   <p align="left" class="style16">Pastor Tony</p>
  33.   <p align="left" class="style8"> <img src="images/tony1.jpg" width="250" height="375" align="left" />Pastor Tony is what some people like to call <span class="style1">'pro</span>. So if you aren't coming   on Wednesday nights, you're missing out. If you need to get in touch with him or just wanna say hey, be sure to drop him an <a href="mailto:pastorthankins@aol.com" class="style11">email</a>, he'd love to hear from you!</p>
  34.   <p align="left" class="style16">&nbsp;</p>
  35.   <p align="justify" class="style9">&nbsp;</p>
  36. </div>
  37. </div> < ------closing for the centering div element
  38. <!-- TemplateEndEditable -->
  39. </body>
  • casablanca
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Mai 29, 2007
  • Messages: 481
  • Status: Offline

Message Juin 28th, 2008, 10:54 pm

Qu'en est-il des divs à l'intérieur du div (apDiv1-apDiv23) - que les styles utilisent-ils?
No Strings Attached: A JavaScript graphics demo.
  • rkeefover
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juin 28, 2008
  • Messages: 16
  • Status: Offline

Message Juin 29th, 2008, 12:29 pm

Ça va être un peu brouillon avec tellement de code, mais j'ai peut-être les autres éléments div avec des styles contradictoires? Serait l'impact sur la raison pour laquelle les marges ne fonctionne pas? J'ai remarqué que j'ai quelques marges fixées dans les définitions de conteneurs ainsi...
-------------------------------------------------- ------------
Code: [ Select ]
.oneColLiqCtrHdr #container {
    width: 80%; /* this will create a container 80% of the browser width */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtrHdr #header {
    background: #DDDDDD;
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColLiqCtrHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColLiqCtrHdr #mainContent {
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background: #FFFFFF;
}
.oneColLiqCtrHdr #footer {
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
}
.oneColLiqCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
#apDiv1 {
    position:absolute;
    left:-12px;
    top:8px;
    width:883px;
    height:611px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    left:12px;
    top:162px;
    width:243px;
    height:464px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:40px;
    top:26px;
    width:753px;
    height:124px;
    z-index:3;
}
#apDiv4 {
    position:absolute;
    left:266px;
    top:96px;
    width:48px;
    height:21px;
    z-index:4;
}
#apDiv5 {
    position:absolute;
    left:311px;
    top:97px;
    width:64px;
    height:23px;
    z-index:5;
}
#apDiv6 {
    position:absolute;
    left:74px;
    top:94px;
    width:47px;
    height:27px;
    z-index:4;
}
#apDiv7 {
    position:absolute;
    left:125px;
    top:98px;
    width:66px;
    height:24px;
    z-index:5;
}
#apDiv8 {
    position:absolute;
    left:197px;
    top:94px;
    width:46px;
    height:27px;
    z-index:6;
}
#apDiv9 {
    position:absolute;
    left:243px;
    top:99px;
    width:54px;
    height:23px;
    z-index:7;
}
#apDiv10 {
    position:absolute;
    left:552px;
    top:101px;
    width:39px;
    height:23px;
    z-index:8;
}
#apDiv11 {
    position:absolute;
    left:586px;
    top:99px;
    width:71px;
    height:24px;
    z-index:9;
}
#apDiv12 {
    position:absolute;
    left:658px;
    top:98px;
    width:81px;
    height:27px;
    z-index:10;
}
#apDiv13 {
    position:absolute;
    left:740px;
    top:100px;
    width:44px;
    height:24px;
    z-index:11;
}
#apDiv14 {
    position:absolute;
    left:94px;
    top:202px;
    width:138px;
    height:59px;
    z-index:12;
}
#apDiv15 {
    position:absolute;
    left:92px;
    top:288px;
    width:64px;
    height:98px;
    z-index:13;
}
#apDiv16 {
    position:absolute;
    left:124px;
    top:404px;
    width:105px;
    height:67px;
    z-index:14;
}
#apDiv17 {
    position:absolute;
    left:153px;
    top:502px;
    width:56px;
    height:30px;
    z-index:15;
}
#apDiv18 {
    position:absolute;
    left:140px;
    top:530px;
    width:49px;
    height:19px;
    z-index:16;
}
#apDiv19 {
    position:absolute;
    left:148px;
    top:549px;
    width:56px;
    height:29px;
    z-index:17;
}
#apDiv20 {
    position:absolute;
    left:352px;
    top:578px;
    width:196px;
    height:29px;
    z-index:18;
}
#apDiv21 {
    position:absolute;
    left:509px;
    top:197px;
    width:445px;
    height:324px;
    z-index:20;
    overflow: visible;
    background-color: #000000;
}
.style1 {color: #FFFFFF}
#apDiv22 {
    position:absolute;
    left:507px;
    top:195px;
    width:450px;
    height:329px;
    z-index:19;
    background-color: #80805D;
}
.style8 {color: #80805D}
#apDiv23 {
    position:absolute;
    left:336px;
    top:209px;
    width:428px;
    height:311px;
    z-index:21;
    overflow: auto;
}
.style9 {color: #F4F4F4}
.style11 {color: #FFFFFF; font-family: "AvantGarde Bk BT"; }
.style15 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF;}
#apDiv24 {
    position:absolute;
    left:518px;
    top:201px;
    width:428px;
    height:27px;
    z-index:19;
    background-color: #80805D;
}
#apDiv25 {
width: 1024px;
margin: 0 auto;
}
  1. .oneColLiqCtrHdr #container {
  2.     width: 80%; /* this will create a container 80% of the browser width */
  3.     background: #FFFFFF;
  4.     margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  5.     border: 1px solid #000000;
  6.     text-align: left; /* this overrides the text-align: center on the body element. */
  7. }
  8. .oneColLiqCtrHdr #header {
  9.     background: #DDDDDD;
  10.     padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
  11. }
  12. .oneColLiqCtrHdr #header h1 {
  13.     margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
  14.     padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
  15. }
  16. .oneColLiqCtrHdr #mainContent {
  17.     padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
  18.     background: #FFFFFF;
  19. }
  20. .oneColLiqCtrHdr #footer {
  21.     padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
  22.     background:#DDDDDD;
  23. }
  24. .oneColLiqCtrHdr #footer p {
  25.     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
  26.     padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
  27. }
  28. #apDiv1 {
  29.     position:absolute;
  30.     left:-12px;
  31.     top:8px;
  32.     width:883px;
  33.     height:611px;
  34.     z-index:1;
  35. }
  36. #apDiv2 {
  37.     position:absolute;
  38.     left:12px;
  39.     top:162px;
  40.     width:243px;
  41.     height:464px;
  42.     z-index:2;
  43. }
  44. #apDiv3 {
  45.     position:absolute;
  46.     left:40px;
  47.     top:26px;
  48.     width:753px;
  49.     height:124px;
  50.     z-index:3;
  51. }
  52. #apDiv4 {
  53.     position:absolute;
  54.     left:266px;
  55.     top:96px;
  56.     width:48px;
  57.     height:21px;
  58.     z-index:4;
  59. }
  60. #apDiv5 {
  61.     position:absolute;
  62.     left:311px;
  63.     top:97px;
  64.     width:64px;
  65.     height:23px;
  66.     z-index:5;
  67. }
  68. #apDiv6 {
  69.     position:absolute;
  70.     left:74px;
  71.     top:94px;
  72.     width:47px;
  73.     height:27px;
  74.     z-index:4;
  75. }
  76. #apDiv7 {
  77.     position:absolute;
  78.     left:125px;
  79.     top:98px;
  80.     width:66px;
  81.     height:24px;
  82.     z-index:5;
  83. }
  84. #apDiv8 {
  85.     position:absolute;
  86.     left:197px;
  87.     top:94px;
  88.     width:46px;
  89.     height:27px;
  90.     z-index:6;
  91. }
  92. #apDiv9 {
  93.     position:absolute;
  94.     left:243px;
  95.     top:99px;
  96.     width:54px;
  97.     height:23px;
  98.     z-index:7;
  99. }
  100. #apDiv10 {
  101.     position:absolute;
  102.     left:552px;
  103.     top:101px;
  104.     width:39px;
  105.     height:23px;
  106.     z-index:8;
  107. }
  108. #apDiv11 {
  109.     position:absolute;
  110.     left:586px;
  111.     top:99px;
  112.     width:71px;
  113.     height:24px;
  114.     z-index:9;
  115. }
  116. #apDiv12 {
  117.     position:absolute;
  118.     left:658px;
  119.     top:98px;
  120.     width:81px;
  121.     height:27px;
  122.     z-index:10;
  123. }
  124. #apDiv13 {
  125.     position:absolute;
  126.     left:740px;
  127.     top:100px;
  128.     width:44px;
  129.     height:24px;
  130.     z-index:11;
  131. }
  132. #apDiv14 {
  133.     position:absolute;
  134.     left:94px;
  135.     top:202px;
  136.     width:138px;
  137.     height:59px;
  138.     z-index:12;
  139. }
  140. #apDiv15 {
  141.     position:absolute;
  142.     left:92px;
  143.     top:288px;
  144.     width:64px;
  145.     height:98px;
  146.     z-index:13;
  147. }
  148. #apDiv16 {
  149.     position:absolute;
  150.     left:124px;
  151.     top:404px;
  152.     width:105px;
  153.     height:67px;
  154.     z-index:14;
  155. }
  156. #apDiv17 {
  157.     position:absolute;
  158.     left:153px;
  159.     top:502px;
  160.     width:56px;
  161.     height:30px;
  162.     z-index:15;
  163. }
  164. #apDiv18 {
  165.     position:absolute;
  166.     left:140px;
  167.     top:530px;
  168.     width:49px;
  169.     height:19px;
  170.     z-index:16;
  171. }
  172. #apDiv19 {
  173.     position:absolute;
  174.     left:148px;
  175.     top:549px;
  176.     width:56px;
  177.     height:29px;
  178.     z-index:17;
  179. }
  180. #apDiv20 {
  181.     position:absolute;
  182.     left:352px;
  183.     top:578px;
  184.     width:196px;
  185.     height:29px;
  186.     z-index:18;
  187. }
  188. #apDiv21 {
  189.     position:absolute;
  190.     left:509px;
  191.     top:197px;
  192.     width:445px;
  193.     height:324px;
  194.     z-index:20;
  195.     overflow: visible;
  196.     background-color: #000000;
  197. }
  198. .style1 {color: #FFFFFF}
  199. #apDiv22 {
  200.     position:absolute;
  201.     left:507px;
  202.     top:195px;
  203.     width:450px;
  204.     height:329px;
  205.     z-index:19;
  206.     background-color: #80805D;
  207. }
  208. .style8 {color: #80805D}
  209. #apDiv23 {
  210.     position:absolute;
  211.     left:336px;
  212.     top:209px;
  213.     width:428px;
  214.     height:311px;
  215.     z-index:21;
  216.     overflow: auto;
  217. }
  218. .style9 {color: #F4F4F4}
  219. .style11 {color: #FFFFFF; font-family: "AvantGarde Bk BT"; }
  220. .style15 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF;}
  221. #apDiv24 {
  222.     position:absolute;
  223.     left:518px;
  224.     top:201px;
  225.     width:428px;
  226.     height:27px;
  227.     z-index:19;
  228.     background-color: #80805D;
  229. }
  230. #apDiv25 {
  231. width: 1024px;
  232. margin: 0 auto;
  233. }
  • spork
  • Brewmaster
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Sep 22, 2003
  • Messages: 6130
  • Loc: Seattle, WA
  • Status: Offline

Message Juin 29th, 2008, 12:55 pm

Le problème est que la plupart de vos divs sont absolument positionné. Eléments de positionnement absolu sont retirés de la circulation et la page mis préciser exactement où vous l'être. De ce fait, votre div wrapper ne fait aucune différence quant à l'endroit où ces éléments apparaissent.
The Beer Monocle. Classy.
  • rkeefover
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juin 28, 2008
  • Messages: 16
  • Status: Offline

Message Juin 29th, 2008, 9:48 pm

Ok donc ma question est maintenant de savoir comment puis-je garder mon placement des éléments, mais pas les rendre absolue afin qu'ils puissent centre? Dreamweaver auto rend absolue lorsque j'ai pour eux et si je le supprimer, ils perdent leur placement et à la fin de empilées les unes sur les autres. Merci beaucoup pour l'aide encore une fois, je suis un designer graphique n'est que récemment que faire des sites web donc je utiliser le dessin vue que je sais seulement une quantité limitée de html. Je comprends un peu, car j'ai pris 4 ans de C + + et Java, afin obtenir le i jest, mais je ne sais pas comment travailler avec, il est très bien et elle est différente.
  • casablanca
  • Proficient
  • Proficient
  • Avatar de l’utilisateur
  • Inscription: Mai 29, 2007
  • Messages: 481
  • Status: Offline

Message Juin 29th, 2008, 10:18 pm

Pourquoi utiliser le positionnement absolu à tous? Ive jamais utilisé Dreamweaver, mais sûrement, elle aurait dû normalement divs.
No Strings Attached: A JavaScript graphics demo.
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Juin 30th, 2008, 3:19 pm

casablanca a écrit:
Pourquoi utiliser le positionnement absolu à tous? Ive jamais utilisé Dreamweaver, mais sûrement, elle aurait dû normalement divs.

Dreamweaver aime utiliser positionnement (notamment absolue).
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juin 30th, 2008, 3:19 pm

1, 2

Afficher de l'information

  • Total des messages de ce sujet: 29 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 148 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