Forum Moderators: open
<div align="left" class="row">
<div class="column left" style="background-color:#ddd; border-width:2px;">
<h2>Column 1</h2>
<p><input type="checkbox" id="toggle-chk">
<label for="toggle-chk" id="button"></label>
<img src="test_DOT-1.png" id="dot"></p> <----------------- I WANT TO REMOVE FROM HERE...
</div>
<div align="center" class="column right" style="background-color:#bbb; border-width:2px;">
<h2>Column 2</h2>
<p>Some text..</p> <-----...AND PLACE HERE
</div>
</div>
the input type="checkbox" needs to be placed just after the opening body tag.
This will then allow it's effect to cascade correctly.
Here is the amended code...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
.left {
margin-bottom: 0.25em;
border:1px solid #000;
background-color:#ddd;
}
.right {
border:1px solid #000;
background-color: #bbb;
text-align: center;
}
#toggle-chk {
position: absolute;
left: -999em;
}
#button {
display: block;
width: 7em;
padding: 0.25em 0;
margin-bottom: 1em;
border: 1px solid #999;
border-radius: 0.25em;
background-image: linear-gradient( to bottom, #fefefe, #ccc );
box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
text-align: center;
cursor: pointer;
}
#button::before {
content: 'show image';
}
#dot {
display: none;
}
#toggle-chk:checked ~ .row .left #button::before {
content: 'hide image';
}
#toggle-chk:checked ~ .row .right #dot {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle-chk">
<div class="row">
<div class="column left">
<h2>Column 1</h2>
<p>
<label for="toggle-chk" id="button"></label>
<!-- I WANT TO REMOVE FROM HERE... -->
</p>
</div>
<div class="column right">
<h2>Column 2</h2>
<p>Some text..
<!-- ...AND PLACE HERE -->
<img src="test_DOT-1.png" id="dot" alt="test dot">
</p>
</div>
</div>
</body>
</html>
#toggle-chk:checked ~ #dot-1 {
display: block;
}
#toggle-chk:checked ~ #dot-2 {
display: block;
}
#toggle-chk:checked ~ #dot-3 {
display: block;
}<img src="test_DOT-1.png" id="dot-1" alt="dot-1">
<img src="test_DOT-1.png" id="dot-2" alt="dot-2">
<img src="test_DOT-1.png" id="dot-3" alt="dot-3">
What is "em" a measure of?Text size, as determined by current font settings. Formally, an em is the height and width of a capital M, hence the name. You use ems for text-related formatting: paragraph spacing, maximum line length, paragraph indent, line-height, padding of text areas, and so on.
.left {
margin-bottom: 0.25em;
border:1px solid #000;
background-color:#ddd;
width: 242px;
display: table-cell;
}
.right {
border:1px solid #000;
background-image: url(Brooklyn.jpg);
background-repeat: no-repeat;
text-align: center;
display: table-cell;
}
.row {
display: table-row;
}
img {
max-width: 100%;
}
how do they tell an image to arrive at any specific point on a canvasBy not trying to do something in pure html that cries out for javascript. In fact “canvas” is just the right word, since it’s a javascript feature that should do exactly what you’re looking for. Even MSIE
<body>
<input type="checkbox" id="toggle-chk">
<div class="row">
<div class="column left">
<h2>Column 1</h2>
</div>
<div class="column right" style="background-image: url('Brooklyn.png')">
<p>Some text..
<img src="test_DOT-1.png" id="dot" alt="test dot">
</p>
</div>
</div>
</body> <img src="test_DOT-1.png" id="dot" alt="test dot"><img style="position:absolute; top:35px; left:170px" src="test_DOT-1.png">
How do I pad the DIV?Edit the css for the .left which is your left division. For example:
.left {
margin-bottom: 0.25em;
padding-left: 5px;
border:1px solid #000;
background-color:#ddd;
width: 242px;
display: table-cell;
}but the checkbox lies outside of both DIVsThat is because it is placed just inside the body tag. If it is to appear in the left column, you should place "<input type="checkbox" id="toggle-chk">" inside "<div class="column left">" somewhere below the <h2 header tag and if you'd prefer not to edit the left column CSS for padding, you could also put the <input inside <p> tags.
