There is link outside Image, want to make whole div area (image) clickable
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
Tricked some css, but not covering whole area clickable.
.desty_block {position: relative;}
.detail {
position: absolute;
top: 95px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Note: After this post, did some dig and here is css
working example
.desty_block h3 {margin: 0 0 0px 0;}
.desty_block h3 a {
color: #ffffff;
display: block;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
z-index: 100;
padding-top: 7rem;
}
.desty_block{position: relative;}
Still doubt if it will work on all device ?
Any idea
Thanks
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
}
h1 {
font: inherit;
font-weight: bold;
}
#div6 {
z-index: 3;
position: absolute;
top: 30%;
left: 15%;
width: 150px;
border: 1px dashed #009;
background-color: #ddf;
text-align: center;
}
</style>
</head>
<body>
<h2>Card</h2>
<div class="card">
<a href="http://google.com">
<img src="https://icon-library.com/images/avatar-icon-images/avatar-icon-images-4.jpg" alt="Avatar" style="width:100%">
<div id="div3">
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</a>
</div>
</div>
</body>
</html>
Wrap the entire div with an anchor tag. Try the following (assuming the desty_block div contains image + text):
<a href="#">
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
</a>
Related
I tried searching the web for various answers and tried everything that solved other people problem, but my CSS just doesn't want to cooperate.
Here you can find a JSFiddle where I recreated the issue: I would like the side navigation to be visible on the black sections too.
HTML
<div class="sidenav">
Section 1
Section 2
Section 3
</div>
<div class="content">
<div>
<p>Some text<p>
</div>
<div class="blk">
<p>Some text<p>
</div>
<div>
<p>Some text<p>
</div>
</div>
CSS
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #0D0D0D;
border-radius: 0 5px 5px 0;
color: #0D0D0D;
mix-blend-mode: difference;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
did you want something like this?
html {
scroll-behavior: smooth;
background: #fff;
}
body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
background-color: #ffffff;
color: #0d0d0d;
}
/**********************************************/
.section {
width: 100vw;
max-width: 100%;
background-color: #ffffff;
text-align: center;
margin: 0;
padding: 15vh 0;
position: relative;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
/**********************************************/
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
mix-blend-mode: difference;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 0 5px 5px 0;
color: #fff;
background-color: #000;
}
.sidenav a:hover {
left: -2px;
}
.sidenav a.selected {
left: -2px;
color: #000;
background-color: #fff;
cursor: default;
}
<!doctype html>
<html>
<head></head>
<body>
<div class="sidenav">
Section 1
Another Section
Last One
</div>
<div class="content" onclick="closeMenu()">
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
</div>
</body>
</html>
you need it add mix-blend-mode to parent element like sidenav, than change backround, color and border-color in a
I've been struggling with this for hours and cannot find the solution. I've made a simple layout to display two pairs of gauge+thermometer visualizations to show the temperatures uploaded by ESP8266. The basic layout is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container_main">
<div id="heading"><h1>The title</h1></div>
<div class="graph">
<div id="container">
<div id="inner">
<div id="gauge_div"></div>
<div class="below_gauge">Text #1</div>
<div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one.</div>
</div>
<div id="thermometer">
<canvas id="termometar_cnv" width="160" height="600"></canvas>
</div>
<div id="inner2">
<div id="gauge2_div"></div>
<div class="below_gauge">Text #2</div>
</div>
<div id="thermometer2">
<canvas id="termometar2_cnv" width="160" height="600"></canvas>
</div>
</div>
<div id="below">Description.
</div>
</div>
</div>
</body>
</html>
body {
background-color: #ddd;
}
h1 {
color: #FFFFFF;
background-color: #0000FF;
padding: 5px;
}
#container {
height: 100%;
width: 100%;
display: table;
}
#inner {
vertical-align: middle;
display: table-cell;
}
#inner2 {
vertical-align: middle;
display: table-cell;
}
#gauge_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#gauge2_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#heading {
width: 100%;
margin: 0 auto;
text-align: center;
color: blue;
}
#below {
margin: 0 20px;
text-align: center;
color: blue;
}
.graph {
margin: 0 auto;
padding: 10px 0;
text-align: center;
color: blue;
border: thin solid #00F;
}
#container_main {
padding-right: 100px;
padding-left: 100px;
}
#thermometer {
margin: 0 auto;
padding: 10px 0px 10px 0;
background-color: gray;
}
#thermometer2 {
margin: 0 auto;
padding: 10px 20px 10px 0;
background-color: gray;
}
.below_gauge {
font-weight: bold;
color: blue;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
}
When <div class="below_gauge2"> is removed from the HTML the layout is exactly how I would like it to be. However, after adding that DIV, the green div moves up so it is not anymore vertically aligned with the second green div at the right.
What can be done so <div class="below_gauge2"> would be displayed below the left green DIV, but in a such way the green DIV would stay where it was before adding the <div class="below_gauge2">?
check this fiddle
#inner {
vertical-align: middle;
display: table-cell;
//added
position: relative;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
//added
position: absolute;
left: 0;
right: 0;
margin: auto;
}
P.S: below I have an answer with code how I would like to have it look like, but I do not think this is valid code?
I would like to have an interface(HTML5/CSS) that looks like MIRC fullscreen(see image below) and have searched all day even at stackoverflow
What I want is that the interface(GUI only) is fullscreen and that user(right) and chat window(left) have a scrollbar, but that the bottom bar where you type your message stays at the bottom.
Preferable it would only use CSS(but if javascript is needed I will allow it, but rather not) and it does not have to support any old browsers. I think this should be possible because mibbit
also has something that looks a lot like this.
I am wondering if there is any framework/library to help me create these kind of apps.
I have been toying around all day with CSS but can not get it to work and I think it is very easy for a CSS guru.
It was a lot of work(because I am junior CSS level), but this is what I could came up with:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*, html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
#wrapper {
min-height: 100%;
overflow: none;
}
#left {
float: left;
width: calc(100% - 200px);
height: calc(100% - 20px);
overflow-y: scroll;
}
#navigation {
float: top;
border-style: inset;
background: lightgrey;
padding: 5px;
height: 16px;
}
.img {
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
no-repeat;
vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */
}
#navigation li {
height: 32px;
margin-right: 5px;
float: left;
list-style-type: none;
margin-right: 5px;
}
#navigation a {
text-decoration: none;
text-align: center;
height: 16px;
}
.selected {
font-size: 14px;
padding-left: 5px;
display: inline-block;
vertical-align: center;
}
#messages {
height: calc(100% - 50px);
float: bottom;
list-style-type: none;
font-family: "verdana";
}
#users {
float: right;
width: 200px;
height: calc(100% - 20px);
overflow-y: scroll;
font-family: "monospace";
list-style-type: none;
}
#users li {
padding: 5px 10px;
height: 16px;
font-size: 16px;
cursor: pointer;
}
#messages li {
padding: 5px 10px;
height: auto;
font-size: 16px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
#message {
border-top: 1px inset;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="navigation">
<li>
<img class="img" src="" />
<span class="selected">
#Main
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Linus Torvalds
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Bill Gates
</span>
</li>
</div>
<div id="messages"></div>
</div>
<div id="users">
Alfred<br />
Linus Torvald<br />
Bill Gates<br />
Steve Jobs<br />
</div>
<div id="bottom">
<form action="">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</body>
</html>
Jsfiddle:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*, html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
#wrapper {
min-height: 100%;
overflow: none;
}
#left {
float: left;
width: calc(100% - 200px);
height: calc(100% - 20px);
overflow-y: scroll;
}
#navigation {
float: top;
border-style: inset;
background: lightgrey;
padding: 5px;
height: 16px;
}
.img {
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
no-repeat;
vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */
}
#navigation li {
height: 32px;
margin-right: 5px;
float: left;
list-style-type: none;
margin-right: 5px;
}
#navigation a {
text-decoration: none;
text-align: center;
height: 16px;
}
.selected {
font-size: 14px;
padding-left: 5px;
display: inline-block;
vertical-align: center;
}
#messages {
height: calc(100% - 50px);
float: bottom;
list-style-type: none;
font-family: "verdana";
}
#users {
float: right;
width: 200px;
height: calc(100% - 20px);
overflow-y: scroll;
font-family: "monospace";
list-style-type: none;
}
#users li {
padding: 5px 10px;
height: 16px;
font-size: 16px;
cursor: pointer;
}
#messages li {
padding: 5px 10px;
height: auto;
font-size: 16px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
#message {
border-top: 1px inset;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="navigation">
<li>
<img class="img" src="" />
<span class="selected">
#Main
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Linus Torvalds
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Bill Gates
</span>
</li>
</div>
<div id="messages"></div>
</div>
<div id="users">
Alfred<br />
Linus Torvald<br />
Bill Gates<br />
Steve Jobs<br />
</div>
<div id="bottom">
<form action="">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</body>
</html>
Also available on jsfiddle
P.S: Only tested thoroughly tested on Google Chrome(Version 47.0.2526.106 (64-bit Linux))
Simple code.jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<div class="navTitle">1</div>
<div class="subNav subNav1">test1</div>
<div class="subNav subNav2">test2</div>
<div class="subNav subNav3">test3</div>
<div class="subNav subNav4">test4</div>
</div>
</div>
<div class="container">
</div>
<div class="left">
<div class="leftEles leftEle1"></div>
<div class="leftEles leftEle2"></div>
<div class="leftEles leftEle3"></div>
<div class="leftEles leftEle4"></div>
<div class="leftEles leftEle5"></div>
</div>
<div class="footer">
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
And CSS.
body{
overflow: hidden;
font-size: 20px;
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 50px;
background-color: #0092C7;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 50px;
width: 200px;
bottom: 0;
border-right: 1px solid #C0C0C0;
}
.container{
position: absolute;
left: 200px;
top: 50px;
bottom: 0;
right: 0;
}
.leftEles{
width: 100%;
height: 50px;
background-color: #F4F3DE;
border-bottom: 1px solid #C0C0C0;
cursor: pointer;
}
.leftEles:hover{
opacity: 0.7;
}
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
}
.navTitle{
border-left: 1px solid #C0C0C0;
}
.subNav{
border-bottom: 1px solid #C0C0C0;
background-color: rgba(0,146,199,0.7);
cursor: pointer;
}
.subNav:hover{
color: #FFFFFF;
}
I'm curious why the hover and cursor effect on .subNav won't work!
Simple and silly question. Help me, many thx!
Your effect was not working because of .container is overlapping .header
Use z-index css on .header:
z-index: 2;
Complete css of .header
.header{
width: 100%;
height: 50px;
z-index:2;
background-color: #0092C7;
position: relative;
}
UPDATED DEMO
.container is positioned over navigation, has higher natural z-index (in code is after navigation).
To place navigation over container, set to navigation position: relative (only positioned elements (excluding position: static;) works with z-index) and higher z-index than 1.
.nav{
width: 200px;
height: 250px;
line-height: 50px;
float: right;
text-align: center;
position: relative;
z-index: 2
}
http://jsfiddle.net/4b2d0fyv/3/
I am trying to create a vertical line with a text in the middle. I don't know how to achieve this in css.
See image
Actually, many ways.
One of them:
html
<div class="wrapper">
<div class="line"></div>
<div class="wordwrapper">
<div class="word">or</div>
</div>
</div>
css
.wrapper {
position: relative;
width: 250px;
height: 300px;
border: 1px dashed #ccc;
margin: 10px;
}
.line {
position: absolute;
left: 49%;
top: 0;
bottom: 0;
width: 1px;
background: #ccc;
z-index: 1;
}
.wordwrapper {
text-align: center;
height: 12px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -12px;
z-index: 2;
}
.word {
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
font: bold 12px arial,sans-serif;
background: #fff;
}
See example: http://jsfiddle.net/zmBrR/22/
Here's a way to do it with no background image. It's pretty reliant on a fixed height; you'd have to use display: table-cell to have it align vertically perfectly.
http://jsfiddle.net/mstauffer/uyTB7/
HTML:
<div class="container">
<div class="side">Left side</div>
<div class="or">
<div class="or-line"></div>
<div class="or-label">Or</div>
</div>
<div class="side">Right side</div>
</div>
CSS:
.container {
padding: 1em;
}
.side, .or {
float: left;
height: 6em;
text-align: center;
}
.side {
width: 40%;
}
.or {
position: relative;
width: 20%;
}
.or-line {
float: left;
width: 50%;
border-right: 1px solid #aaa;
height: 6em;
}
.or-label {
background: #fff;
color: #aaa;
height: 1em;
left: 50%;
margin-left: -1.25em;
margin-top: 2em;
padding: .5em;
position: absolute;
text-transform: uppercase;
width: 1em;
}
Essentially, you're using .or-line to create a line at 50%; you're setting .or to position: relative; to contain the absolutely positioned .or-label; and you're manually positioning .or-label at 50% in the middle, and then adjusting it back across the line with a negative left margin. Then you're also expanding its size with padding and bumping it down vertically with the margin-top.
this is the solution with flex box:
https://jsfiddle.net/1z0runv9/1/
.wrapper {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
}
.or-separator {
display: flex;
flex-direction: column;
align-items: center;
color: #d3d7da;
}
.vertical-line {
border-left: 1px solid #d3d7da;
flex-grow: 1;
width: 1px;
}
<div class="wrapper">
<div class="or-separator">
<div class="vertical-line"></div>
<div>Or</div>
<div class="vertical-line"></div>
</div>
</div>
Put a <div> around the markup and use CSS like this:-
<div class="verticalLine">
some other content
</div>
in cSS:-
.verticalLine {
border-left:thick solid #ff0000;
}
OR you can try this:-
<style type="text/css">
#your_col {
border-left: 1px solid black;
}
</style>
<div id="your_col">
Your content here
</div>
You can use jquery to do the same thing. Import jquery cdn in your HTML document
select the required item and write a javascript code for that.
consider this example
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
<style type="text/css">
.completed{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
</ul>
</div>
<script type="text/javascript" >
`enter code here`
$("li").click(function () {
$(this).css("color","gray");
$(this).css("text-decoration","line-through");
});
or
$("li").click(function () {
$(this).toggleClass("completed");
});
</script>
</body>
</html>
In this example line is passed over the list(li) elements.
Regardless of the question asked, i am here going for a rather simple approach in both directions.
.demo-body{
height: 400px;
}
.line-wrapper{
background: black;
width: 2px;
height: 100%;
position: relative;
}
.line-wrapper .word{
position: absolute;
background: white;
top: 50%;
transform: translate(52%,-50%);
right: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
.line-wrapper .word.vertical{
writing-mode: tb-rl;
}
<div class="demo-body">
<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
<div class="word">OR</div>
</div>
<br>
<!-- VERTICAL TEXT -->
<div class="line-wrapper">
<div class="word vertical">OR</div>
</div>
</div>
you can archive it by using flexbox for example
body {
position: relative;
height: 100vh;
}
.vertical {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-10px);
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
color: #999;
}
.vertical .line {
width: 1px;
flex: 1;
background: #999;
}
<div class="vertical">
<div class="line"></div>
<div class="text">OR</div>
<div class="line"></div>
</div>