6
\$\begingroup\$

I've a small assignment to do: style a given HTML file with CSS.

My result looks exactly as it should. But I'm not really satisfied with my style sheet. I'm sure there are better ways to achieve the same.

The different sizes are not specified. I had just an image as template.

How would a real web design solve this task?

jsFiddle

body > div {
    width: 404px;
    border: 1px solid black;
    padding: 8px;
}

.header {
    margin-bottom: 5px;
}

.header input {
    width: 400px;
    height: 40px;
    border: 1px solid black;
    text-align: right;
}

.numberFields {
    margin: 0;
    width: 360px;
    font-size:0;
    overflow: auto;
    float: left;
}

.numberFields input {
    background-color: green;
    border: 1px solid black;
    width: 120px;
    height: 40px;
}

.numberFields input[name="0"] {
    width: 360px;
}

.operations {
    margin-left: 4px;
    width: 40px;
    font-size: 0;
    display: inline-block;
}

.operations input {
    background-color: purple;
    border: 1px solid black;
    width: 40px;
    height: 40px;
}

.sum {
    margin-top: 5px;
}

.sum input {
    background-color: purple;
    border: 1px solid black;
    width: 404px;
    height: 40px;
}
<body>
    <div>
        <div class="header">
            <input name="1" value="1" disabled />
        </div>
        <div class="numberFields">
            <input type="button" name="1" value="1" />
            <input type="button" name="2" value="2" />
            <input type="button" name="3" value="3" />
            <input type="button" name="4" value="4" />
            <input type="button" name="5" value="5" />
            <input type="button" name="6" value="6" />
            <input type="button" name="7" value="7" />
            <input type="button" name="8" value="8" />
            <input type="button" name="9" value="9" />
            <input type="button" name="0" value="0" />
        </div>
        <div class="operations">
            <input type="button" name="+" value="+" />
            <input type="button" name="-" value="-" />
            <input type="button" name="*" value="*" />
            <input type="button" name="/" value="/" />
        </div>
        <div class="sum">
            <input type="button" name="=" value="=" />
        </div>
    </div>
</body>

\$\endgroup\$
3
  • \$\begingroup\$ Functionally, it looks like a calculator. However, you've used a telephone-style number keypad, which is very odd. The order of the operators is also reversed compared to a typical calculator layout. \$\endgroup\$ Mar 2, 2015 at 20:53
  • \$\begingroup\$ The task was to rebuild the same calculator as from an image template. The html code was already given. My task was to write the style sheet to get this 1:1 layout. My question is, is there a better way to deal with the width and overflow as I did? I'm always not sure how to use overflow, display, float or clear \$\endgroup\$
    – dannyyy
    Mar 2, 2015 at 21:05
  • 1
    \$\begingroup\$ it depends what you want to achieve... do you want it to be responsive? \$\endgroup\$
    – maioman
    Mar 2, 2015 at 22:23

2 Answers 2

2
\$\begingroup\$

First, your CSS has no errors, which is very good. You can check for errors at the W3C validator.

Looking through your CSS, it looks very neat, and I would only remove a little bit of unnecessary code. Also, the display seems to be optimized for IE. I set it for FireFox and Chrome, and it displays almost correctly in IE. The trouble is, the box for displaying the output is visibly small in FireFox and Chrome. With my changes, it is 1 pixel too large in IE, but it is not as noticeable.

First, I would just use the body element here, instead of body > div:

body > div {
    width: 404px;
    border: 1px solid black;
    padding: 8px;
}

Right here, I adding a small padding so the font would have a small amount of space between it and the border:

.header input {
    /* ... */
    padding-right: 2px;
}

I found I could remove the overflow: auto; lines without effecting the display.

In .operations, you don't need to set font-size: 0;. I do not know why you need to do that to remove the spacing in the .numberFields class, but I was unable to get it working without it. I do not like that as it is not clear why you need to set the font-size there, and there is probably a cleaner way to do it, but the usual trick of using a negative margin value isn't working, and neither did setting the padding to 0px.

I did not make any other changes; as I said above, your CSS is very clean and neat.

\$\endgroup\$
-1
\$\begingroup\$

in this version I added a little responsiveness,

it can be further optimized but it depends where and how you'll use it...

the main changes from yours are the fact that instead of using fixed width values I opted for percentages (to give horizontale responsiveness);

other less important changes (but more web-oriented) where made on the syntax of the CSS like:

last-of-type instead of selector by name=..

box-sizing:border-box; which is usually default in modern websites

overflow:hidden on calc screen

added some display:block; to clear left-right

body > div {
    width:auto;
    max-width: 404px;
    height:auto;
    border: 1px solid black;
    padding: 2%;
    box-sizing:border-box;
    display:block
}

.header {
    margin-bottom: 5px;
    width: 100%;
    display:block
    
}

.header input {
    width: 100%;
    height:40px;
    border: 1px solid black;
    text-align: right;
    overflow:hidden;
}

.numberFields {
    display:block;
    margin: 0;
    width: 77%;
    font-size:0;
    overflow: auto;
    float: left;
}

.numberFields input {
    background-color: green;
    border: 1px solid black;
    width: 33.33%;
    height: 40px;
    display:inline-block;
}

.numberFields input:last-of-type{
    width: 100%;
}

.operations {
    margin-left: 4px;
    width: 20%;
    font-size: 0;
    display: inline-block;
    float:right;
}

.operations input {
    background-color: purple;
    border: 1px solid black;
    width: 100%;
    height: 40px;
}

.sum {
    display:block;
}

.sum input {
    background-color: purple;
    border: 1px solid black;
    width: 100%;
    height: 40px;
    margin-top: 5px;
}
<body>
    <div>
        <div class="header">
            <input name="1" value="1" disabled />
        </div>
        <div class="numberFields">
            <input type="button" name="1" value="1" />
            <input type="button" name="2" value="2" />
            <input type="button" name="3" value="3" />
            <input type="button" name="4" value="4" />
            <input type="button" name="5" value="5" />
            <input type="button" name="6" value="6" />
            <input type="button" name="7" value="7" />
            <input type="button" name="8" value="8" />
            <input type="button" name="9" value="9" />
            <input type="button" name="0" value="0" />
        </div>
        <div class="operations">
            <input type="button" name="+" value="+" />
            <input type="button" name="-" value="-" />
            <input type="button" name="*" value="*" />
            <input type="button" name="/" value="/" />
        </div>
        <div class="sum">
            <input type="button" name="=" value="=" />
        </div>
    </div>
</body>

BTW your original code is fine and as I can see there aren't any drawbacks..

\$\endgroup\$
1
  • 1
    \$\begingroup\$ Right now, your answer is only code - which is shunned upon. Please add context and explanations to your answer. \$\endgroup\$
    – SirPython
    Mar 2, 2015 at 23:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.