I'm trying to change a text link on my site to an image using css...need some help please. Below you will see my css - I would like to change my favorite text http://cl.ly/0S2j28082G2W423Y2T00 to an image.
a.upb_add_bookmark {
background: none repeat scroll 0 0 #E8BD61;
border-color: #C79324;
border-style: solid;
border-width: 1px;
color: black;
padding: 2px 5px;
text-decoration: none;
}
Your background property will need to be set to include the image. You will also need to set the <a> element as an inline-block so that you can declare a height and width for it.
a.upb_add_bookmark {
background: url('favorites-image.jpg') no-repeat;
display: inline-block;
height: 51px;
width: 92px;
}
Thats how you can display an image without actually using an <img> tag; nothing but css.
<img src="image.png" alt="Favorite icon" />
or
a {
background-image: url('image.png');
background-repeat: no-repeat;
display: inline-block;
height: 50px;
width: 150px;
}
Personally I would use the first one because the image is part of the structure and not a design element and CSS deals with design.
A very simple way to fix this problem
** 1. Create a div element that will encapsulate this image **
** 2. Add CSS in order to set that background of this div to be the image. (See code below). In this example the class name of your div will be called 'button'
.button
{
backgroundimage:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
Revise the Html *
Put the text you want to display into the aforementioned div with the class name 'button'
<div class="button">
<span>Favorite (1)</span>
</div>
* This will allow you to select the actual text while still maintaning the background *
Here is the complete version source with my modification for your reference.
<!DOCTYPE html>
<html class="no-js" dir="ltr" lang="en">
<head>
<style>
.button
{
background-image:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
</style>
<title>Screen Shot 2012-02-09 at 12.02.45 PM.png</title>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no" name="viewport">
<meta content="CloudApp" name="author">
<link href="http://assets.cld.me/1325250420/images/favicon.ico" rel="shortcut icon">
<!--[if (!IE)|(gte IE 8)]><!-->
<link href="http://assets.cld.me/1325250420/assets/viso-datauri.css" media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]>
<link href="http://assets.cld.me/1325250420/assets/viso.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="http://assets.cld.me/1325250420/assets/viso.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="http://assets.cld.me/1325250420/assets/ie.js" type="text/javascript"></script>
<![endif]-->
</head>
<body id="image">
<header id="header">
<h1>Simple sharing</h1>
<h2>Screen Shot 2012-02-09 at 12.02.45 PM.png</h2>
<a class="embed" href="http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png">Direct link</a>
</header>
<section id="content">
<div class="button">
<span>Favorite (1)</span>
</div>
</section>
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4ea557ec613f5d39e7000002');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>
a.upb_add_bookmark {
background: url('image.png') no-repeat;
border:none;
width: 92px;
height: 51px;
color: transparent;
padding: 2px 5px;
}
This code works for me
Related
I was creating a website based on a video as a background for the homepage I came across a problem, I don't know what the problem is but I followed an online tutorial and it seems that the video that I was willing to put in my website has shown up but does not play and is way too big even when viewed at full screen.
here's the code:
<html>
<head>
<!-- settings -->
<title> Prestige</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" conetent="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="Intro.mp4" autoplay="true" loop="true"></video>
</div>
</header>
</body>
If you mean the video is too big for your page->
You can resize the video by using width and height attribute.
for example:
<video src="Sample.mp4" width="320" height="240">
If you mean the video is too big in terms of memory->
try to compress the video or embed using embed tag. You can also try to update to the latest version of your browser.
You can try to upload your code in a code snippet to replicate it and see if there's a problem with your code.
You can try this code:
HTML
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum...</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
CSS:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style the button used to pause/play the video */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
JS
<script>
// Get the video
var video = document.getElementById("myVideo");
// Get the button
var btn = document.getElementById("myBtn");
// Pause and play the video, and change the button text
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
Also you can check this here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>erjan_vue</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div id="erjan_vue_1">
<h1>events tutorial</h1>
<div id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
<script src = "main.js"></script>
</body>
</html>
But it's only visible when I change it in inspect chrome mode. I can change its bg color and see it:
Actual styles.css not working:
#canvas{
padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;
}
taken from the tutorial here
The tutorial I m following was written a year ago(april 2017) and has no actual app.vue file which should have 3 things:
<template>
<script>
<styles>
Now this "styles" is where css stuff should go to.
I followed the advice of Sazzad Hosan from the comments above and just added a very ugly inline style:
<div style="padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;" id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
And it worked, like Sazzad said - "inline styles" take precedence over others.
this is my first posting here and I am new to CSS. I am trying to get a sprite of Mario with dimensions of 32 x 16. When I open the html file nothing appears. I try to inspect element the html but I cannot see a div.
CSS
#stillMario {
width: 16px;
height: 32px;
margin: auto;
background-image: url("sprites/still.png");
position:absolute;
left: 0px;
top: 0px;
bottom:0px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Super Mario</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="stillMario"></div>
<script src="myjs.js"></script>
</body>
</html>
If you are sure that the folder 'sprites' is in the root of your project, then try prefixing it with '../', then try without the absolute positioning first. If it works, then return the positioning again as follows;
#stillMario {
width: 16px;
height: 32px;
margin: auto;
background-image: url("../sprites/still.png");
//position:absolute;
//left: 0px;
//top: 0px;
//bottom:0px;
}
Let me know if it works
Use <img> element instead of setting the background of the <div>.
Example: <img src=""sprites/still.png"" alt="Mario" height="32" width="16">
like i said in the title, I'm trying to match the menu header, which is a picture, on top of an ul that has a matching background picture with the menu header. No matter what i tried, there is still a gap between the header and the ul. Sorry if i sound confusing, here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
margin: 0;
padding: 10px 0px 25px 45px;
background:url(ul.png) no-repeat 0 100%;
list-style-image:url(li.png);
}
table td {
display: table-cell;
vertical-align: top;
}
ul li a:hover{
color: red;
padding-left: 10px;
}
img {
position: relative;
}
</style>
</head>
<body>
<table width="313" border="0">
<tr>
<td width="303" height="257"><img src="h3.png" width="224" height="35" alt=""/><ul>
<li>Future</li>
<li>Health</li>
<li>Life</li>
<li>Money</li>
<li>Personal</li>
<li>Phobias</li>
</ul></td>
</tr>
</table>
</body>
</html>
To avoid all of those "gaps problems", think about including the reset.css stylesheet made by Eric A.
You can grab it here --> http://meyerweb.com/eric/tools/css/reset/reset.css
Include it before your <style> by writing :
<link rel="stylesheet" type="text/css" media="screen" href="YOUR_PATH/css/reset.css" />
Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.