Cosmetic Questions
-
Heya all;
This is more a cosmetic question. I managed to get the links for the navigation centered thanks to a previous thread I read through. However, I wanted to know if there was a way I could replace the links in the navigation CSS with images, like on webcomic sites like this.
How would I go about this? I tried the CSS route, but that just added a background image where I want to make the entire image replace the text link itself.
Thanks ahead of time for the help! I left the CSS example up since it captures the “spirit” of what I wanted to do, haha.The page I need help with: [log in to see the link]
-
So I’m doing some research…full disclosure, I’m not a developer by any sense of the word, so the PHP is intimidating. I know I’m doing something wrong, but I can’t tell what. I know CSS is for looks alone.
Here’s the CSS I used:
/* comic navigation */ .comic-nav-hlist-wrapper { text-align: center; font-size: 0; /* fixes inline-block spacing issues */ margin: 5px 0 10px 0; padding: 0; clear: both; float: none; } .comic-nav-hlist { font-size: 16px; list-style: none; } .comic-nav-hlist > li { display: inline-block; margin-right: 10px; } li.link-last{ background: url('https://twistedfates.net/wp-content/uploads/Navi_Latest.png') no-repeat; display: inline-block; height: 64px; width: 64px; } li.link-next{ background: url('https://twistedfates.net/wp-content/uploads/Navi_Next.png') no-repeat; display: inline-block; height: 64px; width: 64px; margin-left: 16px; } li.link-prev{ background: url('https://twistedfates.net/wp-content/uploads/Navi_Last.png') no-repeat; display: inline-block; height: 64px; width: 64px; margin-right: 16px; } li.link-first{ background: url('https://twistedfates.net/wp-content/uploads/Navi_First.png') no-repeat; display: inline-block; height: 64px; width: 64px; } /*End Comic Navigation*/
- The topic ‘Cosmetic Questions’ is closed to new replies.