UI Challenge - how to draw "connectors" between elements? - html

Take a look at my fiddle here:
http://jsfiddle.net/DmcEB/12/
What I want to do is create a connector from the second tr to all the tr's below except for the last one. Here's a mockup:
How would I accomplish this via a combo of CSS/HTML/Prototype/Rails?

Something like this?
Take a look at my suggestion for a solution: http://jsfiddle.net/DmcEB/13/

I am truly a fan of jimmy's answer, but i have tried to do this without the use of images.
I know its not as good as it can be with the use of images, but probably it can be improved upon to actually get it working without images.
Here's what i have done: http://jsfiddle.net/DmcEB/15/

Related

Styling HTML/CSS to Achieve the Given Effect

I'm using fancyBox3 in a project and I want to achieve the following:
I wanted to know if there is a CSS trick to achieve it or if it requires some math and calculation to make it fit perfectly?
Basically, there are two ways - using JS (there are ton of scripts, for example https://github.com/brunjo/rowGrid.js, https://haltu.github.io/muuri/, https://github.com/kombai/freewall, http://miromannino.github.io/Justified-Gallery/) or CSS.
The problem with CSS is that it is still not possible to create true "masonry style layout", but you can archive something similar, try googling for "masonry using css", you will find many articles and examples about this topic, for example, this one - https://medium.com/#andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
Have a look at masonry.js - it does all the calculations for you to make your images tesselate as you resize the screen etc.

animate from list to detail with background in header

I have been trying for some time now to create it myself or find a good example of how to do this in the best way possible. I want to recreate this basically : http://www.materialup.com/posts/plaid
Can anyone point me in the direction of a good tutorial or example of how to do this, im neon-page-animating from a list to a page that looks like i want it, but making that smooth transition is not something i have been successfull at yet. Please help.
Like Ben Thomas said, you should use the neon-animated-pages component for that.
You can also take a look at these official demos that are somewhat similar to what you want to achieve :
grid demo - source
tiles demo - source

I have a layout I'm working on and I need help wrapping my head around where to get started

I'm working on a layout and instead of inserting an image, I wanted to try CSS. It seems like it's possible, but I don't know where to start. Everything is on a 20px grid, so what's the best way to line all of that up?
Here's a image to what I'm talking about.
Thank you!
You can use any grid systems available.
http://getbootstrap.com

CSS code for making tables look similar to those in Google Drive

I really like the way tables have been designed in the popup boxes that are used in Google Drive. I need a similar clean and refreshing design for my tables which have significant amount of content. Below is what I want:
I can do the HTML, I need the CSS code and guidelines for getting the row separators as shown in the fig above. Observe that the line under Counts is a darker shade of gray than those used to separate the rows. How can I achieve this effect and how do I add row separators? Please help!
Here's a fiddle where I've attempted to recreate that look by sight. Mostly it's just separating the styles for th from those for td. Thanks for the question, this was good practice.
http://jsfiddle.net/mecBe/2/

Alternative for the following design using CSS

I have got a requirement where the outlook is as shown in the attached image
I have accomplished the task by making use of tables in HTML and styling using CSS.
The criteria is that the images in a row is almost the same (i.e the two images) and the content changes for every row. So the content is different on every row but the images remain the same for every row. Just for info there will be multiple number of rows. What would be the best practice to implement such as design other than using tables, where it should also be flexible to change the content. Or using tables is the best option.
Suggestions from the professionals are appreciated.
I don't want to write it for you but I've made a quick mock up for you to have a look at - http://jsfiddle.net/spacebeers/TAJdw/
You don't want to use tables for anything other than tabular date anymore. You're much better off spending your time researching CSS.
Have a look at my example. It's what one instance of a content container could look like. What you want to do from there is look at getting two of them in a row. Build the CSS for the .container class, then copy another instance of .contentContainer in and see what results you get.
I'm happy to provide help if you want but it's always good to have a crack at it yourself. You'll get better answers on here and avoid unnecessary downvoting of your question.
It is generally advisable to use pure css for things like this, rather than tables. Tables cause your page to render slower, as the content needs to be loaded before the rendering engine can correctly draw them.
Try something like this
I would consider using a div with a background image style to it so that for each row with the same image all you will need to do is put that specific div class in. Then you can just position the outer div's to get it to look correctly, although tables are not the most efficient way of build web pages they still work.
Like mez said - you need to think about repeating content - and learning about floats. I'd really advise working through this site
http://css.maxdesign.com.au/floatutorial/
it will teach you all the basics of designing with divs.
In the meantime - here's roughly what your're after. I've added background colours and made up all the heights and widths, as they weren't specifie, but it should get you started.
If you look at the html, I've annotated what is just a repeat of earlier content.
http://jsfiddle.net/zandergrin/k8EsP/3/