HTML and CSS RSS HTML and CSS RSS

Horizontal centering issue with varying # of spans

Reply

•
•
Join Date: Feb 2009
Posts: 3
Reputation: waycool141 is an unknown quantity at this point 
Solved Threads: 0
waycool141's Avatar
waycool141 waycool141 is offline Offline
Newbie Poster

Horizontal centering issue with varying # of spans

 
0
  #1
Feb 11th, 2009
OK, I guess this should be simple but I haven't been able to figure it out or find an answer. I am displaying a bar of "action buttons" that are spans. I need these action buttons to center, there can be anywhere from 2 to 7 of them. I can get some centering using fixed width but since the number of buttons varies this doesnt really work. I have no problem adding or changing container types. See the HTML and CSS below...

Please help and thanks!!

The HTML:
html Syntax (Toggle Plain Text) 
  1. <div class="widgetWrapper">
  2. <div class="widgetWrapperTopHalf">
  3. <div class="widgetName">Widget Name</div>
  4. <div class="widgetDescription">This is some kind of widget</div>
  5. <div class="widgetThumb">
  6. <img class="widgetThumbImage" src="http://www.reel.com/Content/reelimages/reviews/200x130_simpsons_6.jpg" />
  7. </div>
  8. </div>
  9. <div class="widgetWrapperBottomHalf">
  10. <div class="widgetActionBar">
  11. <span class="widgetActionButton" style="color:red;" title="action1">A</span>
  12. <span class="widgetActionButton" style="color:blue;" title="action2">B</span>
  13. <span class="widgetActionButton" style="color:white;" title="action3">C</span>
  14. <span class="widgetActionButton" style="color:black;" title="action4">D</span>
  15. </div>
  16. </div>
  17. </div>

The CSS:
css Syntax (Toggle Plain Text) 
  1. <style type="text/css">
  2. .widgetWrapper
  3. {
  4. display:block; 
  5. float:left;
  6. margin-left:7px;
  7. margin-top:7px;
  8. padding-top:10px;
  9. padding-right:5px;
  10. padding-left:5px;
  11. border-right:solid 1px #CFCFCF;
  12. border-left:solid 1px #ECECEC;
  13. border-bottom:solid 2px #CFCFCF;
  14. border-top:solid 1px #ECECEC;
  15. height:350px;
  16. width:250px;
  17. text-align:center;
  18. }
  19.  
  20. .widgetWrapperTopHalf
  21. {
  22. display:block; 
  23. height:80%;
  24. width:100%;
  25. }
  26.  
  27. .widgetWrapperBottomHalf
  28. {
  29. display:block; 
  30. height:20%;
  31. padding:0;
  32. width:100%; 
  33. float:right;
  34. text-align:center;
  35. }
  36.  
  37. .widgetName
  38. {
  39. position:relative;
  40. font-size:11px;
  41. font-weight: Bold;
  42. color: #000000; 
  43. text-align:center;
  44. display:block;
  45. clear:both;
  46. white-spacere-wrap;
  47. margin-top:-10px;
  48. }
  49.  
  50. .widgetThumb
  51. {
  52. width:100%;
  53. display:block;
  54. margin-top:5px;
  55. padding:0px;
  56. }
  57. .widgetThumb img
  58. {
  59. cursorointer;
  60. }
  61.  
  62. .widgetActionBar
  63. {
  64. clear:both;
  65. display:block;
  66. height:24px;
  67. width:100%;
  68. text-align:center;
  69. }
  70.  
  71. .widgetActionButton
  72. {
  73. /* position:relative;*/
  74. float:left;
  75. display:table;
  76. clear:none;
  77. height:20px;
  78. width:17px; 
  79. margin-left:5px;
  80. margin-right:5px;
  81. padding-left:2px;
  82. cursorointer;
  83. background-color:#C0C0C0;
  84. border-top:solid 1px #bababa;
  85. border-left:solid 1px #bababa;
  86. border-right:solid 2px #455769;
  87. border-bottom:solid 2px #455769;
  88. } 
  89.  
  90. </style>
We must accept finite disappointment, but never lose infinite hope. -- Martin Luther King, Jr.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 247
Reputation: cmills83 is an unknown quantity at this point 
Solved Threads: 1
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Horizontal centering issue with varying # of spans

 
0
  #2
Feb 11th, 2009
make the margin for widgetWrapper like this

HTML and CSS Syntax (Toggle Plain Text) 
  1. margin:0 auto;
or
HTML and CSS Syntax (Toggle Plain Text) 
  1. margin-left:auto;
  2. margin-right:auto;
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 3
Reputation: waycool141 is an unknown quantity at this point 
Solved Threads: 0
waycool141's Avatar
waycool141 waycool141 is offline Offline
Newbie Poster

Re: Horizontal centering issue with varying # of spans

 
0
  #3
Feb 12th, 2009
•
•
•
•
Originally Posted by cmills83 View Post
make the margin for widgetWrapper like this

HTML and CSS Syntax (Toggle Plain Text) 
  1. margin:0 auto;
or
HTML and CSS Syntax (Toggle Plain Text) 
  1. margin-left:auto;
  2. margin-right:auto;
I tried this but it did not work.
Thanks for replying though!

I actually received the answer on another forum I posted on. For anyone curious here was the solution, the .widgetActionButton CSS class was changed.
css Syntax (Toggle Plain Text) 
  1. .widgetActionButton
  2. {
  3. 	height:20px;
  4. 	width:17px;
  5. 	display: table-cell;
  6. 	display: inline-table; 
  7. 	display: inline-block;
  8. 	margin-left:5px;
  9. 	margin-right:5px;
  10. 	padding-left:2px;
  11. 	cursor:pointer;
  12. 	background-color:#C0C0C0;
  13. 	border-top:solid 1px #bababa;
  14. 	border-left:solid 1px #bababa;
  15. 	border-right:solid 2px #455769;
  16. 	border-bottom:solid 2px #455769;
  17. }
Last edited by waycool141; Feb 12th, 2009 at 11:19 am.
We must accept finite disappointment, but never lose infinite hope. -- Martin Luther King, Jr.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 247
Reputation: cmills83 is an unknown quantity at this point 
Solved Threads: 1
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Horizontal centering issue with varying # of spans

 
0
  #4
Feb 12th, 2009
is that working on ie6?
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 3
Reputation: waycool141 is an unknown quantity at this point 
Solved Threads: 0
waycool141's Avatar
waycool141 waycool141 is offline Offline
Newbie Poster

Re: Horizontal centering issue with varying # of spans

 
0
  #5
Feb 12th, 2009
Yes, I tested in IE 6.0 and Safari and its working great. I haven't tested in IE 7 as of yet...
We must accept finite disappointment, but never lose infinite hope. -- Martin Luther King, Jr.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 247
Reputation: cmills83 is an unknown quantity at this point 
Solved Threads: 1
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: Horizontal centering issue with varying # of spans

 
0
  #6
Feb 12th, 2009
you should be fine then, sometimes theres ie6 issues with the display:table
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:
•
•
•
•



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 perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC