Another one center DIV issue

  • Adama
  • Born
  • Born
  • Adama
  • Posts: 3

Post 3+ Months Ago

Hello,
I am new here as almost new in css designing. I used to design websites in tables "mode" but I decided to follow DIV "mode". I regretted it but I will keep on try to understand that way.

So, in 3 weeks I managed to create a 75% ready template(a thing that usually was taking for me 1 day) and know I stuck in positioning a div in the center of the page. 3 days I am seeking the solutions but NOTHING works for me. Maybe I have some mistakes somewhere else in the code that prevents the div centers.

Here is my 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>
<title>Sign up</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<style media="screen" type="text/css">
html,body {
margin:0px;
padding:0px;
height:100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align:center;
text-align:-moz-center;
background: url("Images/Bg.jpg") top left;background-repeat: no-repeat;background-color: #42AFDC } /* 0% 0% */
}
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
    
#container {
min-height:100%;
position:relative;
text-align:center;
}
    
#top {
padding:0px 0px 0px 0px;
}
    
#middle {
padding-bottom:54px;
padding-top:180px;
text-align:center;
width:200px;
background:#FFFFFF;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}

#footer {
position:absolute;
bottom:0;
width:100%;
left:0px;
height:44px;
background-attachment:fixed;
background: url("Images/Bottom_Bg.jpg");
}

#bottom_inside {
padding: 1px 0px 0px 0px;
text-align: center;
font-family: Verdana;font-weight: normal;font-size: 9px;color:#666666;
}

#translayer {
background: url("Images/Trans.png");
position:relative;
width:700px;
height: 100%;
color:#FF0000;
top:0;
left:0;
border: 1px solid #D78100;
padding: 2px 2px 2px 2px;
}
#transcontent {
width:680px;
height: 100%;
position:relative;
top:0;
left:0;
color:#FFFFFF;
background:none;
font-family: Verdana, Arial, Times New Roman;
}

#Logo {
position: absolute;
top:0px;
left:0px;
width: 150px;
height: 150px;
}
.Time_Flags{
float: right;
padding:0px 0px 0px 0px;
text-align: right;
}
.Clock {
font-family: Verdana;font-weight: normal;font-size: 9px;color:#000000;
}
.Tip1{
font-family: Verdana;font-weight: bold;font-size: 9px;color:#000000;
padding-right:2px;
}

.Login_Bar{
    
    background: url("Images/Login_First_Bg_En.jpg");
    
position:absolute;
top: 108px;
left: 0px;
width: 527px;
height: 54px;
}


#Bar_1Content {
position:absolute;
left: 130px;
top: 3px;
}
#Bar_2Content {
position:absolute;
left: -94px;
top: 28px;
}

