I am currently having some img's set to height:0px;, and when its ID gets in :target its height increases to a optimal value.
As you can see i can only have one img visible at a time, because when one of them is in target the other one returns to height:0px;
Is it possible to make the :target properties act more like a toggle, so that i can have more img's visible at a time?
I then think that i would need a :target to make them height:0px; again.
Example code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
img{
height:0px;
}
:target{
height:200px;
}
</style>
</head>
<body>
img1
img2
img3
<img id="img1">
<img id="img2">
<img id="img3">
</body>
</html>
Thanks
Related
I have a structure like this:
<body>
<div id="root">
<div>
<div>Not tis one</div>
<script>something</script>
<div>THIS DIV</div>
</div>
</div>
</body>
Somehow script + div didn't work for me, possibly due to some extensions that I have or a similar reason.
I'm trying to give uBlock Origin a target for a "One more story" or whatever overlay at the bottom of the page over here.
You can use either nth-child or last-child depending on whether your code structure changes.
And if you want to make sure it's not too generic, you can specify the parent elements. With the HTML that you have, the CSS could look something like this:
#root div div:last-child {
color: red;
}
Quick Example:
#root div div:last-child {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root">
<div>
<div>Not this one</div>
<script>something</script>
<div>THIS DIV</div>
</div>
</div>
</body>
</html>
I'm using grunticon to add svg's.
Everything working but I'm struggling to style the svg's with css.
I simple want to chnage the fill color of the svg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.icon-heart{
background: red;
}
.icon-heart{
fill: red;
}
</style>
<title>Title of the document</title>
<script>
/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon(["images/output/icons.data.svg.css", "images/output/icons.data.png.css", "images/output/icons.fallback.css"]);
</script>
<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
</head>
<body>
<div class="icon-heart-1" style="height: 50px; width: 50px;"></div>
<div class="icon-heart" style="height: 50px; width: 50px;"></div>
</body>
</html>
You need to ensure that the svg's you are using do not have the fill="{color}" or style="fill:{color}" hardcoded in them as these will override any css style you apply.
I think you will have to do this by manually updating the svg unless there is a grunt way to do it.
To change the style attributes via css, you need to embed the svg into the dom. Grunticon (above v2.0) offers a easy way to do this.
You need to enable the enhanceSVG option in your gruntfile and then you can use the data-grunticon-embed attribute on your div to embed it.
Look at their documentation for more information
https://github.com/filamentgroup/grunticon#version-20-is-out---heres-whats-new
I have 3 webpages. The first is called inventorshome, second PythonTutorialHome, third HTMLTutorialHome. The second and third look the same in the browser. Notice that the code is exactly the same for the pages. They should look exactly the same by that logic. For some reason, the div is larger for inventorshome than in PythonTutorialHome and HTMLTutorialHome. I am using Google Chrome browser, and they are files on my computer.
Here is the code for inventorshome:
<!DOCTYPE html>
<head>
<title>Home</title>
<base href="file:///C:/Users/David/Documents/Website/Pages/">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/David/Documents/Website/Pages/inventorshomestyles.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
Here is the code for PythonTutorialHome:
<!DOCTYPE html>
<head>
<title>Home</title>
<base href="file:///C:/Users/David/Documents/Website/Pages/">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/David/Documents/Website/Pages/inventorshomestyles.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
The CSS linked to these webpages is:
#header {
position:absolute;
left:0px;
top:0px;
background-color:#8AC007;
width:100px;
height:30px;
}
When I change the width and height to percentages, they are the same across all three pages. When the dimensions to pixels, different results are yielded. What is going on here?
ive been watching a tutorial that has told me to change the background color of a webpage by using:
body {background-color:red;}
however when i try and load the page in google chrome the background remains white?
This is my full code:
<!doctype html>
<html> <!--Document START-->
<head> <!--Head START-->
<title>Page Title</title>
<style type="text/css"> <!--CSS START-->
body { background-color:red }
</style>
</head>
<body> <!--Body START-->
<h1>Page Title</h1>
</body>
</html>
The problem is you have an html comment within your css.
<style type="text/css"> <!--CSS START-->
Remove the <!--CSS START--> and it will work fine.
If you want to add comments within css then you can use /* */, e.g:
<style type="text/css">
/* CSS START */
This works for you.
body {
background:red;
}
Ahhh yes, the problem is you have a html comment in the css, so it will not work after: –
Should be:
body { background-color:red; }
(You forgot the ; after "red")
I am trying to set background image using background-image:url but its not working.
<!doctype html>
<html>
<head>
<title>MyTitle</title>
<style type="text/css">
body{
<!-- background-color:green; -->
background-image:url("background.jpg");
<!-- color:white; -->
}
</style>
</head>
<body>
</body>
</html>
Pls Help!!
<!-- comment -->
is not valid comment syntax within a CSS block. That is probably breaking your CSS rule.
Try
/* comment */
The tag doesn't nest into the tag.
Try
<!doctype html>
<html>
<style type="text/css">
body{
/* background-color:green; */
background-image:url("background.jpg");
/* color:white; */
}
</style>
<head>
<title>MyTitle</title>
</head>
<body>
</body>
</html>
And comments in CSS are defined like...
/*this is a comment*/