HTML CODE:
(Image is present in the right directory)
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Sample Header</h1>
</header>
<main>
<article>
<h2>Sample Header 2</h2>
<p>Sample Paragraph 1</p>
<p>Sample Paragraph 2</p>
</article>
</main>
</body>
CSS CODE:
html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
background-image does not work in the above form,but when the same css-code is included in style tag,background-image works perfectly fine,why not in external stylesheet?
I think this is a path issue for the background-image: url(...). I can't reproduce at the moment because of lacking information but please be aware of your folder structure. When you use <style> for CSS the starting point for the relative path is your root folder (or where the HTML is located).
In case of the style.css the starting point is the folder styles. So mind that in that case the path might have to change. You can use the Firefox developer tools or Chrome developer tools to modify your path on the fly. This way you can easily find out yourself where the issue with the path originates or if the background-image rule was applied properly on your element.
Updated: added links to developer tools (Mozilla, Google)
I am doing a proof-of-concept to see if ZingCharts is a viable solution in our web application. I am trying to create a simple stacked bar chart. Everything works fine in my example until I add a title to my style tag, title="mystyle". I am using the title in the style tag as this models the situation in our full-blown application where we include a number of css files all titled with our custom page style.
Here is my example code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello ZingChart World</title>
<style title="mystyle">
.h1 {
margin: 0 0 1px 0;
padding: 5px 7px 7px 7px;
font-size: 11px;
font-weight: bold;
background-color: #ceceb5;
border-color:#ffffff #ffffff #998B74 #ffffff;
border-width:0px 0px 2px 0px;
border-style:solid solid ridge solid;
}
table.fullTable {
width: 100%;
}
td.jsChartSection {
text-align: center;
border: 1px solid #888888;
background-color: #EFEFEF;
padding: 10px 20px 10px;
}
</style>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
var chartData={
"type": "bar",
"stacked":true,
"stack-type":"normal",
"backgroundColor":"#FFF0FF",
"hoverMode":"node",
"tooltip": {
"htmlMode":false
},
"legend":{
"align":"center",
"vertical-align":"bottom"
},
"plotarea": {
"width": '100%',
"height": '100%',
"margin": '20 20 50 70'
},
"scale-x":{
"values":["2009","2010","2011","2012","2013", "2014"],
"items-overlap":true,
"item":{
"font-angle":-45,
"auto-align":true
}
},
"scale-y":{
"label":{
"text":"# of Widgets"
},
"values": [-100,0,100,200,300,400,500,600,700,800,900,1000,1100]
},
"series": [
{ "values": [909, 579, 311, 275, 683, 921 ], "stack":1, "text":"Widget Increase", "background-color":"#404090" },
{ "values": [-95, -59, -32, -20, -65, -98 ], "stack":1, "text":"Widget Decrease", "background-color":"#008C50" }
]
};
window.onload=function(){
zingchart.render({
id:'chartDiv',
height:"320",
width:"100%",
data:chartData
});
};
</script>
</head>
<body>
<div class="h1">Chart Management with Zingcharts</div>
<div class="h1">Another div element</div>
<div class="h1">And another div element</div>
<div class="h1">And yet another div element</div>
<div class="databox">
<table cellspacing="5" class="fullTable">
<tr>
<td class="jsChartSection">
<div>
<div id='chartDiv'></div>
</div>
</td>
</tr>
</table>
<!-- databox -->
</div>
<!-- Content -->
</body>
</html>
When I do this in this example it causes an issue with the following img element that is generated by ZingChart...
<img id="chartDiv-img" class="zc-img" usemap="#chartDiv-map" style="position: absolute; border-width: 0px; width: 1825px; height: 320px; left: 0px; top: 0px; z-index: 0; opacity: 0; clip: rect(1px, 1824px, 319px, 1px);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
This element is placed in the top left-hand corner of my page, and the tooltips now behave strangely.
How can I get ZingChart to work correctly while still using my custom page style?
Thanks!
Place this in your <head> element:
<style title="zingchart"></style>
This will force ZingChart to inject its own styles into that element, preventing conflicts.
I'm on the ZingChart team, please let me know if you need anything else :)
Edit:
Apparently browsers implement the concept of "preferred" stylesheets, the idea being that if on one page you have:
<link rel="stylesheet" title="A">
<link rel="stylesheet" title="B">
...only the style from one CSS element will be used, the other will be ignored. The same happens with inline tags.
The problem is that ZingChart creates its own CSS rules dynamically, and injects a tag with title="zingchart". So, when in the HTML page there is another <style> or <link> with a different "title", one of them (most likely the ZingChart style) will be ignored.
We have removed the code which sets the "title" from our code, which will be available in our next public release. Meanwhile, you will need to remove the "title" attribute from your <style> element.
I want to make a responsive site that has an image with links you can click.
This site has invisible divs that sync up with the picture even as the image scales and resizes with the browser.
I want to first try to do the same thing with an image, and then I want to try it with a video.
Are they using any scss or javasript to make that happen, or are they just using css and html?
You can do it using just CSS and HTML, I've made a quick JSFiddle with a full size image background and a little nav.
As with the links you make the text on the image, then create a div ontop of them, don't set a background and just use a border until you get them in the correct place.
https://jsfiddle.net/2mow8qhv/2/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="bgHeader"></header>
<nav id="topNav">
Description | Gallery | Map |
Comments
</nav>
<div id="pageWrapper">
<div id="description">
<body>
</html>
/* Set all padding and margins to 0 by default, and colour to a grey unless overwritten*/
*{
padding: 0px;
margin: 0;
color: #333;
}
/* HEADER AND NAVIGATION*/
/* Sets a background image to fill 100% of the screen and fixes it in place*/
header#bgHeader{
background-image:url("http://seattlebubble.com/blog/wp-content/uploads/2014/11/Weyerhaeuser-Mansion_Tacoma.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
position:absolute;
width:100%;
height:100%;
}
/* Sets the navigation menu to the bottom of the page, and layered above the image*/
nav#topNav{
height: 60px;
width: 100%;
position: absolute;
bottom: 0px;
font-size: 1.5em;
line-height: 55px;
z-index: 2;
background: #000;
opacity: 0.7;
text-align: center;
}#topNav a{
text-decoration: none;
color: #FFF;
}#topNav a:hover{
color: #CCC;
}
heres the the code, can someone help me fix this, i want it to stay centered and it will relatively expand the mask even if you zoom in your browser, give it a try so you'll know what im talking about, im not an expert, im still learning
<!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>Simple JQuery Modal Window from Queness</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
});
</script>
<style type="text/css">
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
.close {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
background-color:#f9f9f9;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:-0.48px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Verdana;
font-size:11px;
font-weight:bold;
font-style:normal;
height:18px;
line-height:18px;
width:18px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
display:inline;
z-index:3200; position:absolute; top: -10px; right:-10px; cursor:pointer;}
}
.close:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9) );
background:-moz-linear-gradient( center top, #e9e9e9 5%, #f9f9f9 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
background-color:#e9e9e9;
}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:728px;
height:90px;
padding:10px;
background-color:#ffffff;
}
</style>
</head>
<body>
<div id="boxes">
<div id="dialog" class="window">
X
</div>
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>
</html>
Try inserting <body align="center"> or wrap the whole body in a <div id="something"> and give
#something {
text-align:center;
}
in the CSS in the <head></head> of your code.
At the moment the used code centers a div with a width of 980px in a background div which contains an image with a link. This works fine on PC, Apple and Android. When the resolution is more than 980px, you see the background image equally on both sides. On Android phone or tablet you see 100% of the maincontainer div. But on iPhone and iPad, the maincontainer div aligns to the left and you see about 200px of the background div on the right side. I tried a lot of things, but I can't get it to act on iPhone and iPad like it does on Android devices: the maincontainer div 100% of the viewport.
My code is this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
html {
height:100%;
width:100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: #FFF;
}
body {
width:100%;
height:100%;
font-family:Arial,Verdana,Helvetica;
font-size:12px;
font-weight:normal;
color:#020051;
line-height:14px;
text-align:center;
background-size: 100%;
background-attachment:fixed;
background-position: center top;
margin-left: auto;
margin-right: auto;
}
#background_with_link{
position:absolute;
top:0px;
width:2400px;
left:50%;
display: block;
margin-left:-1200px;
text-align:center;
}
#main_container{
position:absolute;
top:0px;
width:980px;
left:50%;
margin-top:103px;
margin-left:-490px;
margin-bottom:50px;
margin-right:auto;
}
</style>
</head>
<body>
<div id="background_with_link">
<img src="/UserFiles/Banners/image.jpg" alt="" title="" border="0" />
<!-- Main Container start -->
<div id="main_container">
</div>
<!-- Main Container end-->
</div>
</body>
</html>
I hope there is a solution for this. Thanks!
Erwin