[Wizard♦]

Hey, I'm Wizard.... my question is how do you add a text box over a image. The image <--- this is what I want to add a text box over. If anyone is willing to show me then that would be a big help.

[Kuroya]

there's a lot of different ways to do it. You can set an image as a background-image:url('') and do it that way, or you could make a text box and then use a combination of bottom paddings and negative top margins to make it display how you want to. really it depends on how you want to do it and set it up since, like my web design teacher always said, there is no right or wrong way to code, just how you prefer to do it

[foxxu ❋]

there are probably other ways (edit: like what Kuroya said!) ... Buuuuut the only way i know how is with margins the coding that makes me want to murder

Its easy to start with a table. I am gonna assume you don't know how. So basically if you click that it will bring up a box and you click how many rows and columns. I usually put my numbers 1, 1, 0, 0. Then I go to preview and I can add as many rows and columns I want. I am a visual learner so

For this table you will just need one row and column. You can basically look at my coding if you need help! Its under the spoiler since I am not a good person at explain coding ;w;

SPOILER: Click to show

Eat the grass suspendisse sleep in the sink orci turpis attack your ankles enim ut, elit adipiscing sleep on your face I don't like that food sleep in the sink vestibulum. Nunc knock over the lamp tempus scratched, nullam quis suspendisse leap scratched give me fish. Iaculis tempus knock over the lamp hiss rutrum rip the couch, tempus meow run tortor etiam. Knock over the lamp suscipit adipiscing sollicitudin rhoncus, rutrum lay down in your way amet eat the grass vulputate hairball. Rutrum chuf sniff eat the grass pellentesque, chase the red dot accumsan sniff nibh toss the mousie ac egestas. Iaculis nunc cras nec justo amet, sleep on your face shed everywhere non chase the red dot suspendisse. Vestibulum attack scratched enim ut, dolor vestibulum shed everywhere quis nunc sunbathe aliquam. Eat the grass suspendisse sleep in the sink orci turpis attack your ankles enim ut, elit adipiscing sleep on your face I don't like that food sleep in the sink vestibulum. Nunc knock over the lamp tempus scratched, nullam quis suspendisse leap scratched give me fish. Iaculis tempus knock over the lamp hiss rutrum rip the couch, tempus meow run tortor etiam. Knock over the lamp suscipit adipiscing sollicitudin rhoncus, rutrum lay down in your way amet eat the grass vulputate hairball. Rutrum chuf sniff eat the grass pellentesque, chase the red dot accumsan sniff nibh toss the mousie ac egestas. Iaculis nunc cras nec justo amet, sleep on your face shed everywhere non chase the red dot suspendisse. Vestibulum attack scratched enim ut, dolor vestibulum shed everywhere quis nunc sunbathe aliquam. Eat the grass suspendisse sleep in the sink orci turpis attack your ankles enim ut, elit adipiscing sleep on your face I don't like that food sleep in the sink vestibulum. Nunc knock over the lamp tempus scratched, nullam quis suspendisse leap scratched give me fish. Iaculis tempus knock over the lamp hiss rutrum rip the couch, tempus meow run tortor etiam. Knock over the lamp suscipit adipiscing sollicitudin rhoncus, rutrum lay down in your way amet eat the grass vulputate hairball. Rutrum chuf sniff eat the grass pellentesque, chase the red dot accumsan sniff nibh toss the mousie ac egestas. Iaculis nunc cras nec justo amet, sleep on your face shed everywhere non chase the red dot suspendisse. Vestibulum attack scratched enim ut, dolor vestibulum shed everywhere quis nunc sunbathe aliquam. Eat the grass suspendisse sleep in the sink orci turpis attack your ankles enim ut, elit adipiscing sleep on your face I don't like that food sleep in the sink vestibulum. Nunc knock over the lamp tempus scratched, nullam quis suspendisse leap scratched give me fish. Iaculis tempus knock over the lamp hiss rutrum rip the couch, tempus meow run tortor etiam. Knock over the lamp suscipit adipiscing sollicitudin rhoncus, rutrum lay down in your way amet eat the grass vulputate hairball. Rutrum chuf sniff eat the grass pellentesque, chase the red dot accumsan sniff nibh toss the mousie ac egestas. Iaculis nunc cras nec justo amet, sleep on your face shed everywhere non chase the red dot suspendisse. Vestibulum attack scratched enim ut, dolor vestibulum shed everywhere quis nunc sunbathe aliquam.

You want to add the image as a background.

so background-image:url(imgur.com);

then you want it to not repeat:

background-repeat:no-repeat;

I usually set the same width and height from the image because if you just add a scroll and do the width and height it will mess it up like so

SPOILER: Click to show

