Hello I need a reproduction of the table below, xhtml and css, 350px large . It will be integrated on a webpage, make sure you are using the right id and selectors so there are no conflicts with other css files . http://www.sitedetest.biz/designtable.jpg
Here is your table: <html> <head> <style> #designTable { font-family: tahoma, serif; font-size: 12px; width: 350px; border-spacing: 0px; background-color: #7f7f7f; border-collapse: collapse; } #designTable td { padding: 12px 5px; border: 2px solid #e9eb0e; } #designTable th { padding: 5px; font-size: 14px; border: 2px solid #e9eb0e; background-color: #5c575b; color: white; font-weight: bold; text-align: left; } </style> </head> <body> <table id="designTable"> <tr> <th colspan="2">Design</th> </tr> <tr> <td>Electrical design</td> <td>Autocad-SEE Electrical - Xelec - EPLAN</td> </tr> <tr> <td>Pneumatic design</td> <td>Autocad-SEE Electrical - XFluid - EPLAN</td> </tr> <tr> <td>PLC Programming</td> <td> Siemens - Schneider - Rockwell - Omron - Mitsubishi - ABB - Phoenix Contact </td> </tr> <tr> <td>HMI Programming</td> <td> Siemens (WinCC - Odile - IHMP) <br /> Schneider (Procafe - Magelis - Odile - IHMP) <br /> April (Orphee) <br /> Pilz <br /> Rockwell (Panel Builder - RSView) <br /> Intouch <br /> Cimplicity <br /> PC Vue </td> </tr> <tr> <th colspan="2">Resources</th> </tr> <tr> <td colspan="2"> Hardware design Leaders : 6 pers <br /><br /> Hardware designers : 24 pers <br /><br /> PLC engineers leaders : 10 pers <br /><br /> PLC Engineers : 50 prs </td> </tr> </table> </body> </html> Code (markup): Sent you my paypal address in case you want to pay me, Best regards, Duluman Edi.
As I already wrote you in the PM schlogo, the problem is not in my css but in yours. It is your fault for adding a wrong "!important" attribute after : [COLOR=#000000][FONT=Consolas]div.mapmap{[/FONT][/COLOR] [COLOR=#000000][FONT=Consolas] [COLOR=#C80000]text-align[/COLOR]:[COLOR=#07909A]center[/COLOR];[/FONT][/COLOR] [COLOR=#000000][FONT=Consolas] [COLOR=#C80000]background[/COLOR]: [COLOR=#07909A]#fedf00[/COLOR];[/FONT][/COLOR] [COLOR=#000000][FONT=Consolas] [COLOR=#C80000]margin[/COLOR]: [COLOR=#3200FF]1px[/COLOR];[/FONT][/COLOR] [COLOR=#000000][FONT=Consolas] width: 632px; clear:both; padding:10px 3px 10px 3px; }!important < ------ THIS IS WRONG, IT SHOULDNT BE HERE it is overlapping #designTable[/FONT][/COLOR] Code (markup): And delete that table {margin-right: 5px; float: left;} since I added the attributes to #designTable So delete that !important attribute and add "color: black;" to #designTable since your body text color is gray. The code should be: div.mapmap{ [COLOR=#C80000]text-align[/COLOR]:[COLOR=#07909A]center[/COLOR]; [COLOR=#C80000]background[/COLOR]: [COLOR=#07909A]#fedf00[/COLOR]; [COLOR=#C80000]margin[/COLOR]: [COLOR=#3200FF]1px[/COLOR]; [COLOR=#C80000]width[/COLOR]: [COLOR=#3200FF]632px[/COLOR]; [COLOR=#C80000]clear[/COLOR]:[COLOR=#07909A]both[/COLOR]; [COLOR=#C80000]padding[/COLOR]:[COLOR=#3200FF]10px[/COLOR] [COLOR=#3200FF]3px[/COLOR] [COLOR=#3200FF]10px[/COLOR] [COLOR=#3200FF]3px[/COLOR]; } #designTable { [COLOR=#C80000]font-family[/COLOR]: tahoma, [COLOR=#07909A]serif[/COLOR]; [COLOR=#C80000]font-size[/COLOR]: [COLOR=#3200FF]12px[/COLOR]; [COLOR=#C80000]width[/COLOR]: [COLOR=#3200FF]350px[/COLOR]; [COLOR=#C80000]border-spacing[/COLOR]: [COLOR=#3200FF]0px[/COLOR]; background-color: #7f7f7f; border-collapse: collapse; float:left; margin-right:5px; } #designTable td { color: black; padding: 12px 5px; border: 2px solid #e9eb0e; } #designTable th { padding: 5px; font-size: 14px; border: 2px solid #e9eb0e; background-color: #5c575b; color: white; font-weight: bold; text-align: left; } Code (markup):
hello Seems to work now, please just check what needs to be modified to get the text beside the table and we re done, tks !