I can’t seem to display all my webrings without totally messing up my footer, anyone have any tips for dealing with all the different codes? Thank you!
Here is my current code https://codepen.io/marycuntrarian/pen/wBKpjOX
Yeah, that’s a bit of a mess. You’re mainly copying and pasting markup provided by various web rings, right? Because a lot of it has inline styles, or uses tables for layout. Also, you’re using <br> for line breaks. It works, but doesn’t give you many options for styling blocks within your footer.
I’m not sure what sort of look you’re trying to create, but if I wanted web rings in my site footer, I would rip out all of the inline styles and tables, wrap each one in a <div>, wrap them all in a container <div>, and use CSS Flexbox or CSS Grid to make sure everything’s aligned the way I want it. And if a JS-based webring didn’t play nicely with my markup and CSS, I would yeet it into the cold evernight of interstellar space.
2 Likes
Thank you! I’ll mess around with it more. I thought about putting them all on their own page but I think most webrings want the link on the index.
Good luck. I had put my web rings on my home page, but as you can see below I stripped out a lot of the cruft.
<h2 id="webrings">
<a href="./index.html#webrings" aria-labelledby="webrings">Webrings</a>
</h2>
<p>My website is part of the following webrings.</p>
<p>
<a class="webring" href="https://xn--sr8hvo.ws/previous">←</a>
An <a class="webring" href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍
<a class="webring" href="https://xn--sr8hvo.ws/next">→</a><br>
<a class="webring" href="https://hotlinewebring.club/starbreaker/previous">←</a>
<a class="webring" href="https://hotlinewebring.club">Hotline Webring</a>
<a class="webring" href="https://hotlinewebring.club/starbreaker/next">→</a><br>
<a class="webring" href="https://fediring.net/previous?host=starbreaker.org">←</a>
<a class="webring" href="https://fediring.net/">Fediring</a>
<a class="webring" href="https://fediring.net/next?host=starbreaker.org">→</a><br>
<a class="webring" href="https://loop.graycot.dev/webring.html?action=prev"> ← </a>
<a class="webring" href="https://loop.graycot.dev/webring.html?action=list"> ... </a>
<a class="webring" href="https://loop.graycot.dev/webring.html?action=home"> Loop Ring </a>
<a class="webring" href="https://loop.graycot.dev/webring.html?action=rand"> ? </a>
<a class="webring" href="https://loop.graycot.dev/webring.html?action=next"> → </a><br>
<a class="webring" href="https://webring.dinhe.net/prev/https://starbreaker.org">←</a>
<a class="webring" href="https://webring.dinhe.net/">Retronaut Webring</a>
<a class="webring" href="https://webring.dinhe.net/next/https://starbreaker.org">→</a><br>
<a class="webring" href="https://melonland.net/surf-club.html">Melonland Surf Club</a>
<a class="webring" href="https://brain.melonking.net/surf-club-random"> ? </a>
</p>
<p>
This site is also part of the <a class="webring" href="https://static.quest">Static.Quest</a> web ring!
<br>
<a class="webring" href="https://static.quest/previous/?host=starbreaker.org">←</a>
<a class="webring" href="https://static.quest/members">View Members</a>
<a class="webring" href="https://static.quest/next/?host=starbreaker.org">→</a>
<br>
<a class="webring" href="https://static.quest/random">Feeling lucky?</a>
</p>
<p>If you want to add me to your own webring, and it doesn’t depend on JavaScript, <a href="./contact/index.html">please email me</a>.</p>
It could use a bit more work, though. Maybe it should be an unordered list with each web ring being a separate list item. (And I’d remove the bullet and remove the padding with CSS.)
one small fix you can do is adding display:inline-block (w3schools link for display) to the webrings’ divs! that’ll at least help with the spacing. other solutions depend on how you want your footer to look! you could just put them all under a details tag if you want to keep their variable styling but also make your footer fairly tidy.