It is very simple to do rollover images in CS5 using the built in Javascript, however, I need to do this CSS based.
I've managed to get the code working and the sprites are all wonderful but I seem to have a problem...I need to make these clickable (pointing) to a URL. Ive tried every method including a <a href> url in the div line. I tried even placing the url with an image. I do not want to have to start all over using the <li> method as Ive seen everywhere else. I cannot even get that to work...so in short is there anyway (simple) way to make the sprite point to a url...thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<body>
<style type="text/css">
.sprites {
background-image : url(http://sheldontechnology.com/social/facebooksprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#facebooksprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
padding-left:10px;
float: left;
}
#facebooksprite:hover {
background-position : -0px 0px;
}
.sprites2 {
background-image : url(http://sheldontechnology.com/social/twittersprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#twittersprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#twittersprite:hover {
background-position : -0px 0px;
}
.sprites3 {
background-image : url(http://sheldontechnology.com/social/flickrsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#flickrsprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#flickrsprite:hover {
background-position : -0px 0px;
}
.sprites4 {
background-image : url(http://sheldontechnology.com/social/youtubesprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#youtubesprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#youtubesprite:hover {
background-position : -0px 0px;
}
.sprites5 {
background-image : url(http://sheldontechnology.com/social/tumblrsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#tumblrsprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#tumblrsprite:hover {
background-position : -0px 0px;
}
.sprites6 {
background-image : url(http://sheldontechnology.com/social/bloggersprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#bloggersprite {
height : 75px;
width : 100px;
background-position : -0px -75px;
float:left;
}
#bloggersprite:hover {
background-position : -0px 0px;
}
.sprites7 {
background-image : url(http://sheldontechnology.com/social/googleplacessprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#googleplacessprite {
height : 73px;
width : 94px;
background-position : -0px -73px;
float:left;
}
#googleplacessprite:hover {
background-position : -0px 0px;
}
.sprites8 {
background-image : url(http://sheldontechnology.com/social/yelpsprite.png);
background-color : transparent;
background-repeat : no-repeat;
}
#yelpsprite {
height : 75px;
width : 97px;
background-position : -0px -75px;
float:left;
}
#yelpsprite:hover {
background-position : -0px 0px;
</style>
<div class="sprites" id="facebooksprite"></div>
<div class="sprites2" id="twittersprite"></div>
<div class="sprites3" id="flickrsprite"></div>
<div class="sprites4" id="youtubesprite"></div>
<div class="sprites5" id="tumblrsprite"></div>
<div class="sprites6" id="bloggersprite"></div>
<div class="sprites7" id="googleplacessprite"></div>
<div class="sprites8" id="yelpsprite"></div>
</body>
</html>
Instead of div elements use links - a with appropriate href attribute pointing to your destinations.
Related
I have a webview in my UWP application, that shows some text. Some of the text is clickable (). I have tried adding the following CSS and including that in the HTML, but it does not seem to work.
a:hover {
color: red;
}
Does webview support hover in a UWP application? I have been unable to find any information regarding this.
EDIT:
Here is the HTML.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<style>
body {
font-family: 'Segoe UI';
font-size: 10pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #FFFFFF;
}
.link:hover {
background-color: red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
</head>
<body>
<a class='link'>
<div>
<div class='linenumber'>1</div>
Alpha
</div>
</a>
<a class='link'>
<div>
<div class='linenumber'>2</div>
Beta
</div>
</a>
<script type='text/javascript'>
for (var i = 0; i < document.links.length; i++) {
document.links[i].onclick = function() {
window.external.notify(this.href);
return false;
}
}
</script>
</body>
</html>
}
UWP Webview: CSS :hover support?
UWP Webview support css :hover tag, you could place style in the html like the following. and load html with ms-appx-web uri scheme.
Html
<!DOCTYPE html>
<style>
a:hover{
color:red;
}
</style>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello Html</title>
</head>
<body>
<a href="https://www.google.com" >Click Me</a>
</body>
</html>
Xaml
<Grid>
<WebView Source="ms-appx-web:///TestPage.html"/>
</Grid>
Update
<style>
body {
font-family: 'Segoe UI';
font-size: 18pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #000000;
}
.link:hover{
color:red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
i'm trying to make media query in pixate freestyle.
i'm handling the position in landscape and portrait but it's still the same position..
this is my code
.btn-green {
color : .blackColor;
border-width : 5px;
border-color : #84a254;
border-style : solid;
border-radius : 10px;
font-size : .fontSize;
top : 200px;
width : 100px;
height : 100px;
}
#media (orientation:landscape){
.btn-green {
left: 200px;
background-color: #666666;
}
}
#media (orientation:portrait){
.btn-green {
left: 10px;
background-color: #000000;
}
}
you have to specify the landscape & portrait width like below.
#media only screen and (device-width : 1024px) {.... write your css...}
Do I have to add some link or file to get media queries to work. When I try to use a media query inline in a .cshtml file I get a red line under '#media' that says "cannot resolve symbol media". This is in a asp.net mvc project. When I move the media query to it's own .css file it works fine. Are media queries not allowed inline in a asp mvc project?
Here is what solved it.
##media only screen and (max-width:768px) {
/* only size 'xs' and below */
.searchResults {
height: 100%;
}
I added two # symbols.
I got it to work by putting the media query into a .css file. When it was inline in the .cshtml file it didn't work. Code below
<style>
html,body,.container-fluid,.row {
height: 100%;
}
.row > div {
height: 100%;
}
.row .col-md-5 {
background-color: #eee;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
.row .col-md-7 {
background-color: #ddd;
top: 51px;
/*border: 1px solid black;*/
height: calc(100% - 51px);
padding-left: 0;
padding-right: 0;
}
#googleResultMap {
width: 100%;
height: 100%;
/*border: 1px solid black;*/
}
.searchFilter {
/*width:200px;*/
height: 20%;
border: 1px solid blue;
}
.searchResults {
height: 80%;
border: 1px solid green;
overflow-y: scroll
}
input[readonly].default-cursor {
cursor: default;
}
#media only screen and (max-width : 768px) { // does not work
/* only size 'xs' and below */
.searchResults {
height: 100%;
}
}
</style>
<link href="~/Content/MediaQueries.css" rel="stylesheet" /> //works
What you have done is that you not specified the media rule
your code should be something like
#media screen and (max-width: 300px) { ... }
Edited:
At the top of your webpage add this line of the code in the <head> tag
<meta name="viewport" content="width=device-width, scale=1.0" />
Then in the style defination:
#media screen and (max-width: 768px) {
.searchFilter {
height:100%;
}
}
So I'm trying to make a website with two different links- however, the CSS that I'm editing them with recognizes them both as "a" and puts them in the same spot. This is aggervating, I've tried basing the css off of the they're in, but that doesn't seem to be working. Here's my code:
<html>
<h1>
<div id = "firstbutton">
GOOGLE
<style type="text/css">
a {
color: rgb(255,255,255);
font-size: 60;
font-family: Arial;
text-decoration: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -145px;
}
</style>
</div>
<div id = "forumbutton">
Forum
<style type="text/css">
a{
color: rgb(255,255,255);
font-size: 30;
font-family: Calibri;
position: fixed;
text-decoration: none;
top: 50%;
left: 50%;
margin-top: 260px;
margin-left: -45px;
}
</style>
</div>
</h1>
<body>
<audio src="goingdown.mp3" autoplay></audio>
<style type="text/css">
body {
background-image: url('spacewallpaper.jpg');
}
</style>
</body>
</html>
Set ID for each a element
Then css should look like:
a#name1{ ... }
a#name2{ ... }
This is where classes come in handy. You should add a class attribute to each a and define your CSS with that class. Or you could use an ID.
Styles can get overridden with multiple style blocks or declarations. It doesn't apply the the closest tag.
Here is your fixed code
JS Fiddle - Working
.GClass a {
color: rgb(255,255,255);
font-size: 60;
font-family: Arial;
text-decoration: none;
position: fixed;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -145px;
}
.FClass a{
color: rgb(255,255,255);
font-size: 30;
font-family: Calibri;
position: fixed;
text-decoration: none;
top: 50%;
left: 50%;
margin-top: 260px;
margin-left: -45px;
}
<html>
<h1>
<div id = "firstbutton">
GOOGLE
</div>
<div id = "forumbutton">
Forum
</div>
</h1>
<body>
<audio src="goingdown.mp3" autoplay></audio>
<style type="text/css">
body {
background-image: url('spacewallpaper.jpg');
}
</style>
</body>
</html>
You should set and ID for each element you are trying to add (implement), then you can call that element easily inside the CSS.
Also Element div cannot be nested inside element h1!
The font-size should be marked in pixels. Example font-size: 30px;.
The structure of your document is slightly scattered...
it is better to put all your styles in the head section an not scattered through the body section
<html>
<head>
<style type="text/css">
body
{
background-image: url('spacewallpaper.jpg');
}
a
{
color: #FFFFFF;
text-decoration: none;
top: 50%;
left: 50%;
}
.FirstLink
{
font-size: 60;
font-family: Arial;
position: fixed;
margin-top: -85px;
margin-left: -145px;
}
.SecondLink
{
font-size: 30;
font-family: Calibri;
position: fixed;
margin-top: 260px;
margin-left: -45px;
}
</style>
</head>
<body>
<h1>
<div id = "firstbutton">
<a class="FirstLink" href="http://google.com">GOOGLE</a>
</div>
<div id = "forumbutton">
<a class="SecondLink" href="http://www.google.com">Forum</a>
</div>
</h1>
<audio src="goingdown.mp3" autoplay></audio>
</body>
</html>
Try the code above and compare it to your own for reference to see the differences. Good luck.
I have done some absolute positioning with css. But in the following case, why in the firstBox , the top and left values are ignored? (I want top at 100 px and left at 100px). The Second box is pisitioned correctly.
<html>
<head>
<title>Testing</title>
<style type="text/css">
#firstBox {
color: white;
width: 500px;
padding: 1em;
background: red;
position::absolute;
top:100px;
left:100px;
z-index:2;
}
#secondBox {
color: white;
width: 500px;
padding: 1em;
background: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 0;
}
</style>
</head>
<body>
<div id="firstBox"> The First Box! </div>
<div id="secondBox"> The Second Box! </div>
</body>
</html>
It is because you are using 2 colons for position: absolute; for #firstBox
My Fiddle