Okay, so, I am a nerd. Big shock I know! Nerds are scarce in these parts. Spoiler: tl;dr, i roleplay on dreamwidth and i want to play along with their pretentious artsy bullshit But one of my forms of nerdery is roleplaying over on Dreamwidth. I haven't in a couple years, but between progress w/depression and anxiety, and my current obsession with Undertale, I figured I'd give it a go. And, like here, I've been roleplaying as Papyrus for a couple of weeks! Good times! But one of the things about Dreamwidth fandom roleplay is that some of us get pretty... pretentious about things. Like having good icons, and having organized profiles, and having pretty things. I figured, eh, I'm just messing around in memes (their casual rp places), it doesn't really matter. And then someone I played with years ago enabled me into a game. I don't NEED the pretty shit to be in the game, by any means, but I want them. So, I got it in my head to try to make a profile menu based off the Undertale battle menu, where each of the four menu buttons is a link that leads to a different page. I figured okay, this shouldn't be TOO hard. I remember making profiles and shit in html like 10 years ago. Sure, that was half my remembered lifespan ago, but it's doable. Except, wait, no, I know that tables are really inefficient and clunky. Aren't there newer things? Like, can't you use <div> in some way to approximate tables? Really, what I'm asking is, if I want to use that image as the background and make the buttons into clickable links that are approximately centered on the buttons themselves... would it be better for me to refresh my memory on <table> stuff or look into <div> stuff?
If you use <div>s you can mess with their margin values to center the buttons where you want them on the picture. Though that's probably a bit harder to do if you're just using html, not css? I think it would probably still be the best bet though. (disclaimer: I'm still learning how to html so i'm no kind of expert, but I just covered margins and stuff in the course i'm taking so i FEEL like an expert :P)
using <div>s is the "proper" way to do this these days (citation: the professor of the web application class i'm in said so way back at the beginning of the semester :P). you do need css, but it's honestly pretty easy! and i'm pretty sure dreamwidth must let you use css, bc you really can't customize web pages without it (i don't know dreamwidth tho so i may be horribly wrong). Spoiler: sample code, tragically without proper indentation :sadface: <style> (this is the css code to get the column divs to actually do the column thing) .col { float: left; (this tells them to all fall to the left, which makes them actually stay on the same row line) padding-right: 1% (this puts some spacing between the columns so the content doesn't squish together. this should be modified to what number looks good for your purposes. you may also need top/bottom/left padding. you can use absolute pixel numbers too (i'll provide a link with more info later) but defining it with a percentage makes sure it scales ok if the page is resized) } </style> <div> (this div sets the first row of the "table") pap pic goes here with an image tag </div> <div> (this sets the second row) <div class="col"> (the class attribute here tells the file to reference the above css for this component) first button (this will be whatever content, in your case an image tag wrapped in a link tag) </div> <div class="col"> (repeat for the rest of the buttons) second button </div> <div class="col"> third button </div> <div class="col"> fourth button </div> </div> (note my comments in parens are not valid html or css comments so if you copypasta this straight those will break things) (also argh apparently this won't preserve indentation. if you want a clearer copy i think i can upload a .txt file with this stuff in) while you can set the button images to overlap the relevant spaces on the bigger background image like you suggested, i suspect this will be far more of a pain in the ass to implement than is necessary. my suggestion is to crop the papyrus background pic to remove the "buttons" you want to overlap, set the background color of the whole area to black (if you don't want your whole page to have a black background, you can wrap the whole papyrus thing in another div and set its background color to black, so only that area of the page will have the black background), and then set the button images below using code like in my example (probably with some futzing with padding or margins to get them spaced how you want). that way it'll look the same in the end, but you won't have to deal with trying to line shit up which sounds like an obnoxiously fiddley prospect. some reference links: http://www.w3schools.com/css/css_padding.asp (w3 schools is AWESOME for learning web tech stuff, html, css, javascript, whatever. they give example code with little editors so you can fiddle with stuff and then see what that fiddling does) http://www.w3schools.com/css/css_margin.asp if you're interested, when to use margins vs padding (bc they do more or less the same thing): http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css also, all that said, if it'd be easier for you to use html tables, feel free to do that instead! divs are the "proper" way nowadays, but the tables method will still work and getting it to work is the important thing here. there should be plenty of tutorials on the web for both methods.
