NAV PAGE: COLOUR BLOCK

[marwood]

a pretty simple code you can use for journal navigation pages that i originally made for an OC journal and decided to share! here is a live preview with a different colour scheme so you can see how it comes out with different elements. hopefully it's easy enough to customise - you can add/remove as many links as you want and they will stay vertically centred in the box. :^)

i also did a bit of fudging with the actual journal layout (this is the original) on my OC journal so that hovering over the link makes the white space get wider. unfortunately this isn't something you can do within the entry HTML, but if you'd like to know how i did that please let me know and i can help you out!

colors:
box background: #849693
link text: #911c35
link square: #571624

code:
<lj-raw><div style="margin: 0 auto; width: 400px; display: flex;"> <div style="width: 250px; height: 400px; background: url('IMG_URL_HERE') center; background-size: cover;"></div> <div style="width: 150px; height: 400px; background-color: #849693;"></div></div> <div style="margin: -400px auto 0 auto; width: 400px; height: 400px; font-family: georgia; font-style: italic; font-weight: bold; font-size: 13px; letter-spacing: 3px; display: flex; align-items: center; line-height: 200%; text-align: right;"> <div style="width: 267px;"> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link one</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link two</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link three</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link four</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link five</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-right: 17px solid #571624; background-color: #fff; color: #911c35;">link six</a> </div> </div> <div style="margin: 3px auto; width: 400px; text-align: right; font-family: georgia; font-size: 9px; letter-spacing: 4px;"><a style ="color: #888; text-decoration: none;" href="https://withnails.dreamwidth.org/5917.html">CODE</a></div></lj-raw>

Comments

[paravore]

hello! thank you so much for the code!! i'm wondering if you can help me with something? i attempted to make an edit to it so that the text would be on the right and the solid color boxes next to the text would be on the left. but, i'm running into an issue of getting it to stay aligned at the border between the image and the color block. i can get it to move over by adjusting the left margin, but i can't get it to stay consistent even if the screen resolution/width of the browser window changes. would you be willing to help? ;u;

here's what i have so far:
<lj-raw><div style="margin: 0 auto; width: 400px; display: flex;"> <div style="width: 250px; height: 400px; background: url('https://i.imgur.com/EdayhGQ.png') center; background-size: cover;"></div> <div style="width: 150px; height: 400px; background-color: #000000;"></div></div> <div style="margin: -300px 40px 0 auto; width: 400px; height: 400px; font-family: georgia; font-style: italic; font-weight: bold; font-size: 13px; letter-spacing: 3px; display: flex; align-items: center; line-height: 200%; text-align: left;"> <div style="width: 267px;"> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link one</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link two</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link three</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link four</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link five</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link six</a> </div> </div> <div style="margin: 3px auto; width: 400px; text-align: right; font-family: georgia; font-size: 9px; letter-spacing: 4px;"><a style ="color: #888; text-decoration: none;" href="https://withnails.dreamwidth.org/5917.html">CODE</a></div></lj-raw>

with the live version of my attempt here... thank you for your help!!

[marwood]

hello!! i am SO sorry for how long it took me to get back to you – i rarely check notifs on this journal so i just totally missed your comment, my bad!! here is a fix for you:

<lj-raw><div style="margin: 0 auto; width: 400px; display: flex;"> <div style="width: 250px; height: 400px; background: url('https://i.imgur.com/EdayhGQ.png') center; background-size: cover;"></div> <div style="width: 150px; height: 400px; background-color: #000000;"></div></div> <div style="margin: -300px auto 0 auto; width: 400px; height: 400px; font-family: georgia; font-style: italic; font-weight: bold; font-size: 13px; letter-spacing: 3px; display: flex; align-items: center; line-height: 200%; text-align: left;"> <div style="width: 400px; margin-left: 233px;"> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link one</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link two</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link three</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link four</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link five</a><br /> <a href="LINK_URL_HERE" style="text-decoration: none; padding: 2px 2px 2px 2px; border-left: 17px solid #000000; background-color: #fff; color: #911c35;">link six</a> </div> </div> <div style="margin: 3px auto; width: 400px; text-align: right; font-family: georgia; font-size: 9px; letter-spacing: 4px;"><a style ="color: #888; text-decoration: none;" href="https://withnails.dreamwidth.org/5917.html">CODE</a></div></lj-raw>

basically you were almost there, it's just that from my (limited, lol) understanding of html, auto margin sort of centres the div by pushing it in equally on both sides based on the width of the display, so if you have the margin set to auto on the right but 40px on the left it's going to be different on every display. i hope this is what you were looking for!!

[paravore]

that worked!!! thank you so much!!