Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS HTML5/CSS
Hello there, I need a help. I made a calculator using html and css. Now I need to style my calculator more like this http://chrislorensson.com/design/css3-calculator/ But the css code in this link much bigger and complex. I'm still a beginner. So can anybody help me to style my calculator like the one in the link in a simple way. Here is my html code:
<body>
 <table class="calculator" id="calc">
 
 			<tr>
      			<td colspan="4" class="calc_td_result">
<input type="text" name="calc_result" id="calc_result" class="calc_result" onkeydown="javascript:key_detect_calc('calc',event);"/>
      			</td>
   			</tr>
            
            <tr>
            	<td class="calc_td_btn">
                	<input type="button" class="calc_btn" value="M+" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="M-" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="MR" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="CE" onclick= />
                </td>
                
                 <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="←" onclick= />
                </td>
              </tr>
              
              
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="7" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="8" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="9" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="÷" onclick= />
                </td>
                
                 <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="mod" onclick= />
                </td>
            </tr>
            
            
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="4" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="5" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="6" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="x" onclick= />
                </td>
                
                <td class="calc_td_btn" rowspan="3">
                    <input type="button" class="calc_btn" value="=" onclick= />
                </td> 
            </tr>
            
            
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="1" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="2" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="3" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="-" onclick= />
                </td>
            </tr>
            
                
            <tr>
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="0" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="±" onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="." onclick= />
                </td>
                
                <td class="calc_td_btn">
                    <input type="button" class="calc_btn" value="+" onclick=+ />
                </td>
            </tr>
        </table>
Posted 9-Jan-13 2:00am
Edited 10-Jan-13 8:46am
v3
Comments
Sandeep Mewara at 9-Jan-13 8:14am
   
So can anybody help me to style my calculator like the one in the link in a simple way.
What exactly you need help in? Where are you stuck? What are you unable to do? Be specific.
CrugerBrent at 9-Jan-13 10:41am
   
@Sandeep Mewara: I want to make more attractive my calculator.
ryanb31 at 9-Jan-13 8:29am
   
If you want it to look that way, chances are you'll need to do it the same way. It would be a good learning experience for you anyway.
Marcus Kramer at 10-Jan-13 14:46pm
   
Please don't remove the question's content as it may provide relevance to someone at some point in time. Just update the subject line to say solved, or provide your own answer and mark it as correct. Cheers.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

A great way to learn CSS is to use the css file(s) from the site in question and use it as a starting point. Go into the CSS and play with values until you get it how you like it. Doing it this way will drive you to intelligent and specific questions on how things are done in CSS that will help you learn. Remember that in any software development there is nothing more valuable in learning than the willingness to go into code and break and subsequently fix things to learn how they work.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

just learn the basics of CSS from W3Schools.com and you can easily create your own or can esily use the css downloaded for designing your calculator
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Maciej Los 350
1 OriginalGriff 283
2 Nguyen.H.H.Dang 230
3 Sergey Alexandrovich Kryukov 230
4 Peter Leow 195


Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 10 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid