How to make a flowchart/diagram using only HTML and CSS [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I need to make a really complicated diagram for a website, in which the hierarchy will be a bit messy: arrows will go up and down, sometimes an element will point to several others, and sometimes there will be several elements pointing to the same one. I have found this method, but it doesn't allow more than one parent for an element and therefore won't do the trick in this case.
It has to be done in HTML/CSS, because my intention is to add some Javascript to change the content of the blocks dinamically.
This is an example of the level of complexity I need to achieve:

You might want to take a look at this
http://thecodeplayer.com/walkthrough/css3-family-tree

Another to look for is SpaceTree example by "Nicolas Garcia Belmonte" but not a pure CSS solution. It is compatible with IE and most of browsers. Definitely worth a try.

Related

Custom made HTML tags [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Just came across a project that had custom-made tags.
Something like:
<buildings>
<building-1></building-1>
<building-2></building-2>
</buildings>
(This code doesn't do anything; it's an example)
(It's not mine) (https://codepen.io/perbyhring/pen/jpQwav) What is the use of this?
Those custom HTML elements have been introduced some time ago and should make HTML code more readable.
"Those elements provide a way to build own DOM elements but also have some drawbacks as simply defining and using an element called blue-button does not mean that the elements represent a button. Tools such as Web browsers, search engines, or accessibility technology will not automatically treat the resulting element as a button just based on its defined name."
Read more about them in the html standard.

Why i should use float instead display:table-cell? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am converting a PSD to html but i am little confused about float, i can use here display:table-cell; instead float for navigations, and other links. is there any standard to picking the CSS property.
There are a whole host of different CSS layout strategies you can consider, and each have their own strengths and drawbacks. Floats work in every browser, down to and including IE6. Table Display only works in IE8+. It’s also not widely used because it tends to require a lot of markup to get the same effect as a simple float layout.
Most integrations require a combination of layout strategies, including absolute positioning and floats. If you aspire to be a web designer, I’d suggest you start with these.

Can a table be styled like this? Or would something else be better? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Basically I am working on some practices since last week to start learning html and css, and I wanted to create a table of sorts to display items with the option to see more info and take/buy it. I was thinking in adding some background icons or image hence the strange looking table.
My question is. Can something like that be styled or would a normal table be better? To illustrate my point I did a mockup of sorts.
Oh! And as not to make another question just for that, can a dropdown list be made to have checkboxs without using jQuery? I'm afraid that is completely out of my reach with my current knowledge.
http://i59.tinypic.com/25z47dh.png
Thanks a lot in advance
Best Wishes
You have a few options:
You may use display: table and assign table 'rows' and 'columns' on div tags.
Or
You may use float: left which will line everything like a table and be more responsive.
Or
You may use display: inline-block which will behave a lot like the floats except you get a little bit more control on box height.
There is no correct answer here but my preference is with inline-block since browser support tends to be superior than floats while keeping everything responsive.

Designing layout in html [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I use CSS to stylize my pages. I use % style instead of using px values. However, since I need to add several elements of different sizes in different positions, I end up spending more time in designing the layout than the coding.
I tried using a WYSIWYG editor but it uses px style coding. Can someone help me with a solution so that I can design the layout quickly and proceed to real part? I use WordPad right now.
The best thing to do is practice more. Get better at coding them, and reuse parts from prior projects where it makes sense.
There is no WYSIWYG tool that will save you time, for most projects. They all write garbage code, because editing with such a tool is a bit ambiguous. It is up to you as a web developer to write your markup and styles in a way that will be interpreted correctly across many user agents.

Scale Entire Site [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I essentially want to be able to scale the entire site (images, elements, the whole sha-bang) to what ever browser size window the user is using. Anyone have success doing this and would be willing to share how?
I'm using HTML 5 by the way.
You need to start thinking about sizing your elements using percentages instead of pixels.
Take a look at this simple example and it may help you on your way. Good luck.
http://jsfiddle.net/hACbn/1/
Take a look at using responsive layouts:
Here's a half decent framework to get you started
http://gridpak.com/