How do I code something like this?

Go down

How do I code something like this?

Post by YAI Website on January 29th 2016, 9: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?

avatar
YAI Website
New Member

Posts : 5
Reputation : 1
Language : English, HTML, CSS

http://help.forumotion.com/help

Back to top Go down

Re: How do I code something like this?

Post by SLGray on January 29th 2016, 9: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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43071
Reputation : 3047
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: How do I code something like this?

Post by YAI Website on January 29th 2016, 9:53 pm

What do you want me to change it to?
avatar
YAI Website
New Member

Posts : 5
Reputation : 1
Language : English, HTML, CSS

http://help.forumotion.com/help

Back to top Go down

Re: How do I code something like this?

Post by Take Notes on January 29th 2016, 10:08 pm

Where do you want the image?
avatar
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: How do I code something like this?

Post by APE on January 29th 2016, 10: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



avatar
APE
Administrator
Administrator

Male Posts : 12049
Reputation : 1208
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: How do I code something like this?

Post by YAI Website on January 30th 2016, 7: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 Wink

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

Posts : 5
Reputation : 1
Language : English, HTML, CSS

http://help.forumotion.com/help

Back to top Go down

Re: How do I code something like this?

Post by Take Notes on January 30th 2016, 3:42 pm

I am really confused on where you want the image.
avatar
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Re: How do I code something like this?

Post by SLGray on January 30th 2016, 7:38 pm

Could you post the link where you see this image?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43071
Reputation : 3047
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: How do I code something like this?

Post by YAI Website on February 2nd 2016, 9: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?
avatar
YAI Website
New Member

Posts : 5
Reputation : 1
Language : English, HTML, CSS

http://help.forumotion.com/help

Back to top Go down

Re: How do I code something like this?

Post by SLGray on February 3rd 2016, 3:52 am

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.



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43071
Reputation : 3047
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: How do I code something like this?

Post by Ange Tuteur on February 3rd 2016, 5: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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Re: How do I code something like this?

Post by YAI Website on February 3rd 2016, 9: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?
avatar
YAI Website
New Member

Posts : 5
Reputation : 1
Language : English, HTML, CSS

http://help.forumotion.com/help

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum