943,741 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Alignment Issue (CSS/HTML)
Ad:
Permalink
Feb 21st, 2008
0

Alignment Issue (CSS/HTML)

Expand Post »
if you view this on a web page anyone know how i can align the middle part to the center? IF you view in IE it looks ok alisgnment wise tho ixels are screwed up, if you view it in firefox inside looks ok but middle chunk is aligned left :/

http://i5.photobucket.com/albums/y16.../ff-site-1.gif

http://i5.photobucket.com/albums/y16.../ie-site-1.gif

help me!!

thanks

Quote ...
<HTML>
<HEAD>
<TITLE>| ::Gears Of War :: | </TITLE>
<style>

body{
background-color:black};
text-align:center;
}

.container{
width:660px;
height:100px;
margin-left: auto;
margin-right:auto;
border:1px solid #AD9482;
background-position: center;
text-align: center;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.title{
height:10;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.head{
height:100;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.links{
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c1{
width:70;
height:500;
float:left;
background-color:#e0e0e0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c2{
width:255;
height:500;
float:left;
background-color:#d0d0d0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c3{
width:255;
height:500;
float:left;
background-color:#c0c0c0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c4{
width:70;
height:500;
float:left;
background-color:#b0b0b0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.foot{
clear:both;
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

body,td,th {
color: #55A0FF;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #750000;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
</style>

<BODY>
<center>
<div class="container">

<div class="title">
:<a href="index.html">home</a>:
:<a href="news.html">news</a>:
:<a href="forum.html">community</a>:
:<a href="about.html">about us</a>:
:<a href="contact.html">contact</a>:
</div>



<div class="head"><img src="banner.JPG"></div>

<div class="links">



</div>

<div class="c1";>
<div align="center">Column One</div>
</div>

<div class="c2">
<div align="center">Column Two</div>
</div>

<div class="c3">
<div align="center">Column Three</div>
</div>

<div class="c4">
<div align="center">Column Four</div>
</div>

<div class="foot">
<div align="center">footer</div>
</div>

</div>
</center>
</BODY>
</HTML>
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
lochii is offline Offline
33 posts
since Nov 2006
Permalink
Feb 21st, 2008
0

Re: Alignment Issue (CSS/HTML)

Try this:

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <HEAD>
  4. <TITLE>| ::Gears Of War :: | </TITLE>
  5. <style>
  6.  
  7. body{
  8. background-color:black};
  9. text-align:center;
  10. }
  11.  
  12. .container{
  13. width:660px;
  14. height:100px;
  15. margin-left: auto;
  16. margin-right:auto;
  17. border:1px solid #AD9482;
  18. background-position: center;
  19. text-align: center;
  20. margin-top: 10px;
  21. margin-right: 10px;
  22. margin-bottom: 10px;
  23. margin-left: 10px;
  24. padding-top: 10px;
  25. padding-right: 10px;
  26. padding-bottom: 10px;
  27. padding-left: 10px;
  28. }
  29.  
  30. .title{
  31. height:10;
  32. width:650;
  33. font-family: verdana;
  34. color: #000000;
  35. font-size: 10px;
  36. }
  37.  
  38. .head{
  39. height:100;
  40. width:650;
  41. font-family: verdana;
  42. color: #000000;
  43. font-size: 10px;
  44. }
  45.  
  46. .links{
  47. height:15;
  48. width:650;
  49. background-color:#a0a0a0;
  50. font-family: verdana;
  51. color: #000000;
  52. font-size: 10px;
  53. }
  54.  
  55. .c1{
  56. width:70;
  57. height:500;
  58. float:left;
  59. background-color:#e0e0e0;
  60. font-family: verdana;
  61. color: #000000;
  62. font-size: 10px;
  63. }
  64.  
  65. .c2{
  66. width:255;
  67. height:500;
  68. float:left;
  69. background-color:#d0d0d0;
  70. font-family: verdana;
  71. color: #000000;
  72. font-size: 10px;
  73. }
  74.  
  75. .c3{
  76. width:255;
  77. height:500;
  78. float:left;
  79. background-color:#c0c0c0;
  80. font-family: verdana;
  81. color: #000000;
  82. font-size: 10px;
  83. }
  84.  
  85. .c4{
  86. width:70;
  87. height:500;
  88. float:left;
  89. background-color:#b0b0b0;
  90. font-family: verdana;
  91. color: #000000;
  92. font-size: 10px;
  93. }
  94.  
  95. .foot{
  96. clear:both;
  97. height:15;
  98. width:650;
  99. background-color:#a0a0a0;
  100. font-family: verdana;
  101. color: #000000;
  102. font-size: 10px;
  103. }
  104.  
  105. body,td,th {
  106. color: #55A0FF;
  107. }
  108. a:link {
  109. color: #FFFFFF;
  110. text-decoration: none;
  111. }
  112. a:visited {
  113. text-decoration: none;
  114. color: #FFFFFF;
  115. }
  116. a:hover {
  117. text-decoration: none;
  118. color: #750000;
  119. }
  120. a:active {
  121. text-decoration: none;
  122. color: #FFFFFF;
  123. }
  124. </style>
  125.  
  126. <BODY>
  127. <center>
  128. <div class="container">
  129.  
  130. <div class="title">
  131. :<a href="index.html">home</a>:
  132. :<a href="news.html">news</a>:
  133. :<a href="forum.html">community</a>:
  134. :<a href="about.html">about us</a>:
  135. :<a href="contact.html">contact</a>:
  136. </div>
  137.  
  138.  
  139.  
  140. <div class="head"><img src="banner.JPG"></div>
  141.  
  142. <div class="links">
  143.  
  144.  
  145.  
  146. </div>
  147. <div style="margin-left:auto; margin-right:auto; width: 300px;">
  148.  
  149. <div class="c1";>
  150. <div align="center">Column One</div>
  151. </div>
  152.  
  153. <div class="c2">
  154. <div align="center">Column Two</div>
  155. </div>
  156.  
  157. <div class="c3">
  158. <div align="center">Column Three</div>
  159. </div>
  160.  
  161. <div class="c4">
  162. <div align="center">Column Four</div>
  163. </div>
  164. </div>
  165.  
  166. <div class="foot">
  167. <div align="center">footer</div>
  168. </div>
  169.  
  170. </div>
  171. </center></body>
  172. </html>
Team Colleague
Reputation Points: 92
Solved Threads: 21
Posting Pro in Training
FC Jamison is offline Offline
436 posts
since Jun 2004
Permalink
Feb 21st, 2008
0

Re: Alignment Issue (CSS/HTML)

Click to Expand / Collapse  Quote originally posted by FC Jamison ...
Try this:

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <HEAD>
  4. <TITLE>| ::Gears Of War :: | </TITLE>
  5. <style>
  6.  
  7. body{
  8. background-color:black};
  9. text-align:center;
  10. }
  11.  
  12. .container{
  13. width:660px;
  14. height:100px;
  15. margin-left: auto;
  16. margin-right:auto;
  17. border:1px solid #AD9482;
  18. background-position: center;
  19. text-align: center;
  20. margin-top: 10px;
  21. margin-right: 10px;
  22. margin-bottom: 10px;
  23. margin-left: 10px;
  24. padding-top: 10px;
  25. padding-right: 10px;
  26. padding-bottom: 10px;
  27. padding-left: 10px;
  28. }
  29.  
  30. .title{
  31. height:10;
  32. width:650;
  33. font-family: verdana;
  34. color: #000000;
  35. font-size: 10px;
  36. }
  37.  
  38. .head{
  39. height:100;
  40. width:650;
  41. font-family: verdana;
  42. color: #000000;
  43. font-size: 10px;
  44. }
  45.  
  46. .links{
  47. height:15;
  48. width:650;
  49. background-color:#a0a0a0;
  50. font-family: verdana;
  51. color: #000000;
  52. font-size: 10px;
  53. }
  54.  
  55. .c1{
  56. width:70;
  57. height:500;
  58. float:left;
  59. background-color:#e0e0e0;
  60. font-family: verdana;
  61. color: #000000;
  62. font-size: 10px;
  63. }
  64.  
  65. .c2{
  66. width:255;
  67. height:500;
  68. float:left;
  69. background-color:#d0d0d0;
  70. font-family: verdana;
  71. color: #000000;
  72. font-size: 10px;
  73. }
  74.  
  75. .c3{
  76. width:255;
  77. height:500;
  78. float:left;
  79. background-color:#c0c0c0;
  80. font-family: verdana;
  81. color: #000000;
  82. font-size: 10px;
  83. }
  84.  
  85. .c4{
  86. width:70;
  87. height:500;
  88. float:left;
  89. background-color:#b0b0b0;
  90. font-family: verdana;
  91. color: #000000;
  92. font-size: 10px;
  93. }
  94.  
  95. .foot{
  96. clear:both;
  97. height:15;
  98. width:650;
  99. background-color:#a0a0a0;
  100. font-family: verdana;
  101. color: #000000;
  102. font-size: 10px;
  103. }
  104.  
  105. body,td,th {
  106. color: #55A0FF;
  107. }
  108. a:link {
  109. color: #FFFFFF;
  110. text-decoration: none;
  111. }
  112. a:visited {
  113. text-decoration: none;
  114. color: #FFFFFF;
  115. }
  116. a:hover {
  117. text-decoration: none;
  118. color: #750000;
  119. }
  120. a:active {
  121. text-decoration: none;
  122. color: #FFFFFF;
  123. }
  124. </style>
  125.  
  126. <BODY>
  127. <center>
  128. <div class="container">
  129.  
  130. <div class="title">
  131. :<a href="index.html">home</a>:
  132. :<a href="news.html">news</a>:
  133. :<a href="forum.html">community</a>:
  134. :<a href="about.html">about us</a>:
  135. :<a href="contact.html">contact</a>:
  136. </div>
  137.  
  138.  
  139.  
  140. <div class="head"><img src="banner.JPG"></div>
  141.  
  142. <div class="links">
  143.  
  144.  
  145.  
  146. </div>
  147. <div style="margin-left:auto; margin-right:auto; width: 300px;">
  148.  
  149. <div class="c1";>
  150. <div align="center">Column One</div>
  151. </div>
  152.  
  153. <div class="c2">
  154. <div align="center">Column Two</div>
  155. </div>
  156.  
  157. <div class="c3">
  158. <div align="center">Column Three</div>
  159. </div>
  160.  
  161. <div class="c4">
  162. <div align="center">Column Four</div>
  163. </div>
  164. </div>
  165.  
  166. <div class="foot">
  167. <div align="center">footer</div>
  168. </div>
  169.  
  170. </div>
  171. </center></body>
  172. </html>

hey thanks for the reply, it doesnt work straight away so ill have to tweak it a lot and see how it goes, ill post back in a white and update ya on the progress thanks for your help man
Reputation Points: 10
Solved Threads: 0
Light Poster
lochii is offline Offline
33 posts
since Nov 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Nav bar in dreamweaver dissappears after click
Next Thread in HTML and CSS Forum Timeline: help desk software





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC