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">
Related
Example:
This is my simple HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<section id="left"> Put an image anywhere in this box.</section>
<section id="right"> </section>
<img id="tree" src="file:///home/john/Desktop/javascripts%20basics /ashtree.jpg">
</body>
<footer>
<script src="john.js"></script>
<link href="john.css" text="text/css" rel="stylesheets.css">
</footer>
</html>
This is my simple CSS document:
#left {
float: left;
width: 250px;
height: 250px;
margin: 5px;
border: 3px solid blue;
}
#right {
float: left;
width: 250px;
height: 250px;
margin: 5px;
border: 3px solid green;
}
The HTML loads in my firefox web-browser, but the css does not.I downloaded chromium as well and it doest work either. Ive checked many examples and I think I got it right. The question is...where do I look next to solve this problem. I have no clue where to start as I am not very educated with computers.
You weren't kidding around. You really are getting your ass kicked by stupid stuff.
It looks like you haven't linked in you stylesheet properly You need to link it in your <head> section - it won't work in the footer. Even if you moved what you have in your footer to your <head> it is malformed.
Take a look at this example:
<head>
<link rel="stylesheet" type="text/css" href="john.css">
</head>
I have my video-js player in a percentage width container, and it's finally resizing beautifully. However the controls are placed at the top of the video instead of the bottom, and the pause button will not work. Slider, volume, and fullscreen all work, but not pause. I've tried both 4.2 and 4.2.1 with no luck. If I use the version hosted here: "http://vjs.zencdn.net/c/video-js.css" the pause works, but the controls are still placed at the top.
I've tested this in both firefox and chrome with no luck.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://vjs.zencdn.net/4.2.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2.1/video.js"></script>
<script src="vidjs/z-skin.css" rel="stylesheet"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style type="text/css">
.BCLvideoWrapper {
position: relative;
padding-top: 0px;
padding-bottom: 56.25%;
height: 0;
}
* html .BCLvideoWrapper {
margin-bottom: 45px;
margin-top: 0;
width: 100%;
height: 100%;
}
.BCLvideoWrapper div,
.BCLvideoWrapper embed,
.BCLvideoWrapper object,
.BrightcoveExperience {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="indexvid">
<div class="BCLvideoWrapper">
<video id="QuickReel" class="video-js vjs-default-skin"
controls preload="auto" width="100%" height="auto" poster="images/reelthumbnail.jpg"
data-setup="{}">
<source src="media/reel.mp4" type='video/mp4' />
<source src="media/reel.webm" type='video/webm' />
</video>
</div><!--BCL--></div><!--indexvid-->
</body>
</html>
.BCLvideoWrapper div selects all divs that are descendants of .BCLvideoWrapper. As the video.js player consists of many divs (take a look in your browser's dev tools) this style has the unintended consequences you're seeing.
You should use .BCLvideoWrapper > div instead to match only divs that are (immediate) children of .BCLvideoWrapper, i.e. the div that video.js inserts in place of the original <video> element. The divs within that div won't match the rule.
.BCLvideoWrapper > div {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
Alternatively you could use .BCLvideoWrapper > .video-js to match just children with the .video-js class -- this would also match the unmodified <video> element in the event that javascript is disabled.
See this question for an expiation of the difference between child and descendant selectors
I am New to web-design. I have learned it by myself but its very hard for me to understand "CSS". I am trying to build a simple website were I want to insert image using CSS than using img tag but the image doesn't show up.
Its happening only with one image which has transparent background and 300px/300px.
My folder directory:
index.html
images (folder)
css (folder)
Above are the files I have in my project. And below is my code I have used.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>XYZ</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/reset.css" />
</head>
<body>
<header id="main">
<h1 >XYZ</h1>
</header>
<nav id="main-nav">
<ul>
<li>Home</li>
<li>How it works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Report bugs</li>
</ul>
</nav>
</body>
CSS
/** web-page default stylings **/
body {
background-color: #efefef;
line-height: 17px;
font-family: sans-serif;
}
a{
text-decoration: none;
}
/** content styling **/
#logo {
background: url(../images/logo.png) no-repeat;
}
http://jsfiddle.net/PJgCt/
#logo {
width: 300px;
height: 300px;
background: url('http://www.smiley-faces.org/wallpaper/smiley-face-wallpaper-widescreen-001.jpg');
background-size: 100% 100%;
}
I would recommend making the #logo a div by itself instead of calling it in the a tag. Also you can use the background-size attribute to fill up the full width/height. I provided a JS fiddle that should help you.
I hope this helps you, Good Luck!
You have to add a Width and Height to the block element (#logo) for it to display. Otherwise it's an empty container with a background image sitting at width: 0; height: 0; Also adding a display: block; to turn the tag into a block level element.
Again display block is key for my solution. http://jsfiddle.net/olwez/T5evL/
html.
css
#logo {
display: block;
width: 300px;
height: 300px;
background: url(../images/logo.png) no-repeat;
}
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.
even after many lines i've written in css and html, the css-behaviour still manages to surprise me - in a bad way.
I was putting together a sample site for a friend to show him how he could build his layout,
but Firefox 3.0.5 and IE8 create margins between my #header, #content, and #footer-divs out of nowhere. If i switch in IE7 Mode, the margins disappear.
CSS:
html, body {
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
}
#page {
background-image: url('bg_gradiant.png');
background-repeat: repeat-y;
width: 950px; /* 770px + 2 * 90px; */
margin: 0 auto;
padding-left: 90px;
}
#header {
width: 770px;
margin: 0;
padding: 0;
}
#header #row1 {
background-color: #9ab3ba;
height: 50px;
}
#header #row2 {
background-color: #517279;
height: 50px;
}
#content {
width: 770px;
background-color: #d7e9ed;
}
#footer {
background-color: #5eb6cc;
width: 770px;
height: 150px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<title>Test</title>
</head>
<body>
<div id="page">
<div id="header">
<div id="row1"></div>
<div id="row2"></div>
</div>
<div id="content">
<p style="height: 600px">Beware of the Content</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You can view this page here: https://codepen.io/lx-s/pen/eRrOpL
Browsing through the IE Developer Tools and Firebug showed me that they were no default-margin values set for these div's, but as one can see, they are there.
Hope you can give me a hint how to get rid of them - it's seriously driving me crazy.
Thanks in advance!
Add the following to your stylesheet:
* {
margin: 0;
}
It's not the DIV but the P tag that has the margin set by default. I tested setting it to 0 and the space disappeared.
The margins are on the p tag in the #content div
Hope this helps you a little
You need to use a reset css. You should do this on every Web page/site you develop. A good reset CSS will remove many of the default settings and make cross-browser look and feel much less painless.
There are several of these around such as Eric Meyer's or the Yahoo UI Reset CSS.
When I've seen this before, I've added a padding-bottom:1px to the bottom of the containing DIV so that I can keep the margins on the Paragraphs
Hope that helps