So I've took a project from codepen.io and modified it. But now I'm trying to add a background image and I can't display it... Here's my code:
body {
background-image: url("starwars.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
div.window {
color: white;
width: 500px;
padding: .42rem;
border-radius: 5px;
background: #26466D;
margin: 1rem;
text-align: center;
font-family: BlueHighway, Arial Black, sans-serif;
margin: 0 auto;
}
div.window label {
display: block;
background: #660b0b;
font-size: larger;
border-radius: 5px;
padding: .6rem;
transition: .4s all linear;
}
div.window label:hover {
cursor: pointer; background: #311;
}
input.toggle ~ div {
height: 0px; margin: .2rem;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div { height: 230px; }
input.toggle:checked + label { background: red; }
input.toggle { display: none; }
<div style="height: 240px; padding-top: 1.2rem">
<div class="window">
<input type="checkbox" id="punch" class="toggle">
<label for="punch">Use the Force, Luke.</label>
<div>
<img src="http://images.sequart.org/images/Star-Wars-still-use-the-force-luke-e1415132076759.jpg" style="max-width:100%;height:auto" alt="Ackbar">
</div>
</div>
</div>
If someone could find out why my background image is not displaying, that would be great!
Thanks.
I just tested your code and it works fine so I think what's happening is that the path of your background picture is wrong.
If your starwars image is not in the root folder with your html page then it cannot be url("starwars.jpg");. Check if you didn't put it in another folder or so.
Is the image "starwars.jpg" in the same folder as the .html file that is using it?
Related
I created a custom 'searchbox'. The 'searchbox' actually built by a div and input text inside it.
Later on I will add a 'search' icon on the left and 'clear' button on the right.
The issue is, the input inside the div already sized based on it's container and when I'm focusing the input text, I couldn't find a way to expand the parent div (instead of the input itself). It's important the div will expand so the icons and buttons I will later add - will expand with the input.
Couldn't find a way doing it with CSS only (without JS).
Will appreciate your assistance!
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.App {
width: 100%;
height: 200px;
background-color: tan;
}
.fieldcontainer {
display: flex;
padding-left: 8px;
background-color: #CCCCCC;
border-color: grey;
width: 300px;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-radius: 8px;
cursor: default;
transition: 'background-color' 0.4s;
}
.fieldcontainer:hover {
background-color: #C3C3C3;
}
.searchfield {
background-color: inherit;
font-size: 1em;
border: 0;
flex-grow: 8;
transition: all 0.4s linear;
}
.searchfield:focus {
outline: none;
width: 100%;
}
</style>
</head>
<body>
<div class="App">
<div class="fieldcontainer">
<input class="searchfield" type="text" placeholder="search" />
</div>
</div>
</body>
</html>
Use focus-within (https://developer.mozilla.org/fr/docs/Web/CSS/:focus-within)
* {
box-sizing: border-box;
}
.App {
height: 200px;
background-color: tan;
}
.fieldcontainer {
display: flex;
padding-left: 8px;
background-color: #CCCCCC;
border-color: grey;
width: 300px;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-radius: 8px;
cursor: default;
transition: 0.4s;
}
.fieldcontainer:hover {
background-color: #C3C3C3;
}
.searchfield {
background-color: inherit;
font-size: 1em;
border: 0;
flex-grow: 8;
transition: all 0.4s linear;
outline:none;
}
.fieldcontainer:focus-within {
width: 100%;
}
<div class="App">
<div class="fieldcontainer">
<input class="searchfield" type="text" placeholder="search" />
</div>
</div>
I am very new to CSS as I just started learning it. I've been trying to develop a website as creating a product is the best way for me to learn.
I've created a button that works okay but when hovered the icon pops under the button for a second and then comes back up. I would like to fix that but I'm not sure how.
I've written this;
.sidebar-wrapper {
height: 83%;
width: 110px;
position: absolute;
}
.sidebar-btn {
background-color: rgb(33, 33, 33, 0.5);
height: 8%;
margin-bottom: 35%;
animation: 1s ease-out 0s 1 slideInFromLeft;
width: 110px;
transition: width 0.5s ease;
}
.sidebar-btn img {
float: left;
margin-left: 25px;
margin-top: 8px;
width: 50px;
}
.sidebar-btn label {
font-family: 'Monoton', cursive;
text-align: center;
color: white;
line-height: 60px;
display: none;
font-size: 19;
}
.sidebar-btn:hover {
width: 250px;
}
.sidebar-btn:hover label {
display: inline;
}
.sidebar-clr {
width: 7px;
height: 100%;
float: right;
}
<div class="sidebar-wrapper">
<div class="sidebar-btn">
<label> Profile </label>
<div class="sidebar-clr bg-blue"></div>
<img class="sidebar-img" src="http://via.placeholder.com/50x50/ff0000" />
</div>
</div>
Move your label to after your image, as all the inline styling and scaling means that as it display the label, the image gets pushed out of the way (because it is after your label) and then things snap again when they recalculate themselves the next draw frame. But I think in general there should be better ways to do this, but I am unsure what you are trying to accomplish - the label doesn't actually display in your snippet, it just turns itself to display as block, but the area remains empty, so... Pretty sure a mix of absolute and relative positioning or flexbox, or background-size transition woudl probably work better for your purpose, but I can't say.
.sidebar-wrapper {
height: 83%;
width: 110px;
position: absolute;
}
.sidebar-btn {
background-color: rgb(33, 33, 33, 0.5);
height: 8%;
margin-bottom: 35%;
animation: 1s ease-out 0s 1 slideInFromLeft;
width: 110px;
transition: width 0.5s ease;
}
.sidebar-btn img {
float: left;
margin-left: 25px;
margin-top: 8px;
width: 50px;
}
.sidebar-btn label {
font-family: 'Monoton', cursive;
text-align: center;
color: white;
line-height: 60px;
display: none;
font-size: 19;
}
.sidebar-btn:hover {
width: 250px;
}
.sidebar-btn:hover label {
display: inline;
}
.sidebar-clr {
width: 7px;
height: 100%;
float: right;
}
<div class="sidebar-wrapper">
<div class="sidebar-btn">
<img class="sidebar-img" src="http://via.placeholder.com/50x50/ff0000" />
<label> Profile </label>
<div class="sidebar-clr bg-blue"></div>
</div>
</div>
So I want to be able to have a link which when hovered, display an image..
So far, I only found tutorial to change an image while it's hovered..
How should I do that please ?
BTW : I'm a total beginner in HTML..
Thanks !
Use adjacent sibling selector and the display property.
img {
display: none;
}
a:hover + img {
display: block;
}
<a href='http://example.com'>Hover Here</a>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' width='200'>
jQuery for life.
$('.link').mouseover(function() {
$('.dog').show();
}).mouseleave(function() {
$('.dog').hide();
})
#import url('https://fonts.googleapis.com/css?family=Raleway');
.link {
height: 40px;
width: 200px;
border: 1px solid black;
text-align: center;
border-radius: 5px;
margin-bottom: 10px;
}
a {
text-decoration: none;
color: black;
font-size: 30px;
font-family: Raleway;
}
.dog {
background: url('https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg');
height: 150px;
width: 150px;
background-size: cover;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='link'>
<a href='http://www.google.com'>Hover me</a>
</div>
<div class='dog'>
</div>
Indeed there is couple ways to achieve what you want. probably if you are a beginner in html and css, the best for you is to use zer00ne snippet. Hovever, if you want to dig deeper I also have the following solution for you:
You can test it here
https://jsbin.com/barixeqigi/17/edit?html,css,js,output
HTML
<a href="#" title="super eye" alt="super eye">
hover
</a>
CSS
a {
position:relative;
}
a:after {
content:'';
display:block;
width: 200px;
height: 200px;
opacity:0;
background: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg') no-repeat center;
background-size: cover;
border-radius:50%;
position:absolute:
right:0px;
top:0px;
-webkit-transition: all 3s;
transition: all 3s;
}
a:hover:after {
opacity: 100;
}
Im im trying to create custom checkboxes in GWT using only CSS
So far i was able to style checkboxes that DO NOT have text near them.
However checkboxes with text are looking messy
Current state:
Desired behaviour:
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
HTML
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline-block;
width: 16px;
height: 16px;
background: url(images/custom_html_elements_sprite.png) 0 0;
}
input[type="checkbox"]:checked+label {
display: inline-block;
width: 16px;
height: 16px;
background: url(images/custom_html_elements_sprite.png) -64px 0;
}
CSS
Any help would be appreciated
EDIT:
fiddle provided
https://jsfiddle.net/2j0zke2z/
It solves all problems: (you can set higher padding if you want)
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline;
width: 16px;
height: 16px;
padding:0 0 0 16px;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif);
background-repeat: no-repeat;
}
input[type="checkbox"]:checked+label {
display: inline;
width: 16px;
height: 16px;
padding:0 0 0 16px;
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif);
background-repeat: no-repeat;
}
This is what you are looking for, just change images, cus I took some by default:
span {
margin-right: 10px;
}
input[type="checkbox"] +
label span {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAAUVBMVEX///8zMzMwMDBEREQqKiotLS3s7OwnJydcXFxJSUkkJCRDQ0P19fVhYWGZmZnd3d1VVVWvr684ODjFxcWKiopvb2+7u7t1dXX5+flpaWnW1ta78F6SAAABiElEQVRoge2ay5aDIBBEG3kp+EDxmf//0JkMYJwzZpERe9W1Mwtuym6OiyqAg2rlx8lZdlHWTaNXNZxLzctghCyuUhgrpDDDMqszyjxJkQGxo4Sc5j+QdRtkPkaQHLb1N+XBdUYnSYXmjyPFV9mtBMnKH7xU4vgfLutwmKh2PyvfvUihDbP8kiwzWrxO5Gk+m04/sabt3qz7R+rahiWQ3uImD9GlcP27O/Wx6t7FQRTDz16rKXJ1mcVJUlfGlySn5z2dI0WUp7f2/1Jl9CO/7dRLeJAuq5enOhcciKUGlSbT56YA9Gk6CrwJZpps03+pboId42EM70y0+SkAbTx8hLhnOvtknup03DVwYTTmDgpAmEjhIHwrC3YPhgUTFuIy2HswNq5xwvB7MJwwhCEMYQhDGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxjCEAYPc3ewghQTIYVeSBEeUiCJFK8ihcVI0TdSkI9VS0AqWWBVRrAKMEh1HqxyElbVCqs4Bkg1OMAq9cGdFcUvpGkd5VrzEsoAAAAASUVORK5CYII=');
background-size: 20px;
height: 17px;
width: 17px;
display: inline-block;
vertical-align: middle;
margin-top: -5px;
}
input[type="checkbox"]:checked + label span {
background: transparent;
}
input[type="checkbox"]:checked + label span::before {
content: "";
background-image: url('https://cdn4.iconfinder.com/data/icons/customicondesignoffice2/128/success.png');
background-size: 20px;
height: 17px;
width: 17px;
display: inline-block;
}
input[type="checkbox"] {
display: none;
}
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3"><span></span>Run task immediately after finish</label>
CSS :
input[type="checkbox"]+label {
display: inline-block;
width: auto;
height: 16px;
background: url(images/custom_html_elements_sprite.png) 0 0;
}
input[type="checkbox"]:checked+label {
display: inline-block;
width: auto;
height: 16px;
background: url(images/custom_html_elements_sprite.png) -64px 0;
}
Does you really want width of 16px only, If you keep it auto it will solve your problem.
Please check this fiddle Link provided here.
Text has been wrapped due to specified width.
Just remove the width and add padding-left as necessary. Also include no-repeat to your background image. Updated fiddle
Note: You can resize the background image using background-size
Snippet
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
cursor: pointer;
padding-left: 20px;
display: inline-block;
height: 16px;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) no-repeat;
}
input[type="checkbox"]:checked+label {
padding-left: 20px;
display: inline-block;
height: 16px;
/* background: transparent; */
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) no-repeat;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
Add Padding-left:20px to your label and remove the width and height form label. Also include no-repeat to your background image.
input[type="checkbox"]+label {
display: inline-block;
background: url(images/custom_html_elements_sprite.png) 0 0 no-repeat;
padding-left:20px;
}
input[type="checkbox"]:checked+label {
display: inline-block;
background: url(images/custom_html_elements_sprite.png) -64px 0 no-repeat;
}
Updated fiddle : https://jsfiddle.net/2j0zke2z/2/
Edited :
is this you want?
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]+label {
display: inline-block;
background: url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/ok_16x16.gif) 0 0;
background-repeat:no-repeat;
padding-left:25px;
}
input[type="checkbox"]:checked+label {
display: inline-block;
background: url(http://orig03.deviantart.net/9b11/f/2008/101/c/5/war_skull_16x16__by_xicidal.gif) 0px 0px;
background-repeat:no-repeat;
padding-left:25px;
}
<span class="gwt-CheckBox" id="i294">
<input tabindex="0" id="gwt-uid-3" type="checkbox" value="on">
<label for="gwt-uid-3">Run task immediately after finish</label>
</span>
I want:
block
block1 block2 block2
where
block ="head"
block1="h1"
block2="search box"
block3="itembox"
I want to put them in side by side..
I have tried below code in jsfiddle:
jsfiddle
but here these blocks not coming in same line.
don't use head tag use header for that
try this
#search {
display: inline-block;
}
http://jsfiddle.net/dm8044a8/2/
The element can include a title for the document, scripts, styles, meta information, and more.Head is not used inside inside BODY.
Use header instead tag.
I don't understand <itembox> tag. Are u using any framework?. I think you want some thing like this. Please change the width value as per your requirement.
header {
background: #fff;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 2px solid #7e7e7e;
z-index: 100;
display:flex;
}
header h1{
color: #ff0;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
text-align:center;
flex-direction: column;
}
#search {
float: left;
width: auto;
height: 40px;
flex-direction: column;
}
.itembox {
float: left;
background:green;
flex-direction: column;
}
#search input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
color: #7F7F7F;
float: left;
font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
height: 20px;
margin: 0;
padding: 10px;
transition: background 0.3s ease-in-out 0s;
width: 300px;
}
#search button {
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 40px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 40px;
border: 2px solid #fff;
}
#search button:hover {
background-color:#000;
}
<header>
<h1>news </h1>
<div id="search">
<form method="post" id="search" action="#">
<input type="text" class="search" value="Type and hit enter" onblur="if(this.value == '') { this.value = 'Type and hit enter'; }" onfocus="if(this.value == 'Type and hit enter') { this.value = ''; }" name="s">
<button type="submit" style="display:inline-block;">Submit</button>
</form>
<div class="itembox">Item box</div>
</div>
</header>