I'm an experienced .net developer, but all of us have areas where we can benefit from improvements. I feel that I'm severely lacking in HTML/CSS skills and I'm trying to teach myself in this area.
I'm trying to create an HTML layout for an application that monitors bandwidth consumption on the local network. I envisage the layout as consisting of 4 elements:
+--------------------------+
+ Controls +
+--------+-----------------+
+ Legend + Graph +
+ + +
+ + +
+ + +
+ + +
+--------+-----------------+
+ Log +
+--------------------------+
Controls - this is a narrow area that will allow clear, pause and otherwise control the graph. It will also allow to show and hide log area. This means that the layout need to accommodate the log area being hidden.
Legend - is a table that will list all series on the graph. It will show series color and also some numeric data associated with the series. If there are more lines in the legend that fit the screen it should be possible to vertical scroll legend area. Horizontal scroll is never required for the area it's assumed that it is always narrow enough. The height of Legend (and Graph) should take up all the remaining space that is not used by Control area and Log area. The width of the legend will be equal to the natural table width.
Graph - there will be a Graph here painted over HTML canvas. This should take up all available space both horizontally and vertically.
Log - here will be two or three lines of log displayed. If there are more than 3 lines to display there should be a vertical scroll bar on this area. This area need to be able to be hid-able. The height of this area can be made fixed. (in the vicinity of 100px - 200px).
The layout should adapt to window re-sizing, and keep looking descent when windows is being made small (to a point of course). Unless the window is too small, it should not have outer horizontal and vertical scrollbars.
Unfortunately, I cannot get it right in several places.
This is my code:
<html>
<head>
<style>
* {margin:0;padding:0;height:100%;}
html, button, input, select, textarea {
font-family: sans-serif;
font-weight: 100;
letter-spacing: 0.01em;
}
.container {
min-height:100%;
position:relative;
}
.control {
background:green;
width:100%;
height:auto;
margin-top: 0;
}
.content {
width:100%;
margin:0;
margin-top:0;
margin-bottom:0;
}
.legend {
position:relative;
background:blue;
float:left
}
.graph {
background:red;
}
.log {
background:yellow;
width:100%;
height:auto;
position:absolute;
margin-top: 0;
margin-bottom: 0;
bottom:0;
left:0;
}
.table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
.table td,
.table th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: 0.5em 1em;
}
.table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
.table td {
background-color: transparent;
}
.table-odd td {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<div class="control">header1<br/>header2</div>
<div class="content">
<div class="legend">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr class="table-odd">
<td style="background-color: #FFB300">1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td style="background-color: #803E75">2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr class="table-odd">
<td style="background-color: #FF6800">3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
<tr>
<td style="background-color: #A6BDD7">4</td>
<td>Ford</td>
<td>Focus</td>
<td>2008</td>
</tr>
<tr class="table-odd">
<td style="background-color: #C10020">5</td>
<td>Nissan</td>
<td>Sentra</td>
<td>2011</td>
</tr>
<tr>
<td style="background-color: #CEA262">6</td>
<td>BMW</td>
<td>M3</td>
<td>2009</td>
</tr>
<tr class="table-odd">
<td style="background-color: #817066">7</td>
<td>Honda</td>
<td>Civic</td>
<td>2010</td>
</tr>
<tr>
<td style="background-color: #007D34">8</td>
<td>Kia</td>
<td>Soul</td>
<td>2010</td>
</tr>
</tbody>
</table>
</div>
<div class="graph"><canvas></canvas></div>
</div>
<div class="log">log1<br/>log2</div>
</div>
<script>
function resize() {
var canvas = document.querySelector('canvas');
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx = canvas.getContext('2d');
ctx.strokeStyle='yellow';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(canvas.width,canvas.height);
ctx.stroke();
}
resize();
window.addEventListener('resize', resize, false);
</script>
</body>
</html>
This is the corresponding JSFiddle
Particular problems that I'm facing:
Why canvas is being rendered outside of the enclosing div? This is very surprising to me and I cannot figure out why.
How do I make the table be spaced out naturally? In particular:
Why first line is so tall?
How do I make the table do not take the whole height? It's enclosing dive that has height:100%, not the table, so why is it so tall?
How do I make it scroll-able if it's does not fit in the height?
The Legend/Graph area seems to extend underneath the Log area. Why? How do I prevent that?
Finally, how can I make the Log area of fixed height and scroll-able?
My apologies, I know that this question is a tall order, I'll gratefully accept any help and/or pointers. I do realize that I lack basic understanding, but that's what I'm trying to work against. I spent most of the evening today researching this topic and looking for source that allowed me to put together at least this non-working example. I'm comfortable with JavaScript, it's HTML/CSS that I mainly need help with. I studied the documentation on what properties of different DOM objects do, but it's difficult to figure out what properties to use and how.
You are complicating your CSS a lot for what you want,
you can use CSS Flexbox along with CSS calc() for this
body {
margin: 0
}
section {
background: red;
height: 50px;
}
article {
display: flex;
height: calc(100vh - 100px)
}
aside,
div {
background: lightblue;
}
aside {
overflow-y: auto;
max-width: 45%
}
aside ~ div {
flex: 1
}
canvas {
width: 100%;
height: 100%;
background: green
}
.table {
display: table;
table-layout:fixed;
width:100%
}
.row {
display: table-row;
background-color: #fff;
}
.column {
display: table-cell;
vertical-align: top;
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
padding: 0.5em 1em;
background-color: inherit;
}
.cell-header {
font-weight: bold;
}
.row-odd {
background-color: #f2f2f2;
}
<main>
<section>Controls</section>
<article>
<aside>
<div class="table">
<div class="row row-odd">
<div class="column cell-header">#</div>
<div class="column cell-header">Make</div>
<div class="column cell-header">Model</div>
<div class="column cell-header">Year</div>
</div>
<div class="row">
<div class="column" style="background-color: #FFB300">1</div>
<div class="column">Honda</div>
<div class="column">Accord</div>
<div class="column">2009</div>
</div>
<div class="row row-odd">
<div class="column" style="background-color: #803E75">2</div>
<div class="column">Toyota</div>
<div class="column">Camry</div>
<div class="column">2012</div>
</div>
<div class="row">
<div class="column" style="background-color: #FF6800">3</div>
<div class="column">Hyundai</div>
<div class="column">Elantra</div>
<div class="column">2010</div>
</div>
<div class="row row-odd">
<div class="column" style="background-color: #A6BDD7">4</div>
<div class="column">Ford</div>
<div class="column">Focus</div>
<div class="column">2008</div>
</div>
<div class="row">
<div class="column" style="background-color: #C10020">5</div>
<div class="column">Nissan</div>
<div class="column">Sentra</div>
<div class="column">2011</div>
</div>
<div class="row row-odd">
<div class="column" style="background-color: #CEA262">6</div>
<div class="column">BMW</div>
<div class="column">M3</div>
<div class="column">2009</div>
</div>
<div class="row">
<div class="column" style="background-color: #817066">7</div>
<div class="column">Honda</div>
<div class="column">Civic</div>
<div class="column">2010</div>
</div>
<div class="row row-odd">
<div class="column" style="background-color: #007D34">8</div>
<div class="column">Kia</div>
<div class="column">Soul</div>
<div class="column">2010</div>
</div>
</div>
</aside>
<div>
<canvas width="985" height="223"></canvas>
</div>
</article>
<section>Log</section>
</main>
Well your code is a mess. Here is my attempt to clean it a bit and achieve what you described: https://jsfiddle.net/dckex2g7/
I assumed that top and bottom bars have fixed height which makes this a bit simpler. If they don't, you should use display: flex; flex-direction: column on body element and flex-grow: 1 on .content.
Notice how I haven't used any JS for layout. To make it responsive you should use things like min-width and media queries. You almost never need JS for layout unless in a very few very specific cases which are not covered by flexbox somehow.
There's really a lot to describe about this solution so if you have any specific question ask away.
Related
I am having issues at work today and I am trying to responsively spread these 3 text boxes across the screen, one to the left maybe with a little padding pushing away from the left, one in the centre, and one to the right and also with padding pushing away from the right.
I have used many solutions, the reason this doesn't work when it works on my screen every time is because it goes through IE HTML and then gets displayed on an email so it must go through a specific conversion.
I have a feeling that this could also be an older/outdated version of HTML as everything is purely HTML based.
<div class="awards" style="display: flex; float: float;">
<div>silver</div>
<div>gold</div>
<div>platinum</div>
</div>
Here is the text boxes, I will try what you guys come up with / recommend, thanks.
Even to this day, CSS Flexbox support is not universally supported across email clients and the most reliable method is a three column table with 33% width on the cells.
<style>
.table-awards {
width: 100%;
}
.table-awards td {
border: 1px solid black;
width: 33%;
}
.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<table class="table-awards" style="width: 100%">
<tr>
<td class="gold" style="padding-left: 10px;">Silver</td>
<td class="silver" style="padding: 0 10px;">Gold</td>
<td class="platinum" style="padding-right: 10px;">Platinum</td>
</td>
</table>
If you were going to do it with flex it'd be something like:
<style>
.awards {
display: flex;
justify-content:space-evenly;
}
.awards > div {
border: 1px solid black;
flex: 1;
}
.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<div class="awards">
<div class="gold" style="margin-left: 10px;">silver</div>
<div class="silver" style="margin: 0 10px;">gold</div>
<div class="platinum" style="margin-right: 10px;">platinum</div>
</div>
I have a box like this:
<section class="notes-list-box">
<div class="nn">
<div class="heading">Notes</div>
<div class="boxdescription">With our complete study notes, your homework is much easier.</div>
</div>
<div class="ttn">
<div class="heading">Things To Know</div>
<div class="boxdescription">Things to know provides additional information on every topic which enhance the knowledge of the students.</div>
</div>
<div class="vdos">
<div class="heading">Videos</div>
<div class="boxdescription">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
</div>
<div class="sqaa">
<div class="heading">Solved Question and Answer</div>
<div class="boxdescription">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
</div>
</section>
Adding little bit of styling make it looks like this:
I have tried using vertical-align like this:
.notes-list-box > div {
vertical-align: top;
}
and it works. But I don't know how to align vertical at bottom so that all the white space also comes to bottom.
So the white space below notes and solved question and answer white background comes till bottom.
I want to fill those gaps with white space:
Use flexbox.
I used this CSS:
.notes-list-box {
display: flex;
font-family: sans-serif;
}
.notes-list-box > div {
margin: 0 5px;
background-color: white;
}
.heading {
color: white;
font-weight: bold;
padding: 10px 2px;
text-align: center;
}
.boxdescription {
padding: 5px;
}
.nn .heading {
background-color: #61B5DF;
}
.ttn .heading {
background-color: #41AF43;
}
.vdos .heading {
background-color: #FF8A00;
}
.sqaa .heading {
background-color: #FF1F2D;
}
See the result on JSfiddle.
The easiest way to do what you are trying to do is by using the display: table CSS properties.
JS Fiddle Here
HTML
<div class="table">
<div class="table-row">
<div class="heading table-cell">Notes</div>
<div class="heading table-cell">Things To Know</div>
<div class="heading table-cell">Videos</div>
<div class="heading table-cell">Solved Question and Answer</div>
</div>
<div class="table-row">
<div class="table-cell">With our complete study notes, your homework is much easier.</div>
<div class="table-cell">Things to know provides additional information on every topic which enhance the knowledge of the students.</div>
<div class="table-cell">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
<div class="table-cell">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
</div>
</div>
CSS
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid;
}
.heading {
vertical-align: middle;
text-align: center;
}
Here is an update with styling similar to yours.
Another alternative using jquery. Here is the fiddle.
JQUERY
$('.parentheight').each(function(){
var maxdivheight = 0;
$('.childheight',this).each(function(){
var divheight = $(this).height();
// compare height
if ( divheight > maxdivheight ) {
maxdivheight = divheight;
} else { }
});
// set all divs to max height
$('.childheight',this).height(maxdivheight);
});
HTML
<section class="notes-list-box parentheight">
<div class="alignbox nn childheight">
<div class="heading">Notes</div>
<div class="boxdescription">With our complete study notes, your homework is much easier.</div>
</div>
<div class="alignbox ttn childheight">
<div class="heading">Things To Know</div>
<div class="boxdescription">Things to know provides additional information on every topic which enhance the knowledge of the students.</div>
</div>
<div class="alignbox vdos childheight">
<div class="heading">Videos</div>
<div class="boxdescription">Reference videos on each topic provides experimental ideas and develops interactive learning technique.</div>
</div>
<div class="alignbox sqaa childheight">
<div class="heading">Solved Question and Answer</div>
<div class="boxdescription">With 100's of solved questions solved, now you can easily prepare your exam for free.</div>
</div>
</section>
CSS
.alignbox {
float: left;
width: 24%;
border: 1px solid red;
}
I got it working by setting everything to 100% height like so: http://jsfiddle.net/sur38w6e/
Your html was untouched.
.notes-list-box>div{
float:left;
width:120px;
background-color:yellow;
margin: 5px;
height:100%;
overflow:auto;
}
.heading{
background-color:red;
}
.notes-list-box{
background-color:green;
overflow:auto;
height:100%;
}
body,html{
height:100%;
}
I'm trying to place some content within a table cell but it needs to meet the following specifications.
The content I'm adding is:
x *
Where x is any number (i.e a variable length) and * is a picture of a star, which will be a fixed length of let's say ypx. I want this content to appear centred in the table cell, with x always being z pixels to the left of *. For example's sake, let's say the * is 16px wide, and z is 2px (i.e a 2px spacing between x and the star picture.
I've tried a simple 2 column layout where I float the x to the left, float the * to the right, which works but does not center the two columns, instead x sticks to the left of the table cell, and * sticks to the right of it.
Any help appreciated :) . I can use JS if need be, but I'd prefer a HTML/CSS solution of course.
here just in case the jsBin expires i will put the code in an answer. once again excuse my sloppy code, im literally about to fall asleep
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
td { width:300px; height:300px;border:1px solid;position:relative;}
td img {width:100%;max-width:16px;padding-left:2px}
.num { float:left}
.wrapper { margin:0 auto;}
</style>
<script>
$(function(){
width = $('.num').width() + 18;
$('.wrapper').css('width',width.toString() + 'px');
});
</script>
<table>
<tr>
<td>
<div class="wrapper">
<div class='num'>1234</div>
<img src="http://www.wpclipart.com/signs_symbol/icons_oversized/male_user_icon.png">
</div>
</td>
</tr>
</table>
http://jsbin.com/gesajeyiya/1/watch
If you know you will only be displaying numbers of 0 to 9999 then you do not need a script
http://jsbin.com/vagulejaqi/1/watch?html,css,output
<table id="your-table">
<tbody>
<tr>
<td>
<div class='cell-inner-wrapper'>
<div class='my-numbers'>
9999
</div>
<img src="https://www.novell.com/documentation/groupwisemobility2/gwmob2_guide_admin/graphics/icon_user_n.png">
</div>
</td>
<td>
<div class='cell-inner-wrapper'>
<div class='my-numbers'>
1
</div>
<img src="https://www.novell.com/documentation/groupwisemobility2/gwmob2_guide_admin/graphics/icon_user_n.png">
</div>
</td>
</tr>
</tbody>
</table>
#your-table {
font-family:monospace;
font-size:12px;
width:100%;
border: 1px solid #000;
}
#your-table td {
border: 1px solid #000;
width:50%;
}
.cell-inner-wrapper {
//12px * 4 + 16px + 2px
max-width: 66px;
text-align:center;
}
#your-table td img{
padding-left: 2px;
display:inline;
vertical-align:middle;
}
.my-numbers {
max-width:48px;
display:inline;
line-height:4.5em;
}
I have the following content:
It is a table, with one row and three cells, two blue cells, and the middle cell, and in the middle cell I have a div, for now it looks good.
But if I put the zoom property in the div (zoom: 0.8) I get an extra space in IE11, as if the div was still the same size, like this:
In chrome, the table just adjusts to the div size, but not in IE, is there anyway I can achieve this?
This is the fiddle of the example:
http://jsfiddle.net/Z3wbN/3/
HTML:
<table class="container">
<tr>
<td class="border">
</td>
<td>
<div class="content">
This is a test
</div>
</td>
<td class="border">
</td>
</tr>
CSS:
.container {
background-color: #ddd;
}
.border {
background-color: blue;
width:10px;
}
.content {
margin: auto;
width: 500px;
border: 2px solid yellow;
zoom: 0.8;
}
One possible solution, although I don't know if you'll like it, could be this one: http://jsfiddle.net/Z3wbN/14/
On that solution:
A couple of classes/ids are added to the tags;
The width is assigned to the middle cell instead of to the div inside that cell;
if it's an IE browser, the div width is adjusted to 125% (100% / 0.8 that is the zoom).
The way of detecting the browser is JavaScript but you could try any that you want (I got it from Detect IE version (prior to v9) in JavaScript):
// if it's an IE browser then update the class to "container ie"
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
document.getElementById("container").className = "container ie";
}
Then the CSS is adjusted as specified in the list above:
td.middle {
width:500px;
}
.content {
margin: auto;
border: 2px solid yellow;
zoom: 0.8;
}
.ie .content {
width:125%;
}
This solution displays a "similar" result on IE and Chrome/Firefox.
You need to use display:table-cell; to class .content
Here is the updated fiddle:
.container {
background-color: #ddd;
}
.border {
background-color: blue;
width: 10px;
}
.content {
margin: auto;
width: 500px;
border: 2px solid yellow;
zoom: 0.8;
display: table-cell;
}
zoom: 0.5;
<table class="container">
<tr>
<td class="border">
</td>
<td align="center">
<div class="content">
This is a test
</div>
</td>
<td class="border">
</td>
</tr>
</table>
All you need to do is to apply zoom to .container too :
.container {
zoom: 0.8
}
Here's the JSFiddle: http://jsfiddle.net/Z3wbN/12/
How can I have my text between an <HR> line?
For example: http://jsfiddle.net/VrvvX/
<div id="outerDiv">
<button id="myButton">Do This</button>
<br>-----------or do something else-<br>
<table id="mytable">
<tr>
<td>Blah:</td>
<td><select id="foo"></select></td>
</tr>
<tr>
<td>Blah:</td>
<td><select id="foo"></select></td>
</tr>
</table>
Rather than having ----- I'd like to have a pretty <hr> tag which works like a separator between the button and the table.
Set two <hr/> tags to display: inline-block and put a width on them with the text in between. Like this fiddle. Though you may want to adjust the positioning of it.
In addition to Tomás solution, you could create a HR class and add content: attr(data-content); to it. And then use the following HTML <hr class="hr-1" data-content="CONTENT HERE"/>.
This way you can fill in the content through HTML rather than CSS.
Fiddle:
https://jsfiddle.net/xqeuzrg7/
You could do something like this :
<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
Do this
</div>
Of course you can adjust width or play with padding: 0 ?px;
EDIT :
If you want to hide background under the title you can do :
<div style="background: url('line-background.png') 50% 50% repeat-x;width: 100%;text-align: center;">
<span style="background: white;padding: 2px;"> Do this</div>
</div>
I think this is not the best practice to do this but you can use this css for the <hr/> tag and it will properly work:
hr {
padding: 0;
border: none;
border-top: 1px dashed #CCC;
color: #333;
text-align: center;
font-size:12px;
}
hr:after {
content:"or do something else";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
I have updated your example, see if this is what you want:
http://jsfiddle.net/VrvvX/146/