Eat the grass suspendisse sleep in the sink orci turpis attack your ankles enim ut, elit adipiscing sleep on your face I don't like that food sleep in the sink vestibulum. Nunc knock over the lamp tempus scratched, nullam quis suspendisse leap scratched give me fish. Iaculis tempus knock over the lamp hiss rutrum rip the couch, tempus meow run tortor etiam. Knock over the lamp suscipit adipiscing sollicitudin rhoncus, rutrum lay down in your way amet eat the grass vulputate hairball. Rutrum chuf sniff eat the grass pellentesque, chase the red dot accumsan sniff nibh toss the mousie ac egestas. Iaculis nunc cras nec justo amet, sleep on your face shed everywhere non chase the red dot suspendisse. Vestibulum attack scratched enim ut, dolor vestibulum shed everywhere quis nunc sunbathe aliquam. Eat the grass suspendisse sleep in the sink orci turpis attack your ankles enim ut, elit adipiscing sleep on your face I don't like that food sleep in the sink vestibulum. Nunc knock over the lamp tempus scratched, nullam quis suspendisse leap scratched give me fish. Iaculis tempus knock over the lamp hiss rutrum rip the couch, tempus meow run tortor etiam. Knock over the lamp suscipit adipiscing sollicitudin rhoncus, rutrum lay down in your way amet eat the grass vulputate hairball. Rutrum chuf sniff eat the grass pellentesque, chase the red dot accumsan sniff nibh toss the mousie ac egestas. Iaculis nunc cras nec justo amet, sleep on your face shed everywhere non chase the red dot suspendisse. Vestibulum attack scratched enim ut, dolor vestibulum shed everywhere quis nunc sunbathe aliquam. Eat the grass suspendisse sleep in the sink orci turpis attack your ankles enim ut, elit adipiscing sleep on your face I don't like that food sleep in the sink vestibulum. Nunc knock over the lamp tempus scratched, nullam quis suspendisse leap scratched give me fish. Iaculis tempus knock over the lamp hiss rutrum rip the couch, tempus meow run tortor etiam. Knock over the lamp suscipit adipiscing sollicitudin rhoncus, rutrum lay down in your way amet eat the grass vulputate hairball. Rutrum chuf sniff eat the grass pellentesque, chase the red dot accumsan sniff nibh toss the mousie ac egestas. Iaculis nunc cras nec justo amet, sleep on your face shed everywhere non chase the red dot suspendisse. Vestibulum attack scratched enim ut, dolor vestibulum shed everywhere quis nunc sunbathe aliquam. Eat the grass suspendisse sleep in the sink orci turpis attack your ankles enim ut, elit adipiscing sleep on your face I don't like that food sleep in the sink vestibulum. Nunc knock over the lamp tempus scratched, nullam quis suspendisse leap scratched give me fish. Iaculis tempus knock over the lamp hiss rutrum rip the couch, tempus meow run tortor etiam. Knock over the lamp suscipit adipiscing sollicitudin rhoncus, rutrum lay down in your way amet eat the grass vulputate hairball. Rutrum chuf sniff eat the grass pellentesque, chase the red dot accumsan sniff nibh toss the mousie ac egestas. Iaculis nunc cras nec justo amet, sleep on your face shed everywhere non chase the red dot suspendisse. Vestibulum attack scratched enim ut, dolor vestibulum shed everywhere quis nunc sunbathe aliquam.

Once you get to the first [td] you can add padding. I usually do because its easy on the eyes. [td=padding:5px;] I usually just do 5 or 10 padding. Then after that you start on your div styles. This is where you add your scrollbar which is really: overflow:auto;height:0px;width:0px;. You have to mess with the height and width to get what you want.

As I said before the only way I know how is with margins uwu ! you can read them here.

There are two ways to deal with margins:

margins: 0px 0px 0px 0px

This way gets confusing and i kinda hate margins when I do this way because I always forget which ones are right or bottom, especially right or bottom. It confuses me ;_;

So the other way I do it is [the better way I think]

margin-left:50px;margin-right:-20px;

Hm. Okay so the reason why margins turn people into murderers is because the negatives and positives. You just kinda have to mess around with the numbers to get what you want. Usually I learned positive goes away from the top ... so I guess its opposite for them?? I dont know ;w; you're just gonna have to mess with the margins.

I hope this helps uwu ! sorry I kinda wrote a lot. ;w; when you said show did you mean this or another way idk sorrryyyy

[Wizard♦]

foxxu ❋ , thank you for posting. I will have to sit down and learn it step by step in order to get it down.

[Kuroya]

There's also a bit of an easier way to do it. For example, if you take the image and put it in [*img src="imgurlhere"] tags, you can then set it up with styling so you can set the height and width. Let me just play with how I would do this myself first before I go further, I would have been more help if you gave me better height and width dimensions for where everything is

Okay there's some kind of witchcraft sorcery going on where it won't go all the way to the sides, no idea why it wants to do that. Stupid thing. Anyway.

What I did was establish the styling for the image, which went in first, that it had to be a certain width and height - in this case, 350px wide and 500px tall. From there, I put in a div underneath it for a text box 275px in width and 360px in height so that it would have somewhere to start. Overflow: auto is what makes it scroll and then the other stylings (font-family, font-size, and text-align) were just extras. I put in a margin-top at -390px so that it would start where it is.

