Centering a site for any resolution

  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

Hey guys,
I am newer to website design and i am trying to center my site for any browser, no matter what resolution. I have catered the size to 1024 x 768 but for anything higher it throws the page to the left corner rather than the center. I am using dreamweaver and I read up a bit and found out that a jell-o layout is what I am looking for as I dont need to use percentages to adjust the page to each browser like a fluid/liquid layout, but rather I just need to keep it the same size but center it. I keep everything within div's, so what is the best way to center the whole page for any resolution?
Thanks again for your time :)

- Ryan
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

Wrap everything in a <div> element, then center the div by specifying automatic margins for both sides of it:

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. }
  • theBruney
  • Student
  • Student
  • User avatar
  • Posts: 67
  • Loc: China

Post 3+ Months Ago

Yes, what spork said. :)
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

Ok so here is what i tried:
--------------------------------
Code: [ Select ]
<div id="apDiv25">
....all my body content...
</div>
  1. <div id="apDiv25">
  2. ....all my body content...
  3. </div>

---------------------------------
and then i defined my div as:
-------------------------------
Code: [ Select ]
#apDiv25 {
    width:1024px;
    margin: 0 auto;
        }
  1. #apDiv25 {
  2.     width:1024px;
  3.     margin: 0 auto;
  4.         }

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

However it didnt work. I tried naming it as you suggested as well, the same process as above but with the "wrapper" name, and again it didnt work. I think i understand the concept, wrapping everything in an auto margin div, but i must not understand how to execute it correctly :/
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

You placed everything within your <body> tag, right? From the way you've described it, it sounds like you may have accidentally wrapped your <body> in the div.

When you say that it doesn't work, what exactly is happening? Does the content not show up at all, or is it still just incorrectly aligned?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

Try CTRL+ALT+Refresh button in browser (Well, a hard refresh anyway).
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

Sorry i meant to say that i placed the div within the body, so i didnt accidentally wrap the whole body. The content still appears and everything, it doesnt mess up the site, it just didnt change anything and doesn't change the alignment at all.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

Did you perform a hard refresh like Bogey suggested? (Shift + Reload)
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

Yep, im viewing the site using the dreamweaver render (through ie or firefox) so it auto refreshes for each time you view it, but i also published it and tried a hard refresh still nothing changes. Here is the code i have, but i only showed the one declared div that is relevant, i placed this declaration right below the other div declarations so that should be correct:
-------------------------------------------------------------------


----this is the centering div, defined with the other div elements-----
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
  • User avatar
  • Posts: 481

Post 3+ Months Ago

What about the divs inside the main div (apDiv1-apDiv23) - what styles do they use?
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

This is gonna be a bit messy with so much code, but maybe i have the other div elements with conflicting styles? Would that affect why the margins didnt work? I noticed i have some margins set in the container definitions as well...
--------------------------------------------------------------
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
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

The problem is that most of your divs are absolutely positioned. Elements with absolute positioning are removed from the page flow and placed exactly where you specify them to be. Because of this, your wrapper div makes no difference as to where those elements will appear.
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

Ok so my question now is how do i keep my placement of the elements but not make them absolute so that they can center? Dreamweaver auto makes them absolute when i place them and if i remove it they lose their placement and just end up stacked on top of each other. Thanks so much for the help again, i am a graphic designer only recently doing web sites so i use the design view as i know only a limited amount of html. I do understand it somewhat because i took 4 years of c++ and java so i get the jest, but i dont know how to work with it very well and it is different.
  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

Why use absolute positioning at all? I've never used Dreamweaver, but surely it should have normal divs.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

casablanca wrote:
Why use absolute positioning at all? I've never used Dreamweaver, but surely it should have normal divs.

Dreamweaver likes to use positioning (especially absolute).
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

yah dreamweaver added it when i move the elements to where i want them. The problem then is if i remove the absolute the elements all get moved and arent placed where i want them. What other types of positioning other than absoulute could i use that would still let them be placed where i want them?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

You might want to learn to do CSS without using positioning...

But to answer your question there are static, relative, and fixed. There may be more but I'm too lazy to google right now :lol:
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

yah i did some reading and apparently i was using ap divs, or Absolutely Positioned divs, so as the name suggests they are absolute. I tried using regular divs but they take more work with positioning and as a graphic designer only recently learning html i'm not so good with it. I guess i need to learn more about css. Any good tutorial sites for learning to work with css styles? Here's the site i just finished: http://www.heirforce.net. It's simple but its a start, i like the positioning of the elements i just need to be able to center it for any res but it seems since i used ap elements to get them where i want them and am not sure of how to do the same placement through regular divs yet i need to study up. Thanks again for your tips!
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Right so if you want to center everything on the page, use the example that spork gave on the first reply in this thread ... A place I always recommend for learning CSS is http://w3schools.com ...

Otherwise if you want me to help, just show me an image of what you want to achieve and I'll give you the code and explain to you why I did what ...
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

Well his original code idea wont work because the elements are absolutely positioned, so using a div wrap that centers everything doesn't work when the absolute positioning of the individual elements overides it. Otherwise it would work just fine.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

okay but Absolutely Positioned divs will never be in the center ...
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

Yes and therin lies my problem. Dreamweaver made them absolute when I positioned them because thats the type of div it used. If I remove it or change the type of positioning I lose where all of my elements are placed. If i understood how to use css with images better (i can use it decently with text, but am still learning to use the css formatting to place images effectively) i could place them where i wanted them without the apdivs (Absolute positioned divs that dreamweaver makes), but as for now if I want them positioned where they are on the page, I have to leave them absolute or the I lose the positioning.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

well then I don't see how you're going to center the whole page ... the only way I see it is to redo it unfortunately ... which sucks quite a bit ... but we will all be glad to help if you get stuck I'm sure ...
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

Question. If i changed the absolute property of each element to fixed, would that be subject to the centering wrap? Or does a fixed element not allow a center formatting either?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Actually ... I never use it ... ever ... I only use them either without specifying the position attribute or I use float or relative ... that's all ... hope someone else reads this and knows the answer ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

Last time I've actually used positioning for anything was like 3+ months ago so I probably forgot a lot about positioning rules. I used to be good at it :(
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

Actually, because of inheritance, you can use absolutely positioned elements properly inside other elements as long as you specify positioning on the parent element.

The reason your page isn't working properly is because absolute positioning is actually not as absolute as some people think it is. It is actually absolute, relative to the next higher parent element that has positioning specified. In your code, you are wrapping everything in apDiv25, and all the divs inside of that are absolutely positioned. Because your apDiv25 doesn't have any explicit positioning, the divs inside it look to the next highest element in the hierarchy for guidance. In this case, they are using the body element and positioning themselves from there.
Simply adding position:relative to you apDiv25 will fix that problem. The "default" positioning for any element in a page is relative, but unless it is explicitly specified in css, it won't be used to calculate the position of absolute elements.

See this example:
http://kgreene.com/divtest.html view the source.
  • rkeefover
  • Novice
  • Novice
  • rkeefover
  • Posts: 16

Post 3+ Months Ago

Wow! He's exactly right :) That worked perfectly. That was way easier than having to reposition everything, you rock man.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

:lol: Wow, thanks. That helped even me... I used some positioning on some of my divs on my redesign of wedevoy.com and everything looks how I want it to be :) Thanks so much ScienceOfSpock... I will keep that in mind

Post Information

  • Total Posts in this topic: 29 posts
  • Users browsing this forum: No registered users and 32 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.