Can't stick sliced images together
-
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)
-
I have fixed the image link shifting problem style=”vertical-align: baseline;”
and the line showing under links problem style=”border-bottom: 0px;”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.
-
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.
-
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 -
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.
-
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>
-
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!
-
@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.
- The topic ‘Can't stick sliced images together’ is closed to new replies.