[SOLVED] Trying to get: 5 block elements, and the 5 elements below that to stick to the middle element

asasass · June 22, 2016, 11:54am

My Code: https://jsfiddle.net/39ejhvL7/4/

Can someone show me how I can get the top 5 block elements, and the 5 elements below that to stick to the middle element?

I’m trying to get the top image to look like the bottom image.
[I don’t want the whole thing to look like that, only the top 10 block elements.]

<a href="" style="display:inline-block; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>

<a href="" style="display:inline-block; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" style="display:inline-block; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>

<a href="" style="display:inline-block; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px"></a><br>

<div style="width:266px" onclick="myObject=document.getElementById('myObj'); 
myObject.style.display='block'; this.style.display='none'">

<a style="display:inline-block; 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;">

</div>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#00a0b0;color:#000000;" onmouseover="this.style.backgroundColor='#abe9f7'" onmouseout="this.style.backgroundColor='#00a0b0'"></a>

<a href="" target="_blank" style="display:inline-block; 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="display:inline-block; 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="display:inline-block; 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="display:inline-block; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21'" onmouseout="this.style.backgroundColor='#edc951'"></a><br>


<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#00a0b0;color:#000000;"></a>


<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>



<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>


<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a><br>


<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#00a0b0;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#6a4a3c;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a><br>


<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#00a0b0;color:#00a0b0;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#6a4a3c;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#eb6841;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#edc951;color:#000000;"></a><br>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#00a0b0; color:#000000; border-bottom-left-radius:50px;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#6a4a3c;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#eb6841;color:#000000;"></a>

<a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#edc951;color:#000000; border-bottom-right-radius:50px;"></a>

Gandalf · June 22, 2016, 12:08pm

Why do you continue to use inline CSS when you have been told repeatedly not to?

asasass · June 22, 2016, 12:20pm

I prefer it. And this is a spot for questions about html, so I asked a question.

TechnoBear · June 22, 2016, 12:24pm

Please could you explain in more detail what it is you’re trying to achieve, because I’m having a hard time picturing it.

(You are, of course, free to ignore advice you’ve been given about not using inline styles. However, I do feel I should point out, for the benefit of anybody else reading this, that using JavaScript to change background colour on hover, rather than doing it with CSS, is not a recommended approach. If JS is disabled or fails to load, it will not work.)

asasass · June 22, 2016, 12:32pm

I’m trying to get the top image to look like the bottom image.

asasass · June 22, 2016, 12:44pm

I’m trying to get the top 5 block elements, and the 5 below that to stick to the middle element.

SamA74 · June 22, 2016, 12:48pm

The gap is from the default vertical alignment value of baseline for inline elements.
Changing it to bottom will close the gap.

asasass · June 22, 2016, 12:54pm

On which rows?

SamA74 · June 22, 2016, 12:57pm

The gap appears at the bottom of inline elements, so the ones you want to close up. The top and second one.

asasass · June 22, 2016, 12:57pm

Can you show me in jsfiddle please cause I keep messing it up. https://jsfiddle.net/39ejhvL7/4/

cpradio · June 22, 2016, 12:58pm

Here it is in CodePen

asasass · June 22, 2016, 1:01pm

Thank you.

asasass · June 22, 2016, 1:34pm

I was just told to put it in a grid/ table but I don’t understand how to do that. Every time I try it keeps getting messed up.

cpradio · June 22, 2016, 1:40pm

What exactly did you try? As it most simplistic approach is to wrap each of those <a> tags in a <td>, put each row in a <tr> and for that second row, make sure you using a single <td> with a colspan="5" attribute.

asasass · June 22, 2016, 1:42pm

Can you show me cause when I did it, it didn’t come out right. Would be greatly appreciated.

asasass · June 22, 2016, 1:52pm

It keeps messing up on me after I take the br> tags off https://jsfiddle.net/k61mLm2g/

asasass · June 22, 2016, 1:58pm

 <table>
  <tr>
<td><a href="" style="display:inline-block; width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></a></td>

<td><a href="" style="display:inline-block; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a></td>

<td><a href="" style="display:inline-block; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a></td>

<td><a href="" style="display:inline-block; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a></td>

<td><a href="" style="display:inline-block; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px"></a></td>
 
</tr>
<tr>
  
<div style="width:266px" onclick="myObject=document.getElementById('myObj'); 
myObject.style.display='block'; this.style.display='none'">

<td><a style="display:inline-block; 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></td>


</div>

<div id="myObj" style="display: none;">

</div>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#00a0b0;color:#000000;" onmouseover="this.style.backgroundColor='#abe9f7'" onmouseout="this.style.backgroundColor='#00a0b0'"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height:50px; background-color:#6a4a3c;color:#000000;" onmouseover="this.style.backgroundColor='#badac5'" onmouseout="this.style.backgroundColor='#6a4a3c'"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#cc333f; color:#000000; " onmouseover="this.style.backgroundColor='#b7ab9d'" onmouseout="this.style.backgroundColor='#cc333f'"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#eb6841;color:#000000;" onmouseover="this.style.backgroundColor='#4679c7'" onmouseout="this.style.backgroundColor='#eb6841'"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21'" onmouseout="this.style.backgroundColor='#edc951'"></a></td>

</tr>
<tr>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#00a0b0;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a></td>

</tr>
<tr>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#00a0b0;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#6a4a3c;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a></td>

</tr>
<tr>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#00a0b0;color:#00a0b0;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#6a4a3c;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#eb6841;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#edc951;color:#000000;"></a></td>

</tr>
<tr>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#00a0b0; color:#000000; border-bottom-left-radius:50px;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#6a4a3c;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#cc333f;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px;background-color:#eb6841;color:#000000;"></a></td>

<td><a href="" target="_blank" style="display:inline-block; width: 50px; height: 50px; background-color:#edc951;color:#000000; border-bottom-right-radius:50px;"></a></td>

  </tr>
</table>

asasass · June 22, 2016, 2:07pm

Look, here see, it’s all messed up: https://jsfiddle.net/2n366xLn/2/

SamA74 · June 22, 2016, 2:12pm

The second row needs the colspan attribute to span the full width.
You can’t have <div>s as a direct child of <tr>s, only <td> or <th> can be the direct child of <tr>.

asasass · June 22, 2016, 2:13pm

That’s there cause when you click on it it’ll eventually change to something else.