How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

Tags: javascript,html,css,web

Problem :

I'm creating a 1 page dashboard that will run fullscreen on a monitor on which I want to display some graphs. I made the graphs already all I need now is a proper template for the page. I was thinking something like this enter image description here

I really dig the look but I'm clueless on how to make something like this using presumably css/js. Especially the lines in the background and a titlebox.

Solution :

First of all, you have to code all of the man div-containers including your graphs and data-visuals. For that, a css-framework could help you managing the different views for all devices (

Later on, you could add inner divs for the title box and the background. Also get yourself some inspiration. For example: this is the admin-theme I am using for my actual project:

After digging into that, you may ask some deeper questions about styling your Dashboard, so it's easier for us to respond to an actual problem ;)

Cheers, Chris

    CSS Howto..

    How to move menu to the right of the logo and to clean up unused space?

    How to float menu list elements

    How do I overlay a div on an empty div containing a background image?

    How do I get stack my web page content in to 2 columns and be consistent on page sizes

    How Can I Make An Odd Shaped Icon into a “Circle”?

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    How to add custom css class for each page?

    How do I create a teardrop in HTML?

    How to dynamically generate droppable/draggable/sortable div elements within a div?

    In laravel 4, How to render in template (blade) plain css or js from file?

    CSS: How to align text to baseline of height-adjusted input element?

    How to make angular material dialog box work in IE10

    How to style form elements unobtrusively with JavaScript and CSS?

    How to wrap a div containing text around a div containing an image?

    Change Class or CSS “display” property of a DIV and show it smoothly

    How to align an image on css?

    how to add string to the class javascript(jquery)

    How to remove the “Facebook social plugin” text?

    How to Make Certain Phrases Appear on One Line Regardless of Screen Size

    How to float div up?

    How do I align columns in the center of the page? [duplicate]

    how to many class share 1 css method in CSS

    how to trace this computed CSS value in firefox inspector?

    How to specify image paths in CSS files?

    how can you have layers see through each other on a web page

    How to achieve video-play navigation like khan academy in bootstrap? [closed]

    How do I properly set width to a percentile and keep a min-width in pixels?

    How do I remove the double border on this table?

    How To Layout a Grid in CSS

    How can I have a transparent overlay and center with flex box?