Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 28, 2014 at 7:28 pm #244541
    mikecp23

    I am trying to float 5 images next to each other. I wasn’t able to use the 1/5 layout elements because the spacing between them wasn’t what i was looking for, and I don’t see a way of customizing it except by changing the CSS which would affect the rest of them. Anyways, I opted for using manual code, see below. However I am getting a weird shifting when you mouseover the images (fyi, I am using a mousover image code).

    Link: http://papermaxnew.blueicegraphix.com/products/

    <a href="http://papermaxnew.blueicegraphix.com/products/riviera/" target="_self"><img class="floatimg" style="padding-left: 20px;" onmouseover=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Riviera_mousemoveover.png'" onmouseout=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Riviera3.png'" alt="" src="http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Riviera3.png" /></a>

<a href="http://papermaxnew.blueicegraphix.com/products/hi-kote/" target="_self"><img class="floatimg" style="padding-left: 10px;" onmouseover=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Hi-kote_mousemoveover.png'" onmouseout=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Hi-kote.png'" alt="" src="http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Hi-kote.png" /></a>

<a href="http://papermaxnew.blueicegraphix.com/products/nevia/" target="_self"><img class="floatimg" style="padding-left: 20px;" onmouseover=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Nevia_mousemoveover.png'" onmouseout=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Nevia3.png'" alt="" src="http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Nevia3.png" /></a>

<a href="http://papermaxnew.blueicegraphix.com/products/inspira/" target="_self"><img class="floatimg" style="padding-left: 10px;" onmouseover=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Inspira_mousemoveover.png'" onmouseout=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Inspira1.png'" alt="" src="http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Inspira1.png" /></a>

<a href="http://papermaxnew.blueicegraphix.com/products/enova/" target="_self"><img class="floatimg" onmouseover=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Enova_mousemoveover.png'" onmouseout=" this.src='http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Enova3.png'" alt="" src="http://papermaxnew.blueicegraphix.com/wp-content/uploads/2014/02/Enova3.png" /></a>
    March 29, 2014 at 7:41 am #244698
    Ismael

    Hey Michael!

    Thank you for using the theme!

    On what browser and OS are you testing this with? I tested it on Firefox/Chrome Windows 8 but I don’t see the shift when I hover over the images. There’s a way where you exclude certain columns via CSS. You can insert the layout columns inside a color section. Edit the color section then look for the For Developers: Section ID field. Add an id on the field, let’s use awesome-section for example. Modify the columns inside the section using this on Quick CSS or custom.css:

    #awesome-section .av_one_fifth {
width: 20%;
margin: 0;
}

    Good job on the website! Looks nice. :)

    Best regards,
    Ismael

    March 31, 2014 at 11:10 pm #245772
    mikecp23

    Awesome, thank you it all worked!

    Michael

    April 1, 2014 at 7:52 am #245873
    Ismael

    Hey!

    Glad it worked. ;)

    Regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Issue With Floating Images’ is closed to new replies.