From there, to cover the extra space at the bottom, I put in a separate div tag underneath the one for the text with the missing height of 30px and an nonbreaking space to make sure it would show up. But yeah. This is the really lazy way to do it, really. And I can probably monkey around with the margins to make it perfectly centered for margin-left and margin-right, but hey, I got it in the box, points for effort.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida cursus diam, vel venenatis odio consectetur ac. Phasellus in risus luctus, tempus sapien quis, imperdiet tellus. Aenean pellentesque nulla in mauris volutpat, et scelerisque massa mollis. Nulla quam orci, eleifend nec aliquam in, molestie nec diam. Mauris sed purus ligula. Praesent non tellus elit. Praesent eget nunc euismod, ullamcorper dolor ut, auctor dui. Morbi faucibus accumsan dictum. Morbi ut convallis sem, id sodales orci. Aenean at feugiat urna, non faucibus metus. Ut eget quam sed elit aliquet interdum ultrices quis sapien.

Vivamus mauris lectus, viverra at enim sed, varius porttitor mi. Quisque quis nisi nec dui molestie ultricies. Duis blandit mattis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nisi libero, auctor semper iaculis vel, feugiat vel nisl. Curabitur scelerisque tincidunt lorem iaculis ullamcorper. Ut tincidunt et erat ut auctor. Nulla tincidunt lacus et erat vulputate, a mattis nunc sodales. Vivamus tincidunt, metus et lacinia ultrices, leo eros bibendum massa, ut laoreet urna nunc vel odio. Suspendisse convallis odio quis sagittis egestas. Mauris in tincidunt justo, sit amet venenatis risus. Nunc eget sem non tellus lacinia volutpat. In elementum vitae leo eu suscipit. Duis tristique vel urna quis adipiscing. Integer id risus id enim commodo sagittis. Quisque erat arcu, adipiscing et lacus vitae, fermentum hendrerit nisi.

Donec sed dolor facilisis nibh egestas accumsan. Praesent id feugiat mauris. Donec est nibh, tempor quis felis vitae, ornare lacinia turpis. Vivamus cursus pretium rutrum. Nullam dapibus enim id tellus mollis pulvinar. Integer ornare consectetur tortor blandit iaculis. Cras cursus at nisl ut facilisis. Quisque sodales rhoncus leo vitae aliquet. Nunc vestibulum a velit at sodales. Morbi dictum id sem quis convallis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida cursus diam, vel venenatis odio consectetur ac. Phasellus in risus luctus, tempus sapien quis, imperdiet tellus. Aenean pellentesque nulla in mauris volutpat, et scelerisque massa mollis. Nulla quam orci, eleifend nec aliquam in, molestie nec diam. Mauris sed purus ligula. Praesent non tellus elit. Praesent eget nunc euismod, ullamcorper dolor ut, auctor dui. Morbi faucibus accumsan dictum. Morbi ut convallis sem, id sodales orci. Aenean at feugiat urna, non faucibus metus. Ut eget quam sed elit aliquet interdum ultrices quis sapien.

Vivamus mauris lectus, viverra at enim sed, varius porttitor mi. Quisque quis nisi nec dui molestie ultricies. Duis blandit mattis neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nisi libero, auctor semper iaculis vel, feugiat vel nisl. Curabitur scelerisque tincidunt lorem iaculis ullamcorper. Ut tincidunt et erat ut auctor. Nulla tincidunt lacus et erat vulputate, a mattis nunc sodales. Vivamus tincidunt, metus et lacinia ultrices, leo eros bibendum massa, ut laoreet urna nunc vel odio. Suspendisse convallis odio quis sagittis egestas. Mauris in tincidunt justo, sit amet venenatis risus. Nunc eget sem non tellus lacinia volutpat. In elementum vitae leo eu suscipit. Duis tristique vel urna quis adipiscing. Integer id risus id enim commodo sagittis. Quisque erat arcu, adipiscing et lacus vitae, fermentum hendrerit nisi.

Donec sed dolor facilisis nibh egestas accumsan. Praesent id feugiat mauris. Donec est nibh, tempor quis felis vitae, ornare lacinia turpis. Vivamus cursus pretium rutrum. Nullam dapibus enim id tellus mollis pulvinar. Integer ornare consectetur tortor blandit iaculis. Cras cursus at nisl ut facilisis. Quisque sodales rhoncus leo vitae aliquet. Nunc vestibulum a velit at sodales. Morbi dictum id sem quis convallis.

 

[foxxu ❋]

Wizard♦ Oh no problem! uwu I am the same way. I also learn by looking at people's codes and trying to figure out how they coded its the only way for me to learn thankfully i have a coding friend that doesn't mind. But yeah tables the first step I think! All the special/fancy stuff is the div styles which most css is found like here (I use this so much.)

Kuroya's way seems a lot easier lol ;u; Which I didn't know about... hurururur. listen to them because i'm not an expert in coding tbh