I need the radio button below to be composed of two separate boxes, rather than one:
<!DOCTYPE html>
<html>
<head>
<style>
.navText {
font-family: Helvetica, sans-serif;
font-size: 15px;
font-weight: 400;
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
input[type=radio] {
display: none;
}
.overlay {
position: relative;
float: left;
width: 100px;
height: 50px;
display: table;
background-color: grey;
}
input[type=radio]:hover + .overlay {
background-color: red;
}
input[type=radio]:checked + .overlay {
background-color: red;
}
</style>
</head>
<body>
<label><input type="radio" name="nav" onclick="document.location='#';">
<div class="overlay"><h1 class="navText">Home</h1></div></label>
</body>
</html>
I would like it to work like this (but still as a radio button):
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 153px;
height: 50px;
float: left;
}
.container:hover div {
background-color: red;
}
.box1 {
width: 50px;
height: 50px;
float: left;
margin-right: 3px;
background-color: grey;
}
.box2 {
width: 100px;
height: 50px;
float: left;
background-color: grey;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
How can I make the radio button be composed of two separate boxes?
You could add another box using pseudo-element :after
.overlay:after {
content:'';
position: absolute;
width: 100px;
height: 50px;
left:104px;
display: block;
background-color: yellow;
}
.overlay:hover,
.overlay:hover:after {
background-color: red;
}
input[type=radio]:checked + .overlay,
input[type=radio]:checked + .overlay:after {
background-color: red;
}
Also, if you want the overlay to change color on a :hover, you need to apply the styling to the overlay, not to the radio button (as it's not possible to hover the radio button itself).
Fiddle here:
http://jsfiddle.net/0r1tefr8/2/
Related
As you can see on the pic, I want the "h" to be on the blue div, and the "ello" to be on the white part of the picture. I tried to float the "h" to the right, and then add a ::after with the content "ello" but that didn't work. How would I go about doing this?
.home-text-h1 {
position: relative;
top: 30%;
float: right;
font-size: 40px;
}
.home-text-h1::after {
content: "ello";
background-color: red;
}
<div>
<div class="left-margin">
<h1 class="home-text-h1">h</h1>
</div>
</div>
This is the typical html5 solution with the use of the mark tag, however anything that displays inline will work, you can also make use of a span tag.
<h1 className="home-text-h1">H<mark style="background: red;">ello</mark></h1>
Or with span tag:
<h1 className="home-text-h1">H<span style="background: red;">ello</span></h1>
A more "elaborate" example:
h1 {
background: blue;
display: inline-block;
}
h1:first-letter {
color: white;
}
<h1 className="home-text-h1">H<span style="background: red;">ello</span></h1>
Simple example with ::first-letter (not recommended as support is not good atm)
h1 {
background: red;
display: inline-block;
}
h1:first-letter {
background: white !important;
}
<h1>hello</h1>
First mistake you did was using the wrong attribute. It should be class and not className. Second is assuming that ::after isn't part of the "parent" element, but if you float something, then the ::after will count as part of the floated element. So your original idea didn't work. I placed the ::after after the actual container div and translated it to be outside the container. See the code below:
.left-margin {
position: relative;
width: 120px;
height: 140px;
background-color: #272343;
}
.left-margin::after {
content: "ello";
background-color: red;
transform: translateX(100%); /* move element it's own size to the right */
}
.left-margin::after, /* style the after element just like the h1 */
.home-text-h1 {
position: absolute;
top: 30%;
right: 0px; /* place to the right */
margin: 0px;
font-size: 40px;
font-weight: bold;
}
<div>
<div class="left-margin">
<h1 class="home-text-h1">h</h1>
</div>
</div>
you can assign nagative margin to home-text-h1
<div style="background:blue;width:200px;padding:20px;">
<div className="left-margin" style="background:red;width:100px;">
<h1 className="home-text-h1" style="margin-left:-20px">hello</h1>
</div>
</div>
Replace your code with below.
You can add another separate div in HTML. here is an example.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.home-text-h1 {
position: relative;
top: 30%;
float: right;
font-size: 40px;
}
h1{
display:inline;
float: left;
}
.home-text-h1::after {
content: "ello";
background-color: red;
}
</style>
</head>
<body>
<div>
<div className="left-margin">
<h1 className="home-text-h1">h</h1>
</div>
<div className="left-margin">
<h1 className="home-text-h1">ello</h1>
</div>
</div>
</body>
</html>
.whiteDiv {
background-color: white;
float: left;
}
.blueDiv {
background-color: blue;
float: left;
}
<div>
<div class="blueDiv">
<h1>h</h1>
</div>
<div class="whiteDiv">
<h1>ello</h1>
</div>
</div>
You can use :first-letter.
div {
background: red;
}
div.container {
padding: 20px 0 20px 20px;
background: #c3c3c3;
width: 200px;
}
h1 {
position: relative;
font-size: 40px;
padding: 0;
margin: 0;
color: #000;
line-height: 1.1;
}
h1::first-letter {
background: #fff;
height: 100%;
}
<div class="container">
<div>
<h1>hello</h1>
</div>
</div>
I have a button in a div container for a scroll box with some profile info, and my goal is when you press the button the div appears (display: initial;), and when you press it again it disappears (display: none;) Any ideas?
Html:
<div>
<div class="scrollbar">
<input type="button" class="profile_info">Profile Picture
<div class="image_change">This is Blue</div>
</div>
</div>
Css:
div.scrollbar {
display: inline-block;
overflow: hidden;
background-color: #f1f1f1;
overflow: auto;
width: 250px;
height: auto;
max-height: 600px;
padding: 22px;
margin: 15px;
position: relative;
word-wrap: break-word;
}
.profile_info {
text-decoration: none;
color: Black;
cursor: pointer;
}
input.profile_info:focus {
color: Red;
}
input.profile_info:focus ~ .image_change {
display: block;
}
.image_change {
display: none;
position: relative;
height: 200px;
width: 200px;
background-color: Blue;
}
It sort of works if the "image_change" div is in the "scrollbar" div, but if you click away then it disappears.
Thanks!
Since selecting a parent element with CSS is not possible obviously its also not possible to select it's adjacent one....i would suggest the following approach using javascipt :
var image = document.getElementsByClassName('image_change')[0]
var input = document.querySelector('input')
input.addEventListener('click',function(e){
if(image.style.display == '') {
image.style.display = 'block'
} else {
image.style.display = ''
}
})
div.scrollbar {
display: inline-block;
overflow: hidden;
background-color: #f1f1f1;
overflow: auto;
width: 250px;
height: auto;
max-height: 600px;
padding: 22px;
margin: 15px;
position: relative;
word-wrap: break-word;
}
.profile_info {
text-decoration: none;
color: Black;
cursor: pointer;
}
input.profile_info:checked {
color: Red;
}
.image_change {
position: relative;
display : none;
height: 200px;
width: 200px;
background-color: Blue;
}
<div>
<div class="scrollbar">
<input type="checkbox" class="profile_info">Profile Picture
</div>
<div class="image_change">
This is a Blue div
</div>
</div>
I have a bourgeoning website http://rushycreekfarm.com.au/ with a central image that has two arrows either side to change slides. However, I'm not sure how to align the arrows vertically centre. The arrows have a container (in red) and the entire slideshow has a container (in blue). I would like the arrows to be half way up the blue container.
<!DOCTYPE html>
<html>
<head>
<title>Rushy Creek Farm</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="details" class="header">765 Brockman Highway | 0438695434 |
tracyrob#wallworks.com.au
</div>
<div class="title">
<h1>RUSHY CREEK FARM</h1>
</div>
<div class="nav-bar">
HOME
ABOUT
<a href="https://www.stayz.com.au/accommodation/wa/south-
west/augusta/9189326">BOOK</a>
CONTACT
</div>
<div class="slideshow">
<div class="arrow-container">
<img id="arrow-left" class="arrow" src="./arrow-left.jpg">
</div>
<img id="main-image" src="./images/droneshot.jpg">
<div class="arrow-container">
<img id="arrow-right" class="arrow" src="./arrow-right.jpg">
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
<html>
And here is the CSS:
.header {
font-family: garamond;
text-align: center;
height: 10px;
border-bottom: 1px solid rgb(220,220,220);
padding-bottom: 12px;
}
.title {
text-align: center;
letter-spacing: 2px;
}
body {
font-family: Georgia;
}
.nav-bar {
background-color: skyblue;
}
.nav-bar a {
cursor: pointer;
display: inline-block;
background-color: skyblue;
color: white;
text-decoration: none;
font-size: 25px;
padding: 16px 40px;
border-radius: 3px;
transition: 0.3s;
letter-spacing: 2px;
}
.nav-bar a:hover {
background-color: rgb(57,97,140);
}
.slideshow {
background-color: blue;
text-align: center;*/
}
#main-image {
display:inline-block;
width: 60%;
}
.arrow {
cursor: pointer;
display: inline-block;
background-color: gray;
transition: 0.3s;
}
#arrow-left {
float: right;
}
#arrow-right {
float: left;
}
.arrow-container {
background-color: red;
display: inline-block;
width: 19%;
}
.arrow:hover {
background-color: rgb(220,220,220);
}
You can use flexbox:
.slideshow {
display: flex;
align-items: center;
}
Since flexbox removes the space between the elements that display: inline-block adds, you can now use width: 20% for the arrow containers:
.arrow-container {
width: 20%;
}
You can use absolute positioning and a translation transform.
.slideshow {
background-color: blue;
position: relative; // new
text-align: center;
}
.arrow-container {
background-color: red;
display: inline-block;
position: absolute; // new
top: 50%; // new
transform: translateY(-50%); // new
width: 19%;
}
.arrow-container.left {
left: 0; // new
}
.arrow-container.right {
right: 0; // new
}
You can use absolute positioning to position the arrows vertically:
.arrow-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
In css for the links I can style the as before user clicks and after user clicks. But how can I do this for simple text or an object that when a user clicks that object then change its color.
For Example
<style>
.object:onmouseclick {
background-color:green;
padding:5px;
}
</style>
What we have to write in place of onmouseclick.
If you were styling a link you would use :active or :focus but as you're using this on a dom element, you would have to use jQuery to add a class to the clicked item and apply the style through that class...
$('.object').click(function() {
$(this).toggleClass('clicked');
});
.object {
background-color: green;
padding: 5px;
cursor: pointer;
width: 300px;
color: orange;
}
.object.clicked {
background-color: blue;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="object">
<h1>The Mutants Are Revolting</h1>
<p>Bender?! You stole the atom. That's the ONLY thing about being a slave. I am Singing Wind, Chief of the Martians. Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them.</p>
</div>
button:active or button:focus should do the trick.
a {
background-color: red;
}
a:active {
background-color: #efefef;
}
myButton
and optionally
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.object{
background:green;
padding:5px;
width: 300px;
height: 300px;
position: relative;
}
input{
display: none;
}
label{
display: block;
width: 300px;
height: 300px;
}
input:checked ~ label{
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
background: #00f url(http://www.pubzi.com/f/sm-chess-horse.png) no-repeat center center;
border: 1px solid #000;
}
<div class="object">
<input type="checkbox" id="c1" name="checkbox" />
<label for="c1"></label>
</div>
I am working on a project with a video player. I want to add play/pause and skip buttons together but one of the buttons is always invisible, however working. The codes I am using:
in .css file:
.buttons { position:absolute; top: 326px; left:150px; }
.buttons DIV { width: 26px; height: 20px; cursor: pointer; }
.buttons .pause { background-image: url("button_pause.png"); }
.buttons .play { background-image: url("button_play.png"); }
.buttons .skip { background-image: url("button_skip.png"); }
in html file:
<div class="buttons">
<div id="skip" onclick="skipCurrentSong();"></div>
<div id="playpause" onclick="setPlayPause();"></div>
</div>
the functions in js file work properly but the skip button is invisible. I have tried to create a different class in css file for the skip button and updated the html file accordingly but this gave the same output also. Can anyone say what mistake I am making and how to correct it?
Thanks in advance.
Some extra codes:
.css file:
#CHARSET "UTF-8";
BODY { height: 530px; overflow: hidden; }
#tv { width: 532px; height: 443px; background: url("tv.png") no-repeat; margin: 0 auto; margin-top: 20px; z-index: 3; position: relative; }
#title { color: #dddddd; text-align: right; float: right; margin-top: 320px; margin-right: 120px; }
.buttons { position:absolute; top: 326px; left:150px; }
.buttons DIV { width: 26px; height: 20px; cursor: pointer; background-color: white;}
.buttons .pause { background-image: url("button_pause.png"); }
.buttons .play { background-image: url("button_play.png"); }
.buttons .skip { background-image: url("button_skip.png"); }
FORM { display: block; margin: 0 auto; background: url("player.png"); height: 295px; width: 482px; clear: both; position: relative; top: -421px; margin-bottom: -295px; z-index: 4; }
FORM LABEL { color: #00aad4; margin-bottom: 10px; padding-top: 40px; }
FORM INPUT { border: none; border-bottom: 3px solid #00aad4; font-size: 24px; width: 200px; }
FORM * { display: block; margin: 0 auto; text-align: center; }
FORM .loader { margin-top: 10px; }
.loader { background: url("load.gif"); width: 16px; height: 16px; margin: 0 auto; visibility: hidden; }
.load .loader { visibility: visible; }
in html file:
<div id="tv">
<div id="title"></div>
<div class="buttons">
<div id="playpause" onclick="setPlayPause();"></div>
<div id="skip" onclick="skipCurrentSong();"></div>
</div>
</div>
Updated: This will give you three buttons. Do you want pause/play combined?
CSS:
.buttons { position:absolute; top: 326px; left:150px; }
.buttons div { width: 26px; height: 20px; cursor: pointer; background-color: white;}
.buttons #pause { background-image: url("button_pause.png"); }
.buttons #play { background-image: url("button_play.png"); }
.buttons #skip { background-image: url("button_skip.png"); }
HTML:
<div id="tv">
<div id="title"></div>
<div class="buttons">
<div id="play" onclick="setPlayPause();"></div>
<div id="pause" onclick="setPlayPause();"></div>
<div id="skip" onclick="skipCurrentSong();"></div>
</div>
</div>
I changed the .css code as:
.skipbutton { position:absolute; top:326px; left:120px; }
.skipbutton DIV { width: 26px; height: 20px; cursor: pointer; background-color: gray;}
.skipbutton .skip { background-image: url("button_skip.png"); }
.buttons { position:absolute; top: 326px; left:90px; }
.buttons DIV { width: 26px; height: 20px; cursor: pointer; }
.buttons .pause { background-image: url("button_pause.png"); }
.buttons .play { background-image: url("button_play.png"); }
and changed .html as:
<div id="tv">
<div id="title"></div>
<div class="skipbutton">
<div class="skip" onclick="skipCurrentSong();"></div>
</div>
<div class="buttons">
<div id="playpause" onclick="setPlayPause();"></div>
</div>
</div>
surpsiringly for skip button div class worked while for playpause button, div id works and div class just kills the button. It is a little awkward as the two buttons have the same structe in css file.
I tried to seperate the classes for two buttons earlier but this time it finally worked.
Thanks to lasseespeholt.