All over [clear:left;] One small piece of code.
Take that to everyone on here who said it couldn’t be done.http://www.cssdesk.com/afMAN
<a href="" style="float:left;margin: 2px 2px 0 2px; width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></a>
<a href="" style="float:left;margin: 2px 2px 0 2px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>
<a href="" style="float:left;margin: 2px 2px 0 2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>
<a href="" style="float:left;margin: 2px 2px 0 2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>
<a href="" style="float:left;margin: 2px 2px 0 2px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px"></a>
<div style="width:266px" onclick="myObject=document.getElementById('myObj'); myObject.style.display='block'; this.style.display='none'">
<a style="float:left;margin:0 0 0 2px;clear:left;width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000;
border-left:89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> </a>
</div>
<div id="myObj" style="display: none; clear:left;margin-left:2px;">
</div>
<a href="" target="_blank" style="float:left;margin: 0 2px 2px 2px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000; clear:left;" onmouseover="this.style.backgroundColor='#abe9f7'" onmouseout="this.style.backgroundColor='#00a0b0'"></a>
<a href="" target="_blank" style="float:left;margin: 0 2px 2px 2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;" onmouseover="this.style.backgroundColor='#badac5'" onmouseout="this.style.backgroundColor='#6a4a3c'"></a>
<a href="" target="_blank" style="float:left;margin: 0 2px 2px 2px; width: 50px; height: 50px; background-color:#cc333f; color:#000000;" onmouseover="this.style.backgroundColor='#b7ab9d'" onmouseout="this.style.backgroundColor='#cc333f'"></a>
<a href="" target="_blank" style="float:left;margin: 0 2px 2px 2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;" onmouseover="this.style.backgroundColor='#4679c7'" onmouseout="this.style.backgroundColor='#eb6841'"></a>
<a href="" target="_blank" style="float:left;margin: 0 2px 2px 2px; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21'" onmouseout="this.style.backgroundColor='#edc951'"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000; clear:left;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000; clear:left;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#00a0b0; clear:left;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0; color:#000000; clear:left; border-bottom-left-radius:50px;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>
<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000; border-bottom-right-radius:50px;"></a>
We didn’t say it couldn’t be done. We said you were using poor coding practices and we wouldn’t do it the way you are doing it.
I’m glad you’re happy with it, but this is not an example for others to follow .
4 Likes
You gave me a hard time about it though. And all it ended up needing was a small piece of code.
You gave yourself a hard time about it, by ignoring all the sound advice from highly-knowledgeable members. And you’re still giving yourself a hard time, by reverting to a poorer version of your code, even after you’ve been given better code to work with.
Adding [clear:left;] made it even poorer, how so?
bedakb
June 30, 2016, 10:58am
6
Well if you don’t want, I would say this
Thanks @TechnoBear , @SamA74 and other folks who helped you
3 Likes
SamA74
June 30, 2016, 11:00am
7
Don’t forget @ronpat who endured the most.
2 Likes
ronpat
June 30, 2016, 11:00am
8
Because it is not necessary. The gadget is not properly framed.
A person in chat on stackoverflow helped me.
What do you mean, not properly framed?
That’s not what I’m referring to. I’m referring to the fact that you have been given code without the inline styles, and without the use of <a> tags for elements which are not intended to function as links, yet you have reverted to this version, despite having had it explained to you more than once why it is incorrect.
1 Like
bedakb
June 30, 2016, 11:01am
12
Sorry, thanks @ronpat too, I didn’t follow the topic, there usually was more than 150 replies.
2 Likes
How would you have done it differently?
I don’t understand what you mean by not properly framed. explain.
If you consider providing outdated and poorly constructed code for you to be more helpful than attempting to teach you how to create sound code for yourself, then that’s fine. It’s not my view, but I wish you well.
1 Like
You never know, someone else may have a similar issue.
ronpat
June 30, 2016, 11:04am
17
I did it differently in that last post of code that I sent you.
But Your “code is finally complete” and all issues are [RESOLVED] thanks to your chat friend on SO, I presume. Bully for you.
That code had how many lines in it? It had a ton. This code has way fewer lines than that one, am I right?
Yes, unfortunately there will always be poor coders I’m afraid.
2 Likes
You mean this whole chunk of code, compared to the very code I used. [5101] characters compared to the one you used. [5117]
I stand corrected, [5998] to [5117] ok, fine you win on that.
body {
background-color:#def;
}
.outer {
width:270px;
margin:0 auto;
}
.topwrap,
.bottomwrap {
overflow:hidden;
}
.buttonbar {
padding:0 2px;
}
.buttonbar > a {
display:block;
width:88px;
height:24px;
cursor:pointer;
background-color:#fff;
color:#000;
border-left:89px solid #0ff;
border-right:89px solid #f0f;
border-radius:12px;
margin:0;
}
object {
display:block;
}
.topwrap a {
float:left;
width:50px;
height:50px;
color:#000;
margin:2px 2px 0 2px;
}
.topwrap a:nth-child(1) {background-color:#00a0b0; border-top-left-radius:50px;}
.topwrap a:nth-child(2) {background-color:#6a4a3c;}
.topwrap a:nth-child(3) {background-color:#cc333f;}
.topwrap a:nth-child(4) {background-color:#eb6841;}
.topwrap a:nth-child(5) {background-color:#edc951; border-top-right-radius:50px;}
#myObj {
display:none;
padding:0 2px;
}
.bottomwrap a {
float:left;
width:50px;
height:50px;
color:#000;
margin:2px;
}
.bottomwrap a:nth-child(1) {background-color:#00a0b0;margin-top:0;}
.bottomwrap a:nth-child(2) {background-color:#6a4a3c;margin-top:0;}
.bottomwrap a:nth-child(3) {background-color:#cc333f;margin-top:0;}
.bottomwrap a:nth-child(4) {background-color:#eb6841;margin-top:0;}
.bottomwrap a:nth-child(5) {background-color:#edc951;margin-top:0;}
.bottomwrap a:nth-child(6),
.bottomwrap a:nth-child(11),
.bottomwrap a:nth-child(16),
.bottomwrap a:nth-child(21) {background-color:#00a0b0;}
.bottomwrap a:nth-child(21) {border-bottom-left-radius:50px;}
.bottomwrap a:nth-child(7),
.bottomwrap a:nth-child(12),
.bottomwrap a:nth-child(17),
.bottomwrap a:nth-child(22) {background-color:#6a4a3c;}
.bottomwrap a:nth-child(8),
.bottomwrap a:nth-child(13),
.bottomwrap a:nth-child(18),
.bottomwrap a:nth-child(23) {background-color:#cc333f;}
.bottomwrap a:nth-child(9),
.bottomwrap a:nth-child(14),
.bottomwrap a:nth-child(19),
.bottomwrap a:nth-child(24) {background-color:#eb6841;}
.bottomwrap a:nth-child(10),
.bottomwrap a:nth-child(15),
.bottomwrap a:nth-child(20),
.bottomwrap a:nth-child(25) {background-color:#edc951;}
.bottomwrap a:nth-child(25) {border-bottom-right-radius:50px;}
.topwrap a:hover,
.bottomwrap a:hover {box-shadow:0 0 5px 2px inset;}
</style>
</head>
<body>
<div class="outer">
<div class="topwrap">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
<div class="buttonbar" onclick="myObject=document.getElementById('myObj'); myObject.style.display='block'; this.style.display='none'">
<a></a>
</div>
<div id="myObj" style="">
<object data="https://googledrive.com/host/0B0xSChaP7F1oZUNod21IUDA3Qm8" type="application/x-shockwave-flash" id="player1" width="266" height="24">
<param name="movie" value="https://googledrive.com/host/0B0xSChaP7F1oZUNod21IUDA3Qm8"/>
<param name="bgcolor" value="#000"/>
<param name="width" value="266"/>
<param name="height" value="24"/>
<param name="quality" value="high"/>
<param name="menu" value="false"/>
<param name="wmode" value="opaque"/>
<param name="allowfullscreen" value="false"/>
<param name="allowscriptaccess" value="always"/>
<param name="flashvars" value="file=http://hi5.1980s.fm/;stream.mp3&type=sound&autostart=true&controlbar=bottom&icons=false&duration=999999&volume=100&backcolor=000000&frontcolor=ffffff&lightcolor=0059dd"/>
</object>
</div>
<div class="bottomwrap">
<a href="" target="_blank" onmouseover="this.style.backgroundColor='#abe9f7'" onmouseout="this.style.backgroundColor='#00a0b0'"></a>
<a href="" target="_blank" onmouseover="this.style.backgroundColor='#badac5'" onmouseout="this.style.backgroundColor='#6a4a3c'"></a>
<a href="" target="_blank" onmouseover="this.style.backgroundColor='#b7ab9d'" onmouseout="this.style.backgroundColor='#cc333f'"></a>
<a href="" target="_blank" onmouseover="this.style.backgroundColor='#4679c7'" onmouseout="this.style.backgroundColor='#eb6841'"></a>
<a href="" target="_blank" onmouseover="this.style.backgroundColor='#45bf21'" onmouseout="this.style.backgroundColor='#edc951'"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
</div>
</div>
1 Like
