Databases
StackOverflow2013
Postsdbo
POMoving images/links with CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMoving images/links with CSS
    text
    copied!<p>I need help with this small little problem I am having with the site I am building. I have a list of images with links to different websites and everything looks fine for the most part but when I hover over the last one in the row the links below move for some strange reason. I can't figure out! </p> <p>Imagine this what it looks like at first:</p> <pre><code>[img1] [img2] [img3] [img4] [img5] [img6] </code></pre> <p>This is what happens when I hover over any of the images/links on the right side:</p> <pre><code>[img1] [img2] [img3] [img4] [img5] [img6] [img7] </code></pre> <p>And this is my code: </p> <pre><code>.sites{ float:left; width:215px; background: #eee; text-align:center; margin: 0px 13px 15px 0px; border: 1px solid #ccc; padding:10px; } .sites p{ margin:0px; padding:10px; font:bold; } .sites a{ border-bottom: 5px solid #000; border-top: 5px solid #000; display:block; } .sites a:hover{ border-bottom: #F90; border-top: #f90; } </code></pre> <p>This is my HTML:</p> <pre><code>&lt;div id="main-content"&gt; &lt;h1&gt; Check out all our DEADicated sites: &lt;/h1&gt; &lt;div class="sites"&gt; &lt;a href="http://www.eyeem.com/TheDEADicated" target="_blank"&gt; &lt;img src="images/sites/eye-em.jpg" width="215" height="150" alt="EyeEm"/&gt;&lt;/a&gt; &lt;p&gt; EyeEm &lt;/p&gt; &lt;/div&gt; &lt;div class="sites"&gt; &lt;a href="http://www.facebook.com/DeadSaraArg" target="_blank"&gt; &lt;img src="images/sites/fb-argentina.jpg" width="215" height="150" alt="Facebook Argentina"/&gt;&lt;/a&gt; &lt;p&gt; Facebook - Argentina &lt;/p&gt; &lt;/div&gt; &lt;div class="sites"&gt; &lt;a href="https://www.facebook.com/pages/The-DEADicated-Canada/427270554005649?ref=hl" target="_blank"&gt; &lt;img src="images/sites/fb-canada.jpg" width="215" height="150" alt="Facebook Canada"/&gt;&lt;/a&gt; &lt;p&gt; Facebook - Canada &lt;/p&gt; &lt;/div&gt; &lt;div class="sites"&gt; &lt;a href="http://www.facebook.com/ThedeadicatedEgypt" target="_blank"&gt; &lt;img src="images/sites/fb-egypt.jpg" width="215" height="150" alt="Facebook Egypt"/&gt;&lt;/a&gt; &lt;p&gt; Facebook - Egypt &lt;/p&gt; &lt;/div&gt; &lt;div class="sites"&gt; &lt;a href="http://www.facebook.com/DeadSaraItaly?ref=hl" target="_blank"&gt; &lt;img src="images/sites/fb-italy.jpg" width="215" height="150" alt="Facebook Italy"/&gt;&lt;/a&gt; &lt;p&gt; Facebook - Italy &lt;/p&gt; &lt;/div&gt; &lt;div class="sites"&gt; &lt;a href="http://www.facebook.com/thedeadicatedmexico" target="_blank"&gt; &lt;img src="images/sites/fb-mexico.jpg" width="215" height="150" alt="Facebook Mexico"/&gt;&lt;/a&gt; &lt;p&gt; Facebook - Mexico &lt;/p&gt; &lt;/div&gt; &lt;br/&gt; &lt;div class="sites"&gt; &lt;a href="http://www.facebook.com/DeadSaraTheDeadicatedUK" target="_blank"&gt; &lt;img src="images/sites/fb-uk.jpg" width="215" height="150" alt="Facebook UK"/&gt;&lt;/a&gt; &lt;p&gt; Facebook - UK &lt;/p&gt; &lt;/div&gt; &lt;/br&gt;&lt;br&gt;&lt;br&gt; &lt;h2&gt; To join TheDEADicated, click &lt;a href="http://musichype.com/artists/dead-sara" target="_blank"&gt;HERE&lt;/a&gt;! &lt;/h2&gt; &lt;/div&gt; </code></pre> <p>I'm pretty new to web design. Help please? </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload