I love HTML but CSS hates me
Apr. 18th, 2020 11:20 pmam messing with ![[archiveofourown.org profile]](https://p.dreamwidth.org/b164c54b26e4/-/archiveofourown.org/favicon.ico)
La_Temperanza CSS work skin tutorials in order to be sure the text wraps properly around my images; also in hopes that the "hover on desktop or click on mobile to change the text" thingy works, thus relieving me of needing <span title="hover text goes here"> that doesn't usefully annotate shit on mobile
…why in fuck isn't AO3 centering my cover image?? and what in fuck do I have to do to convince AO3 I want the </a> to be after, not before, the img tag with the cover in, so that the 640px cover itself (or its alt text) is the link to the 1280px cover???
ETA1: haven't actually got to the CSS for images yet (because the floaty trick ofLa_Temperanza's isn't gonna work with centered images anyway), and I got the hover thingy to work on desktop (haven't gone to see if it works as advertised on mobile yet)—on two of my annotations. It is trying to pull some fuckery with the third one:
( augh )
ETA2: *stares at horizontally scrolling failwhale* I give up.
ETA3: there's a cheat sheet for CSS (ISO) thingies to sub in to the "content:" line of the CSS, but that's only gonna be good for fixing the ó and the ì. I also need it to fix the two vowels with macrons—no, I haven't figured out how ¯ is supposed to work as anything but a hat without a head underneath it, why do you ask—and the hanzi. spoilers: I don't think it's gonna work with the hanzi.
ETA4: I decided to add the HTML that was fighting me for the centered image before linking this at people who code better who might could help, and in the process I figured out part of the problem was, part of my wrap-text-around-images CSS was justifying all paragraphs, and nothing I was doing was overriding that. So I changed that bit from "p" to ".justify" and put in
( why is there horizontal scroll failwhale )
and wrapped every chapter in <div class="justify"> so that the cover-image <p> is the only one in the whole story left out!
…and like magic the cover image is centered and also, and I don't understand what changed here, a working damn link.
thank y'all for rubber-ducking
ETA5: I think I need to play with my margin sizes, but the wrap-text-around-images works perfectly. The credits, now…
( grump )
ETA6: linked footnotes it is, I guess. thanks,![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
momijizukamori!
so my only remaining problem in this entry is what the fuck AO3 thinks it's doing in ETA5. let me show that with blockquote and not pre so I don't need the cut tag to keep from failwhale:
ETA7: It did the same thing to the beta credits on a different chapter draft, moving only the last of several </a> tags. So I have stuck <a name="random03"></a> on the end of the above code and hey look my link works now.
ETA8:
…why in fuck isn't AO3 centering my cover image?? and what in fuck do I have to do to convince AO3 I want the </a> to be after, not before, the img tag with the cover in, so that the 640px cover itself (or its alt text) is the link to the 1280px cover???
ETA1: haven't actually got to the CSS for images yet (because the floaty trick of
( augh )
ETA2: *stares at horizontally scrolling failwhale* I give up.
ETA3: there's a cheat sheet for CSS (ISO) thingies to sub in to the "content:" line of the CSS, but that's only gonna be good for fixing the ó and the ì. I also need it to fix the two vowels with macrons—no, I haven't figured out how ¯ is supposed to work as anything but a hat without a head underneath it, why do you ask—and the hanzi. spoilers: I don't think it's gonna work with the hanzi.
ETA4: I decided to add the HTML that was fighting me for the centered image before linking this at people who code better who might could help, and in the process I figured out part of the problem was, part of my wrap-text-around-images CSS was justifying all paragraphs, and nothing I was doing was overriding that. So I changed that bit from "p" to ".justify" and put in
( why is there horizontal scroll failwhale )
and wrapped every chapter in <div class="justify"> so that the cover-image <p> is the only one in the whole story left out!
…and like magic the cover image is centered and also, and I don't understand what changed here, a working damn link.
thank y'all for rubber-ducking
ETA5: I think I need to play with my margin sizes, but the wrap-text-around-images works perfectly. The credits, now…
( grump )
ETA6: linked footnotes it is, I guess. thanks,
momijizukamori!so my only remaining problem in this entry is what the fuck AO3 thinks it's doing in ETA5. let me show that with blockquote and not pre so I don't need the cut tag to keep from failwhale:
Admire the illustrations by <a href="https://chataclysmes.tumblr.com" rel="nofollow"><img src="https://www.tumblr.com/favicon.ico" alt="" width="17" height="17" /><b>chataclysmes</b></a> and <a href="https://sweetsweetsweetie.tumblr.com" rel="nofollow"><img src="https://www.tumblr.com/favicon.ico" alt="" width="17" height="17" /><b>sweetsweetsweetie</b></a>!becomes
Admire the illustrations by <a href="https://chataclysmes.tumblr.com" rel="nofollow"><img src="https://www.tumblr.com/favicon.ico" alt="" width="17" height="17" /><b>chataclysmes</b></a> and <a href="https://sweetsweetsweetie.tumblr.com" rel="nofollow"></a><img src="https://www.tumblr.com/favicon.ico" alt="" width="17" height="17" /><b>sweetsweetsweetie</b>!I bolded the part that moved.
ETA7: It did the same thing to the beta credits on a different chapter draft, moving only the last of several </a> tags. So I have stuck <a name="random03"></a> on the end of the above code and hey look my link works now.
ETA8:
<pre style="white-space: pre-wrap;">woot!