I have a big table, I'm going to try to make a game. I need all the table parts to be square, but the edges are more rectangular. I can't find anything to help fix this.
I've tried setting the max width and height of tr and th to 6.667vw(approx. 1/15 of the screen width) but the edge sizes are still too big to be the small round error. I've erased the width and height of tr and th to see if it was something of that, but that didn't work either. I have a lot of table elements, a 15x15, I am giving the smallest amount possible for my given problem; I am also adding the css.
Css:
* {
margin: 0;
padding: 0;
}
table {
width: 100%;
height: 100vw;
border: 3px solid red;
border-collapse: collapse;
}
tr th {
border: 2px solid black;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Scrabble</title>
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="game">
<div class="board">
<table>
<tr class="row1">
// 15 <tr> elements with
// incrementing 'col#' classes
</tr>
<tr class="row2"> // class 'row#' incremented by 1
// 15 <tr> elements
</tr>
// 13 more <tr> elements with
// incrementing 'row#' classes
</table>
</div>
<div class="letterSelect"></div>
</div>
</body>
</html>
Sorry for the html with no elements, I wanted to keep it concise while giving you enough detail to replicate. The class names have no functionality, but I included them because they are in my code. I hope this is enough.
First thing to note is you shouldn't really use a <table> to make your game board. A <table> should be used for displaying tabular data. More information about tables on MDN.
I would advise using display:grid to make your board instead. More information about grid layout on MDN.
I have created a codepen to use as a starting point. The code is also shown below.
HTML
<div class="game">
<div class="board">
<div class="square"></div>
<!-- 224 more .square elements to make your 15 x 15 board -->
</div>
</div>
CSS
.game {
padding: 20px; // just to add some breathing space to the demo
display: grid;
place-content: center;
}
.board {
display: grid;
grid-template-columns: repeat(15, 5vmin); // substitute 5vmin for whatever size you like, just make sure to use the same value for grid-template-rows
grid-template-rows: repeat(15, 5vmin);
border: 1px solid black;
}
.square {
border: 1px solid black;
}
Related
Also, Is there any better way to manage option links? I have used table to manage them. Later, I want to add padding and fonts to those links too. Or, should I use four anchor tags inside a div to manage them. I have tried several ways to achieve this. All of them failed, instead cluttered the code more and more. Please excuse the low-quality of the question, as this is my first time asking here.
<!DOCTYPE html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<img src="ignou.png">
<h1>INDIRA GANDHI NATIONAL OPEN UNIVERSITY</h1>
</div>
<div class="options">
<table>
<tr> <td>Home </td> </tr>
<tr> <td>Programme List </td> </tr>
<tr> <td>Registration </td> </tr>
<tr> <td>Important Dates </td> </tr>
</table>
</div>
<div class="data">
<h2>Welcome to IGNOU Homepage</h2>
<h3>Aims and Objectives</h3>
<p>.....</p>
<h3>Strengths of IGNOU.</h3>
<p>.... </p>
</div>
</body>
</html>
body {
margin: 1%;
}
.header img {
width: 10%;
height: 10%;
float: left;
}
h1 {
color: blue;
text-align:center;
}
table{
float: left;
width: 20%;
height: 100%;
}
.data {
float: right;
}
This is how it looks as of now.
This is how I want it to look (only the position of text, ignore the rest)
You can wrap them in a div and then use display:grid; on the div and do grid-template-columns: repeat(12, 1fr); and for spacing grid-gap: 16px; Then you can use grid-column: span 3 to the nav and grid-column: span 9 on the main element
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 want to change the background color of the div tag with div element with class of ind and id of three to blue.
here is my css
h1 {
text-align: center;
}
#identify {
text-align: center;
}
.container {
border-style: dotted;
width: 800px;
height: 400px;
position: absolute;
right: 550px;
}
.ind {
float: left;
position: relative;
top: 40%;
padding: 50px;
left: 200px;
}
.ident {
position: relative;
display: inline;
float: left;
text-align: center;
padding: 10px;
}
#2.ind {
background-color: blue;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="project" content="hello">
<title></title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="2css.css">
<h1>Set the distance!</h1>
<p id="identify">To play this game, you must be at least 18 years old. You must also fill out some information.</p>
<div class="container">
<div class="ind" id="2">2</div>
<div class="ind" id="3">3</div>
<div class="ind" id="4">4</div>
</div>
</body>
</html>
In the browser for some reason the background color of div class ind with id of 2 won't change to blue. Any suggestions?
Despite the many claims otherwise, IDs in HTML5 can indeed start with a number. Care must be taken when referring to these elements in other contexts, however. First some code:
console.log(document.querySelector('#\\0032') == null);
#\0032 { background-color: black; color: white }
[id="2"] { background-color: white; color: black }
<p id="2">
Two
</p>
You do need to escape the number, using an Unicode escape sequence (I've expanded it to its four digit hexidecimal representation so that's clear). You can use an attribute selector, but that changes its specificity (see this question's answers for more information on that topic) to be lower than IDs. You can see that the second selector is not specific enough to override the ID selector. Not necessarily a bad thing, but certainly something to be aware of.
Note that despite it working, and being allowed by the relevant specifications, it is generally frowned upon because of the need for escaping in CSS. Note that also means that in something like the DOM method querySelector, when accessed in JavaScript, the escape character must also be escaped (since you must use a JavaScript string, which uses the same escape character). I've added an example of that to the snippet as well.
CSS IDs cannot contain only number.
Two solutions:
1- change your ID in alphanumeric, i.e. id="div2"
2- use data attribute as data-id="2" and then in CSS use
.ind[data-id="2"]{background-color:blue;}
if you want to access it in css, an id cannot start with a no., thus #2 wont work.
If you want to still use id="2" try:
#\32 {
background-color: blue;
}
To give CSS effect to div element id=3, you can do it as below.
.container > .ind[id="3"]
{
background-color:lightblue;
}
<div class="container">
<div class="ind" id="2">2</div>
<div class="ind" id="3">3</div>
<div class="ind" id="4">4</div>
</div>
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.
I am using Zurb Foundation for page layout. A row on my page needs have some text and then a line that fills the rest of the width, like so:
| Text of Indeterminate Length -------------------------------------- |
I have the desired layout working with <table> and <hr> tags:
<div class="row">
<div class="large-12 columns">
<table style="width:auto;border-collapse:collapse;border:0;padding:0;margin:0;">
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
</div>
</div>
I realize that the use of <table> for layout and <hr> for drawing lines are both generally frowned upon in modern web design. I spent a while trying to get the same layout using <div>, <span>, and <p> and couldn't come up with anything simple and straightforward that didn't require what seemed like an excessive use of Javascript. On top of that, most recommended solutions suggest using things like border_bottom which doesn't give me a nice line in the middle like <hr> does.
So my question is this: is there a straightforward way to do this without <table> or <hr>? Perhaps with some sort of a custom <span> style?
A potential solution could be to give your heading a background style with display:block and width:100% and the text with a white background to hide the line from the containing heading? http://jsfiddle.net/9o74jbLh/
<h3><span>{% block hightide_pagename %}{% endblock hightide_pagename %}
</span></h3>
h3 {
display:block;
position:relative;
width:100%;
}
h3:after {
content:"";
height:1px;
width:100%;
background: #000;
position:absolute;
top:50%;
}
h3 span {
background:#fff;
}
I've seen this design element pop up a few times, and the best way that I've seen it done (which is by no means a perfect way) is to use overflow hidden on a container, float the heading (or make it inline-block), and set the left attribute of your absolutely positioned line element (preferably a pseudo-element so as to keep your markup clean). In effect you get this:
/* stuff to make the demo pretty */
table {
border: 1px solid red;
}
table:before {
content: 'bad way';
color: red;
display: block;
}
.good-ish-way {
border: 1px solid green;
margin-top: 1em;
}
.good-ish-way:before {
content: 'good-ish way';
color: green;
display: block;
}
/* the actually useful stuff. */
.good-ish-way {
overflow: hidden;
}
.good-ish-way h3 {
position: relative;
display:inline-block;
}
.good-ish-way h3:after {
content: '';
width: 100%;
position: absolute;
left: 100%;
height: 1px;
background: #777;
width: 1000%;
top: 0;
bottom: 0;
margin: auto 0 auto 0.3em;
}
<table>
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
<div class="good-ish-way">
<h3>Text of Indeterminate Length</h3>
</div>
The only major problem with it is the 1000% part. I've seen other devs use a large pixel value, but the thing is, you'll never know if it's enough. You could use 100vw, but then there are some compatibility issues with older browsers.
Demo for you to play around with it: http://jsfiddle.net/uru17kox/
Edit: Oh! and here's where I first saw this method illustrated in case you want a different spin on it. https://css-tricks.com/line-on-sides-headers/