How do I code something like this?

by YAI Website January 29th 2016, 5:45 pm

Technical Details

Forum version : #PunBB
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : ( link is hidden, you must reply to see )

Description of problem

How do I code something like this picture into HTML and CSS?

How do I code something like this? 15ht87

by **SLGray** January 29th 2016, 5:49 pm

Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.

by YAI Website January 29th 2016, 5:53 pm

What do you want me to change it to?

by Take Notes January 29th 2016, 6:08 pm

Where do you want the image?

by **Ape** January 29th 2016, 6:45 pm

Your forum link is our link you need to put your OWN link in your post Please edit your first post and add your own URL Not the help forums one.

Also there is no need to hide the link Wink

by YAI Website January 30th 2016, 3:37 am

It's not an image I want to post, I want to make the image into tables that way it is purely code. I have no clue of how to even start, I do; however, know about tables, but the curves and overlapping is what I am unsure of.

APE wrote:Your forum link is our link you need to put your OWN link in your post Please edit your first post and add your own URL Not the help forums one.

Also there is no need to hide the link

Sorry, my forum is still incomplete. I would rather not let anyone see it until I am done. Wink

by Take Notes January 30th 2016, 11:42 am

I am really confused on where you want the image.

by **SLGray** January 30th 2016, 3:38 pm

Could you post the link where you see this image?

by YAI Website February 2nd 2016, 5:53 pm

I want to convert the image to html. Not actually put the picture on the webpage, but convert it to html with coding. Like how do I put the curves in it?

by **SLGray** February 2nd 2016, 11:52 pm

Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.

by Ange Tuteur February 3rd 2016, 1:11 pm

Hmm.. I'd say you're going to need an ingenious use of HTML and CSS, mostly the latter. If you want to make curved elements in CSS you'll need to use the border-radius property. Take a look at this table for example :

Text text text

Code:: [table style="height:100px;width:300px;color:#FFF;background:#8C5;border-radius:0 100px 3px 0;"][tr][td]Text text text[/td][/tr][/table]

However, with what you're asking it'll definitely require overlapping some elements with CSS positioning. If you need more information on this stuff, this topic should help.

by YAI Website February 3rd 2016, 5:55 pm

Ange Tuteur wrote:Hmm.. I'd say you're going to need an ingenious use of HTML and CSS, mostly the latter. If you want to make curved elements in CSS you'll need to use the border-radius property. Take a look at this table for example :

Text text text
Code:
[table style="height:100px;width:300px;color:#FFF;background:#8C5;border-radius:0 100px 3px 0;"][tr][td]Text text text[/td][/tr][/table]

However, with what you're asking it'll definitely require overlapping some elements with CSS positioning. If you need more information on this stuff, this topic should help.

Yes, this is exactly what I want. I am curious as to how to get started. Any guidance would be very helpful.

SLGray wrote:Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.

Well, what do you want me to change it to?