Can't stick sliced images together

• 

  meomix · Member · May 16, 2016 at 1:24 pm

  • Copy link
  • Add topic to favorites

  Here is the page i need help with
  https://postiz.wordpress.com/projects/

  As you can see the “red button” is not sitting right, every time i try to add a link to a image button it shifts out of place, i have tried everything from different kinds of alignments to all sorts of crazy table styles with no success.
  How do i fix this problem?

  The blog I need help with is: (visible only to logged in users)

• 

  meomix · Member · May 17, 2016 at 1:37 pm

  • Copy link

  I have fixed the image link shifting problem style=”vertical-align: baseline;”
  and the line showing under links problem style=”border-bottom: 0px;”

  style=”border-bottom: 0px;” href=”https://github.com/Postiz”><img class=”alignnone size-full wp-image-567″ src=”https://postiz.files.wordpress.com/2015/08/flyvar_02-cc4.png” style=”vertical-align: baseline;” alt=”flyvar_02-CC4″ width=”159″ height=”30″ />

  But the sticking the images together problem still remains.

  Now the bottom base (blue image) refuses to stick to the buttons at the top, you see a long horizonal space in between them. Much help needed.

• 

  writesrealgood · Member · May 17, 2016 at 2:32 pm

  • Copy link

  I’ve put modlook as a tag on the right to flag this for one of them to look at. I’ve seen a gentleman in a nice hat help on similar CSS-looking queries, so perhaps he can assist here as well.

  Sorry I can’t help you with this. If you need help with a blink tag or any HTML from around the time I took an HTML course in 1999, let me know.

• 

  supernovia · Staff · May 17, 2016 at 7:42 pm

  • Copy link

  Hi @meomix, that is tricky.

  Even if you make it look perfect on one screen size or browser, it’s bound to have trouble on another — try resizing your browser window and you’ll see what I mean.

  While this is a bit beyond the scope of what we can offer as WordPress.com support, have you considered using one image, and CSS+relative positions in percentages to position links for your buttons?

  This thread at Stack Overflow has some suggestions:
  http://stackoverflow.com/questions/11363358/is-possible-create-map-html-area-in-percentage

• 

  meomix · Member · May 18, 2016 at 4:05 am

  • Copy link

  Went to another support forum and they did it for me.

  <p style=”text-align: center; line-height: 0px;“></p>

  It looks like the “style=” function is the only way to bypass CSS settings.

• 

  meomix · Member · May 18, 2016 at 4:09 am

  • Copy link

  And to future developers that might go insane trying to center multiple images in 1 line you have position them (with no alignment) in visual mode, THEN go to html mode (you can only do this in html mode) then use <p style=”text-align: center;”></p>

• 

  writesrealgood · Member · May 18, 2016 at 8:38 am

  • Copy link

  In case you were not aware, although your fix looks fine on my desktop screen (and the overall design is very pleasant, by the way), for smaller/mobile screens, your buttons don’t resize/realign.

  Hope it’s not a nightmare to fix. I had a heck of a time just figuring out some line spacing in my blog yesterday, so I can’t help!

• 

  supernovia · Staff · May 19, 2016 at 9:37 pm

  • Copy link

  @writesrealgood agreed.

  There are other ways to do it with CSS but one would probably have an easier time if they sliced the images differently.