HTML and CSS RSS HTML and CSS RSS

Alignment Issue (CSS/HTML)

Reply

•
•
Join Date: Nov 2006
Posts: 33
Reputation: lochii is an unknown quantity at this point 
Solved Threads: 0
lochii lochii is offline Offline
Light Poster

Alignment Issue (CSS/HTML)

 
0
  #1
Feb 21st, 2008
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

•
•
•
•
<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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: Alignment Issue (CSS/HTML)

 
0
  #2
Feb 21st, 2008
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2006
Posts: 33
Reputation: lochii is an unknown quantity at this point 
Solved Threads: 0
lochii lochii is offline Offline
Light Poster

Re: Alignment Issue (CSS/HTML)

 
0
  #3
Feb 21st, 2008
•
•
•
•
Originally Posted by FC Jamison View Post
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
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC