Both Codes
Background/Border
`<div style="width: 88px; height: 24px; background-color:#ffffff; color:#000000; border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> </div>`
Display:Block
<div style="display:block; width: 89px; height:24px; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;margin: 0px 0px 0 0px;">
</div>
<div style="display:block; width: 88px;height:24px;background-color:#ffffff;margin: -24px 0px 0 88px;">
</div>
<div style="display:block; width: 89px; height:24px; background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; margin: -24px 0px 0 177px;">
</div>
Both of those are several times too long compared to doing it properly. Dump them and start over with a much shorter version.
To use less code learn how to use CSS External Style Sheets link
Each div is repeating items:
<div style="display:block; width: 89px; height:24px; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;margin: 0px 0px 0 0px;">
</div>
<div style="display:block; width: 88px;height:24px;background-color:#ffffff;margin: -24px 0px 0 88px;">
</div>
<div style="display:block; width: 89px; height:24px; background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; margin: -24px 0px 0 177px;">
</div>
CSS External style-sheet
.div1,
.div2,
.div3 {display:block; height:24px; width: 88px;}
.div1,
.div3 {width: 89px;}
.bg1 {background-color:#00ffff;}
.bg2 {background-color:#ffffff;}
.bg3 {background-color:#ff00fff;}
.bd1 {border-top-left-radius:50px;border-bottom-left-radius:50px;}
.bd2 {}
.bd3 {border-top-right-radius:50px;border-bottom-right-radius:50px;}
.mg1 {margin: 0px 0px 0 0px;}
.mg2 {margin: -24px 0px 0 88px;}
.mg3 {margin: -24px 0px 0 177px;}
**HTML **
```
**Edit:**
Added one of many descriptive web-ages that are available.
Amended and sligtly optimised CSS style-sheet,
5 Likes
A little shorter again with a bit of nit picking.
No need to tell a div to display as block.
Shorthand colours and shorthand border-radius.
.div1,
.div2,
.div3 {height:24px; width: 88px}
.div1,
.div3 {width: 89px}
.bg1 {background-color:#0ff}
.bg2 {background-color:#fff}
.bg3 {background-color:#f0f}
.bd1 {border-radius:50px 0 0 50px}
.bd3 {border-radius:0 50px 50px 0}
.mg1 {margin: 0px 0px 0 0px}
.mg2 {margin: -24px 0px 0 88px}
.mg3 {margin: -24px 0px 0 177px}
3 Likes
Can anyone join in?
.div1,
.div2,
.div3 {height:24px; width: 88px;}
.div1,
.div3 {width: 89px;}
.bg1 {background-color:#0ff;}
.bg2 {background-color:#fff;}
.bg3 {background-color:#f0f;}
.bd1 {border-radius:50px 0 0 50px;}
.bd3 {border-radius:0 50px 50px 0;}
.mg1 {margin: 0;}
.mg2 {margin: -24px 0 0 88px;}
.mg3 {margin: -24px 0 0 177px;}
There was a dearth of semi-colons to my eye, and a surfit of “px’s”
3 Likes
The semi colons were me nit picking, being the last they are not needed. The px was a nit picking opportunity missed.
3 Likes
While I know that to be true, I always put them in anyway. The main reason for that is to ensure that if I add a new rule later, I don’t spend ages trying to debug it before I notice I’d forgotten to add in the semi-colon preceding it. (And yes - that’s the voice of experience. )
5 Likes
Well worth reading
https://www.sitepoint.com/google-html-css-javascript-style-guides/
end every declaration with a semi-colon (even the last one)
1 Like
system
Closed
October 7, 2016, 5:23am
13
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.