.Top_Textfield1 {border-width: 1px; border-style: solid; border-color: #999999;background-color: #E6E6E6; font-family: Verdana;font-size: 10px;}
.Top_Textfield2 {border-width: 1px; border-style: solid; border-color: #999999;background-color: #FFFFFF; font-family: Verdana;font-size: 10px;}
.Top_Button1 {border-width: 1px; border-style: solid; border-color: #0A4A8A;background-color: #42AFDC; font-family: Verdana;font-size: 10px;cursor: pointer;}
.Top_Button2 {border-width: 1px; border-style: solid; border-color: #0A4A8A;background-color: #8ACDEA; font-family: Verdana;font-size: 10px;cursor: pointer;}
a.Bar_Links:active {color: #FFFFFF; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
a.Bar_Links:link {color: #FFFFFF; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
a.Bar_Links:visited {color: #FFFFFF; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
a.Bar_Links:hover {color: #FFFFFF; font-size: 10px; text-decoration: none; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
a.Bottom_Links:active {color: #000000; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
a.Bottom_Links:link {color: #000000; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
a.Bottom_Links:visited {color: #000000; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
a.Bottom_Links:hover {color: #000000; font-size: 10px; text-decoration: none; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
</style>
</head>
<body>

<div id="container">

<div id="top">
    <div id="Logo"><a href="Default.asp?L=2"><img src="Images/Logo_En.jpg" border="0"></a></div>
        <div class="Login_Bar">
            <div id="Bar_1Content"><form><input type="text" name="Username" class="Top_Textfield1" onFocus="this.className='Top_Textfield2';this.value='';" onBlur="this.className='Top_Textfield1'" value="Your email">&nbsp;&nbsp;<input type="password" name="Password" class="Top_Textfield1" onFocus="this.className='Top_Textfield2';this.value='';" onBlur="this.className='Top_Textfield1'" value="Password">&nbsp;&nbsp;<input type="submit" value="Enter" class="Top_Button1" onMouseOver="this.className='Top_Button2'" onMouseOut="this.className='Top_Button1'" name="submit"><input type="hidden" name="Queries" value="L=2"></form><div id="Bar_2Content"><a href="Signup.asp?L=2" class="Bar_Links">Become a member for free</a> <font color="#FFFFFF">-</font> <a href="Forgot_Pass.asp?L=2" class="Bar_Links">Lost password?</a></div>
            </div>
        </div>
    <div class="Time_Flags"><span class="Clock">27 of Aug 2008, 4:25:40 pm</span>&nbsp;&nbsp;<a href="Signup.asp?L=1"><img src="Images/Gr.gif" border="0" alt="Click here for the greek version" vspace="2" align="absmiddle"></a><a href="Signup.asp?L=2"><img src="Images/En.gif" border="0" alt="Click here for the english version" hspace="5" vspace="2" align="absmiddle"></a><br /><a href="Search.asp?L=2"><img src="Images/Search1.jpg" border="0" name="Search" class="Top_Button" onMouseOver="Top_Img('Search','Butt10');document.getElementById('Tip1').innerHTML='Search members';" onMouseOut="Top_Img('Search','Butt9');document.getElementById('Tip1').innerHTML='';" hspace="5" vspace="5"></a><a href="Forums/Default.asp?L=2"><img src="Images/Forum1.jpg" border="0" name="Forum" class="Top_Button" onMouseOver="Top_Img('Forum','Butt4');document.getElementById('Tip1').innerHTML='Forums'" onMouseOut="Top_Img('Forum','Butt3');document.getElementById('Tip1').innerHTML=''" hspace="5" vspace="5"></a><a href="Chat.asp?L=2"><img src="Images/Chat1.jpg" border="0" name="Chat" class="Top_Button" onMouseOver="Top_Img('Chat','Butt2');document.getElementById('Tip1').innerHTML='Chat';" onMouseOut="Top_Img('Chat','Butt1');document.getElementById('Tip1').innerHTML='';" hspace="5" vspace="5"></a><a href="Login.asp?L=2"><img src="Images/Login1.jpg" border="0" name="Connect" class="Top_Button" onMouseOver="Top_Img('Connect','Butt6');document.getElementById('Tip1').innerHTML='Login';" onMouseOut="Top_Img('Connect','Butt5');document.getElementById('Tip1').innerHTML='';" hspace="5" vspace="5"></a><div class="Tip1" id="Tip1"></div></div>
</div><div class="clear"></div><div id="middle">a</div>
<div id="footer"><div id="bottom_inside"><p><a class="Bottom_Links" href="Contact.asp">Contact us</a> - <a class="Bottom_Links" href="Terms.asp"></a></p></div></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. <title>Sign up</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
  6. <style media="screen" type="text/css">
  7. html,body {
  8. margin:0px;
  9. padding:0px;
  10. height:100%;
  11. margin-left: 0px;
  12. margin-top: 0px;
  13. margin-right: 0px;
  14. margin-bottom: 0px;
  15. text-align:center;
  16. text-align:-moz-center;
  17. background: url("Images/Bg.jpg") top left;background-repeat: no-repeat;background-color: #42AFDC } /* 0% 0% */
  18. }
  19. DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
  20.     
  21. #container {
  22. min-height:100%;
  23. position:relative;
  24. text-align:center;
  25. }
  26.     
  27. #top {
  28. padding:0px 0px 0px 0px;
  29. }
  30.     
  31. #middle {
  32. padding-bottom:54px;
  33. padding-top:180px;
  34. text-align:center;
  35. width:200px;
  36. background:#FFFFFF;
  37. margin: 0 auto;
  38. margin-left: auto;
  39. margin-right: auto;
  40. }
  41. #footer {
  42. position:absolute;
  43. bottom:0;
  44. width:100%;
  45. left:0px;
  46. height:44px;
  47. background-attachment:fixed;
  48. background: url("Images/Bottom_Bg.jpg");
  49. }
  50. #bottom_inside {
  51. padding: 1px 0px 0px 0px;
  52. text-align: center;
  53. font-family: Verdana;font-weight: normal;font-size: 9px;color:#666666;
  54. }
  55. #translayer {
  56. background: url("Images/Trans.png");
  57. position:relative;
  58. width:700px;
  59. height: 100%;
  60. color:#FF0000;
  61. top:0;
  62. left:0;
  63. border: 1px solid #D78100;
  64. padding: 2px 2px 2px 2px;
  65. }
  66. #transcontent {
  67. width:680px;
  68. height: 100%;
  69. position:relative;
  70. top:0;
  71. left:0;
  72. color:#FFFFFF;
  73. background:none;
  74. font-family: Verdana, Arial, Times New Roman;
  75. }
  76. #Logo {
  77. position: absolute;
  78. top:0px;
  79. left:0px;
  80. width: 150px;
  81. height: 150px;
  82. }
  83. .Time_Flags{
  84. float: right;
  85. padding:0px 0px 0px 0px;
  86. text-align: right;
  87. }
  88. .Clock {
  89. font-family: Verdana;font-weight: normal;font-size: 9px;color:#000000;
  90. }
  91. .Tip1{
  92. font-family: Verdana;font-weight: bold;font-size: 9px;color:#000000;
  93. padding-right:2px;
  94. }
  95. .Login_Bar{
  96.     
  97.     background: url("Images/Login_First_Bg_En.jpg");
  98.     
  99. position:absolute;
  100. top: 108px;
  101. left: 0px;
  102. width: 527px;
  103. height: 54px;
  104. }
  105. #Bar_1Content {
  106. position:absolute;
  107. left: 130px;
  108. top: 3px;
  109. }
  110. #Bar_2Content {
  111. position:absolute;
  112. left: -94px;
  113. top: 28px;
  114. }
  115. .Top_Textfield1 {border-width: 1px; border-style: solid; border-color: #999999;background-color: #E6E6E6; font-family: Verdana;font-size: 10px;}
  116. .Top_Textfield2 {border-width: 1px; border-style: solid; border-color: #999999;background-color: #FFFFFF; font-family: Verdana;font-size: 10px;}
  117. .Top_Button1 {border-width: 1px; border-style: solid; border-color: #0A4A8A;background-color: #42AFDC; font-family: Verdana;font-size: 10px;cursor: pointer;}
  118. .Top_Button2 {border-width: 1px; border-style: solid; border-color: #0A4A8A;background-color: #8ACDEA; font-family: Verdana;font-size: 10px;cursor: pointer;}
  119. a.Bar_Links:active {color: #FFFFFF; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
  120. a.Bar_Links:link {color: #FFFFFF; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
  121. a.Bar_Links:visited {color: #FFFFFF; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
  122. a.Bar_Links:hover {color: #FFFFFF; font-size: 10px; text-decoration: none; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
  123. a.Bottom_Links:active {color: #000000; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
  124. a.Bottom_Links:link {color: #000000; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
  125. a.Bottom_Links:visited {color: #000000; text-decoration: underline; font-size: 10px; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
  126. a.Bottom_Links:hover {color: #000000; font-size: 10px; text-decoration: none; font-weight: normal; font-family: Verdana, Arial, Times New Roman;}
  127. </style>
  128. </head>
  129. <body>
  130. <div id="container">
  131. <div id="top">
  132.     <div id="Logo"><a href="Default.asp?L=2"><img src="Images/Logo_En.jpg" border="0"></a></div>
  133.         <div class="Login_Bar">
  134.             <div id="Bar_1Content"><form><input type="text" name="Username" class="Top_Textfield1" onFocus="this.className='Top_Textfield2';this.value='';" onBlur="this.className='Top_Textfield1'" value="Your email">&nbsp;&nbsp;<input type="password" name="Password" class="Top_Textfield1" onFocus="this.className='Top_Textfield2';this.value='';" onBlur="this.className='Top_Textfield1'" value="Password">&nbsp;&nbsp;<input type="submit" value="Enter" class="Top_Button1" onMouseOver="this.className='Top_Button2'" onMouseOut="this.className='Top_Button1'" name="submit"><input type="hidden" name="Queries" value="L=2"></form><div id="Bar_2Content"><a href="Signup.asp?L=2" class="Bar_Links">Become a member for free</a> <font color="#FFFFFF">-</font> <a href="Forgot_Pass.asp?L=2" class="Bar_Links">Lost password?</a></div>
  135.             </div>
  136.         </div>
  137.     <div class="Time_Flags"><span class="Clock">27 of Aug 2008, 4:25:40 pm</span>&nbsp;&nbsp;<a href="Signup.asp?L=1"><img src="Images/Gr.gif" border="0" alt="Click here for the greek version" vspace="2" align="absmiddle"></a><a href="Signup.asp?L=2"><img src="Images/En.gif" border="0" alt="Click here for the english version" hspace="5" vspace="2" align="absmiddle"></a><br /><a href="Search.asp?L=2"><img src="Images/Search1.jpg" border="0" name="Search" class="Top_Button" onMouseOver="Top_Img('Search','Butt10');document.getElementById('Tip1').innerHTML='Search members';" onMouseOut="Top_Img('Search','Butt9');document.getElementById('Tip1').innerHTML='';" hspace="5" vspace="5"></a><a href="Forums/Default.asp?L=2"><img src="Images/Forum1.jpg" border="0" name="Forum" class="Top_Button" onMouseOver="Top_Img('Forum','Butt4');document.getElementById('Tip1').innerHTML='Forums'" onMouseOut="Top_Img('Forum','Butt3');document.getElementById('Tip1').innerHTML=''" hspace="5" vspace="5"></a><a href="Chat.asp?L=2"><img src="Images/Chat1.jpg" border="0" name="Chat" class="Top_Button" onMouseOver="Top_Img('Chat','Butt2');document.getElementById('Tip1').innerHTML='Chat';" onMouseOut="Top_Img('Chat','Butt1');document.getElementById('Tip1').innerHTML='';" hspace="5" vspace="5"></a><a href="Login.asp?L=2"><img src="Images/Login1.jpg" border="0" name="Connect" class="Top_Button" onMouseOver="Top_Img('Connect','Butt6');document.getElementById('Tip1').innerHTML='Login';" onMouseOut="Top_Img('Connect','Butt5');document.getElementById('Tip1').innerHTML='';" hspace="5" vspace="5"></a><div class="Tip1" id="Tip1"></div></div>
  138. </div><div class="clear"></div><div id="middle">a</div>
  139. <div id="footer"><div id="bottom_inside"><p><a class="Bottom_Links" href="Contact.asp">Contact us</a> - <a class="Bottom_Links" href="Terms.asp"></a></p></div></div>
  140. </div>
  141. </body>
  142. </html>


You see the white box? This is what I want to make centered. Depending on the current code in FF is ok, in IE no. I can change the code and make it centered in IE but not in FF. What should I do to be correct in both browsers?

Notice that in the #middle I use some weird padding top-bottom. Its for the footer issue to avoid cover the middle content as it may be grow vertically.

Thank you very much for your time!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I think you should have a look at using the W3 Validator ... http://validator.w3.org/ ...

and also the correct CSS for your container will be:
Code: [ Select ]
div#container{
width:980px;
margin:0px auto 0px auto;
}
  1. div#container{
  2. width:980px;
  3. margin:0px auto 0px auto;
  4. }
  • Adama
  • Born
  • Born
  • Adama
  • Posts: 3

Post 3+ Months Ago

Hello righteous_trespasser
thanks for your reply.

I just did that but(as always) it gives me a report that has nothing to do with my page's problems. E.g. missing alts, mouseover-mouseout no attribute etc

Also I made the change your provided me for the container but nothing changed.

Gods! I feel very disappointed and useless after 8 years of designing!!!
  • seularts
  • Graduate
  • Graduate
  • User avatar
  • Posts: 153
  • Loc: Romania

Post 3+ Months Ago

try to use strict doc type and :
div#container{
width:980px;
margin:0 auto;
}
  • Adama
  • Born
  • Born
  • Adama
  • Posts: 3

Post 3+ Months Ago

Finally, I forced myself to change the structure because nothing worked :(

http://www.freewebs.com/free-adama/

Here is what I've done. Again I see many differences between IE and FF. Please, could you tell my mistakes? I see the flag not positioned the same, the separators in the top bar the same and I guess there are more visual differences than these.
Also, I made my search in google to find a good tutorial(a->z) for divs, taking the novice lvl to the higher, but no success! Can you suggest me one please?

I appreciate your time folks!

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 39 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.