How to display an iframe code by mouse over (hover) a different link? I tried this but it's not working;
<style>
iframe#xyz {
border: 2px solid #9a9a9a;
margin-left: 60px;
display: none;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
a#abc:hover iframe#xyz {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
</style>
<a class="linkclass" id="abc" href="link">link</a>
<iframe id="xyz" src="page.html"></iframe>
What am i doing wrong?
You're selecting it wrong, use:
a#abc:hover {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
Select a link with an id of abc.
If you want to show the iframe however, you must use the sibling selector +
use this:
a#abc:hover + #xyz {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
Do it this way
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#xyz{
display: none;
}
.linkclass:hover + #xyz{
display: block;
}
</style>
</head>
<body>
Click Here To View Map
<iframe id="xyz" src="#" width="870" height="300"></iframe>
</body>
</html>
Related
So let say i have three images same height and width a, b, c. I want a to come in front with full size after than b with a bit small and left part should be covered behind a . and then c smaller than b left part cover by b right side.
i tried using positioning in these boxes like absolute, relative , fixed but in vain
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<center>
<div class="rcorners1">
<div class="text"><h1>Digital Card Details</h1></div>
</div>
<div class="rcorners2">
<div class="left-wrapper">
<img class="image1" src="./images/Page1.jpg" alt="failed" />
<img class="image2" src="./images/Page2.jpg" alt="failed" />
<img class="image3" src="./images/Page3.jpg" alt="failed" />
</div>
<!-- -->
</div>
</center>
</body>
</html>
.css
.rcorners1 {
border-radius: 70px;
/* background: #73ad21; */
background-image: url(./images/Background.jpg);
padding: 20px;
/* flex: auto; */
width: 950px;
height: 250px;
}
.rcorners2 {
border-radius: 25px;
background: white;
border: 1px solid brown;
/* border: brown; */
/* background-image: url(./images/Background.jpg); */
padding: 20px;
/* float: none; */
/* position: absolute; */
margin-top: -150px;
/* flex: auto; */
width: 800px;
height: 400px;
}
.text {
color: white;
}
.leftWrapper {
float: left;
width: 32%;
height: 650px;
}
.image1 {
position: fixed;
width: 260px;
padding: auto;
height: 380px;
margin: 1px;
/* padding: 4px; */
border: 4px solid white;
margin-left: -200px;
outline-style: groove;
outline-color: brown;
}
.image2 {
/* position: absolute; */
border: 4px solid white;
width: 220px;
height: 320px;
top: 30px;
left: 30px;
/* padding: auto; */
outline-style: groove;
outline-color: brown;
/* outline-width: 12px; */
/* border: 1px green solid; */
margin-bottom: 38px;
margin-left: -100px;
}
.image3 {
width: 150px;
/* position: relative; */
outline-style: groove;
border: 4px solid white;
/* outline-color: brown; */
height: 220px;
top: 30px;
left: 30px;
padding: auto;
margin-bottom: 100px;
/* margin-left: px; */
}
Output -
Output
But i want something like
Expected
This is starting to look like your "expected": https://codepen.io/kodmunki/pen/wvyJPbV
<div class="continer">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
.container {
position: relative;
}
.a,.b,.c {
position: absolute;
border: 1px solid #000;
}
.a {
width: 100px;
height: 100px;
background-color: #ff0000aa;
z-index: 3;
}
.b {
top: 20px;
left: 65px;
width: 75px;
height: 75px;
background-color: #ffff00aa;
z-index: 2;
}
.c {
top: 30px;
left: 125px;
width: 50px;
height: 50px;
background-color: #ff00ffaa;
z-index: 1;
}
I want to change the inside color of a css so that it looks like this:
How i want it to look
How it looks so far:
Color i want to change
I've tried many things so that it looks like that, here is my html:
<div className="forms__highlightcolor">
<p>Highlight Color</p>
<input type="color" id="colorpicker" value="#0000ff"></input>
</div>
And the CSS i've made so far:
.forms__highlightcolor > input{
background: #F1F1F1;
width: 250px;
height: 35px;
border: 1px solid #F1F1F1;
border-radius: 20px;
}
.forms__highlightcolor > input[type="color"]::-webkit-color-swatch {
border: none;
width: 0px;
border-radius: 4px;
}
I want to change the inside color, but don't know how to do it.
Here is my code I hope this may help.
First You need to separate the input section and color has code section and wrap it inside a div.
#colorpicker {
border: 0;
padding: 0;
background: unset;
width: 30px;
height: 35px;
left: -5px;
position: absolute;
}
#colorpicker:hover {
cursor: pointer;
}
.color-input-wrapper {
display: flex;
align-items: center;
position: relative;
border-radius: 57px;
overflow: hidden;
width: 200px;
height: 25px;
position: relative;
background: #fdf8f5;
}
.color-input-wrapper:hover {
cursor: pointer;
}
.hash-code-section {
margin-left: 30px;
display: flex;
align-items: center;
flex:1;
margin-right: 10px;
text-transform: uppercase;
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: auto;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<div className="forms__highlightcolor">
<p>Highlight Color</p>
<div class="color-input-wrapper"><input type="color" id="colorpicker" value="#FF5733"></input>
<div class="hash-code-section">#FF5733 <i class="arrow down"></i></div>
</div>
</div>
Why this code shows border 7px
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
border: 7px solid #FFFD33;
<!-- width: 125px; -->
}
but if I put border: 7px solid #FFFD33;after commeting:
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
<!-- width: 125px; -->
border: 7px solid #FFFD33;
}
it doesn't ?
Try changing
<!-- width: 125px; -->
to
/* width: 125px; */
CSS uses different commenting and embedded HTML comments might break the declaration.
im new in CSS, im attempting to build a pretty simple website, i have the layout pretty much done, the problem now is that when i enter specific background-color properties for divs B+c, B and C it dosen't seem to take any effect, ive checked other questions and i know i should use overflow:hidden; also tried clear:both; but none of them seem to work, could you point me in to what im doing wrong?
<!doctype html>
<html>
<style>
body {
background: url(5750520604_febd0975e8_o.jpg), linear-gradient(180deg, #FFFFFF 80%, #B4B4B4 20%);
background-color: white;
background-size: 70%;
background-attachment: fixed;
background-repeat: no-repeat;
}
#A {
overflow: hidden;
border: none;
}
object {
width: 1500px;
height: 800px;
display: inline-block;
}
#B {
background-color: #777676;
clear: both;
display: flex;
overflow: hidden;
margin-left: -10px;
border: none;
width: 600px;
border: thick;
height: 300px;
display: inline-block;
margin-right: 0px;
float: left;
}
#C {
background-color: #777676;
clear: both;
display: flex;
flex: 0 1 auto;
overflow: hidden;
border: thick;
width: 1250px;
height: 300px;
display: inline-block;
margin-right: -10px;
}
#B+C {
background-color: #777676;
clear: both;
overflow: hidden;
border: none;
width: 1900px;
height: 1000px;
}
.webmaster {
background-color: #777676;
clear: both;
margin-left: -10px;
background-color: white;
overflow: hidden;
height: 80px;
width: 1920px;
border: none;
font-family: Georgia;
text-align: justify;
padding: 20px 640px;
font-size: 20px;
margin-top: -5px;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #4C4C4C;
}
a:hover {
text-decoration: none;
color: #B2B2B2;
}
a:active {
color: #000000;
text-decoration: underline;
}
</style>
<head>
<meta charset="utf-8">
<title>Rodriguez Tullio Propiedades</title>
</head>
<body>
<div id="A">
<object type="text/html" data="A.html">
</object></div>
<div id="B+C">
</div>
<div id="B">
<object type="text/html" data="B.html">
</object></div>
<div id="C">
<object type="text/html" data="C.html">
</object></div>
<div class="webmaster">2017 | webmaster#tullio.com.ar |</div>
</body>
</html>
Two problems here:
You cannot use B+C as your id attribute. According to the docs:
The value must not contain any space characters. HTML 4: ID and NAME
tokens must begin with a letter ([A-Za-z]) and may be followed by any
number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"),
colons (":"), and periods (".").
B+C uses a specific adjacent operator (the + symbol). In CSS, this means that the style definition will target a DOM element with the tag C that immediately follows a DOM element with the tag B.
First, in your HTML markup, try changing id="B+C" to id="D". Then, in your CSS, change #B+C to #D
Working example: https://jsfiddle.net/gkh2pj2j/1/
The '+' symbol is reserved as kind of an operator in CSS. It will grab #C after #B (the code being #B+#C). So, I'd recommend changing your B+c id to B-plus-C (if that name is suitable to you). I edited your code, both the id and the css styling. I changed the background-color to red, but don't worry I left your color as commented. I just wanted to make it really obvious that the element color has been changed.
body {
background: url(5750520604_febd0975e8_o.jpg), linear-gradient(180deg, #FFFFFF 80%, #B4B4B4 20%);
background-color: white;
background-size: 70%;
background-attachment: fixed;
background-repeat: no-repeat;
}
#A {
overflow: hidden;
border: none;
}
object {
width: 1500px;
height: 800px;
display: inline-block;
}
#B {
background-color: #777676;
clear: both;
display: flex;
overflow: hidden;
margin-left: -10px;
border: none;
width: 600px;
border: thick;
height: 300px;
display: inline-block;
margin-right: 0px;
float: left;
}
#C {
background-color: #777676;
clear: both;
display: flex;
flex: 0 1 auto;
overflow: hidden;
border: thick;
width: 1250px;
height: 300px;
display: inline-block;
margin-right: -10px;
}
#B-plus-C {
/*background-color: #777676;*/
background-color:red;
clear: both;
overflow: hidden;
border: none;
width: 1900px;
height: 1000px;
}
.webmaster {
background-color: #777676;
clear: both;
margin-left: -10px;
background-color: white;
overflow: hidden;
height: 80px;
width: 1920px;
border: none;
font-family: Georgia;
text-align: justify;
padding: 20px 640px;
font-size: 20px;
margin-top: -5px;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #4C4C4C;
}
a:hover {
text-decoration: none;
color: #B2B2B2;
}
a:active {
color: #000000;
text-decoration: underline;
}
<head>
<meta charset="utf-8">
<title>Rodriguez Tullio Propiedades</title>
</head>
<body>
<div id="A">
<object type="text/html" data="A.html">
</object></div>
<div id="B-plus-C">
</div>
<div id="B">
<object type="text/html" data="B.html">
</object></div>
<div id="C">
<object type="text/html" data="C.html">
</object></div>
<div class="webmaster">2017 | webmaster#tullio.com.ar |</div>
Can anyone figure out a fix for making the table version look like the div version in IE9?
http://jsfiddle.net/tCT9b/2/
<table class="foo"></table>
<div class="foo"></div>
div.foo {
float: right;
}
table.foo {
float: left;
}
.foo {
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #999;
border-radius: 5px;
position: relative;
}
.foo:empty:before {
position: absolute;
background: #eee;
width: 50px;
height: 50px;
content: 'None';
border: 1px solid #999;
border-radius: 5px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
text-align: center;
display: block;
line-height: 50px;
}