I am currently having problems with a website. I am trying to make the text stay in the same place when the page is either viewed on larger screens or when zooming out (zoom out and see for yourselves). I have the same problem with the buttons on the right side. Can anyone tell me how I can solve this?
http://ronnym.tk/
Please help me with this. I have no clue what to do, I tried absolute positioning, individually positioning divs with margins, nothing works. I think the parent's parameters overwrites the child parameters or something. I honestly don't know what else to try. Wasted days already.
Here is my HTML code
<!DOCTYPE html>
<html class="html">
<head>
<script type="text/javascript">
if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "jquery.musepolyfill.bgsize.js", "index.css"], "outOfDate":[]};
</script>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="2014.0.1.264"/>
<title>HOME</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?475048684"/>
<link rel="stylesheet" type="text/css" href="css/index.css?4024854745" id="pagesheet"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
var __adobewebfontsappname__ = "muse";
</script>
<!-- JS includes -->
<script type="text/javascript">
document.write('\x3Cscript src="' + (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//webfonts.creativecloud.com/cambo:n4:all.js" type="text/javascript">\x3C/script>');
</script>
</head>
<body>
<div class="clearfix" id="page"><!-- group -->
<div class="clearfix grpelem" id="pu203-4"><!-- column -->
<img class="colelem" id="u203-4" alt="ABOUT ME" width="171" height="41" src="images/u203-4.png"/><!-- rasterized frame -->
<div class="clearfix colelem" id="u205-24" data-ice-editable="html" data-ice-options="disableImageResize,none" data-muse-uid="U205"><!-- content -->
<p id="u205-2">My name is Ronny Minkovsky, and I'm a graphics designer and artist, currently based somewhere behind a computer screen.</p>
<p id="u205-3"> </p>
<p id="u205-5">About 6 years ago, I realized my passion for art, and began a self-taught career... for now.</p>
<p id="u205-6"> </p>
<p id="u205-8">Ever since my childhood days, I've always loved gaming, and developed a real passion for its graphics, a passion that eventually lead me into creating, and participating in the art production of several games, one of which will be released on steam shortly, by the name of CivCraft.</p>
<p id="u205-9"> </p>
<p id="u205-11">I'm majorly inspired by the Cyberpunk genre, and by authors such as Philip K. Dick, H. P. Lovecraft, Edgar Allan Poe, and Baudrillard and have been gaming since the good old days of Divine Divinity, and Ultima.</p>
<p id="u205-12"> </p>
<p id="u205-14">Even though I prefer gaming graphics, I also tend to be versatile, working on web design, and advertising as well.</p>
<p id="u205-15"> </p>
<p id="u205-17">I know my way around a number of digital art programs, mainly Photoshop, Illustrator, and Sketchbook Pro.</p>
<p id="u205-18"> </p>
<p id="u205-20">Take a moment to browse through my Projects section, where I uploaded a few works from different fields, or skim through the Artwork tab for random art I made.</p>
<p id="u205-21"> </p>
<p> </p>
</div>
</div>
<div class="clearfix grpelem" id="pu400"><!-- column -->
<a class="nonblock nontext museBGSize colelem" id="u400" href="mailto:portal-m#hotmail.com"><!-- simple frame --></a>
<a class="nonblock nontext museBGSize colelem" id="u383" href="callto://portal230762"><!-- simple frame --></a>
</div>
</div>
<div class="preload_images">
<img class="preload" src="images/mail%20button1-o.png" alt=""/>
<img class="preload" src="images/mail%20button1-m.png" alt=""/>
<img class="preload" src="images/mail%20button1-n.png" alt=""/>
<img class="preload" src="images/skype%20button-over.png" alt=""/>
<img class="preload" src="images/skype%20button-mouse%20down.png" alt=""/>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?353204447" type="text/javascript"></script>
<script src="scripts/jquery.musepolyfill.bgsize.js?323834883" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
$(document).ready(function() { try {
(function(){var a={},b=function(a){if(a.match(/^rgb/))return a=a.replace(/\s+/g,"").match(/([\d\,]+)/gi)[0].split(","),(parseInt(a[0])<<16)+(parseInt(a[1])<<8)+parseInt(a[2]);if(a.match(/^\#/))return parseInt(a.substr(1),16);return 0};(function(){$('link[type="text/css"]').each(function(){var b=($(this).attr("href")||"").match(/\/?css\/([\w\-]+\.css)\?(\d+)/);b&&b[1]&&b[2]&&(a[b[1]]=b[2])})})();(function(){$("body").append('<div class="version" style="display:none; width:1px; height:1px;"></div>');
for(var c=$(".version"),d=0;d<Muse.assets.required.length;){var f=Muse.assets.required[d],g=f.match(/([\w\-\.]+)\.(\w+)$/),l=g&&g[1]?g[1]:null,g=g&&g[2]?g[2]:null;switch(g.toLowerCase()){case "css":l=l.replace(/\W/gi,"_").replace(/^([^a-z])/gi,"_$1");c.addClass(l);var g=b(c.css("color")),h=b(c.css("background-color"));g!=0||h!=0?(Muse.assets.required.splice(d,1),"undefined"!=typeof a[f]&&(g!=a[f]>>>24||h!=(a[f]&16777215))&&Muse.assets.outOfDate.push(f)):d++;c.removeClass(l);break;case "js":l.match(/^jquery-[\d\.]+/gi)&&
typeof $!="undefined"?Muse.assets.required.splice(d,1):d++;break;default:throw Error("Unsupported file type: "+g);}}c.remove();(Muse.assets.outOfDate.length||Muse.assets.required.length)&&alert("Some files on the server may be missing or incorrect. Clear browser cache and try again. If the problem persists please contact website author.")})()})();/* body */
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { if (e && 'function' == typeof e.notify) e.notify(); else Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
</body>
</html>
And here is the CSS code
.version.index /* version checker */
{
color: #0000EF;
background-color: #E668D9;
}
.html
{
background-color: #000000;
}
#page
{
z-index: 1;
max-width:100%;
height: auto;
border-style: none;
border-color: transparent;
padding-bottom: 212px;
margin-left: auto;
margin-right: auto;
background: transparent url("../images/home%20back%20(smaller).jpg") no-repeat center center;
}
#pu203-4
{
width: 0.01px;
margin-right: -10000px;
margin-top: 478px;
margin-left: 138px;
position: relative;
}
#u203-4
{
z-index: 2;
display: block;
vertical-align: top;
margin-left: 138px;
position: relative;
}
#u205-24
{
z-index: 6;
min-width: 465px;
height: auto;
margin-top: 29px;
margin-left: 0px;
margin-right: 0px;
position: relative;
}
#u205-2,#u205-3,#u205-5,#u205-6,#u205-8,#u205-9,#u205-11,#u205-12,#u205-14,#u205-15,#u205-17,#u205-18,#u205-20,#u205-21
{
width:100%;
font-size: 11px;
line-height: 13px;
color: #86A4B2;
font-family: cambo, serif;
font-weight: 400;
}
#pu400
{
width: 0.01px;
margin-right: -10000px;
margin-top: 570px;
margin-left: 892px;
}
#u400
{
z-index: 31;
width: 354px;
height: 120px;
position: relative;
background: transparent url("../images/mail%20button1-a.png") no-repeat left top;
background-size: contain;
}
#u400:hover
{
margin: 0px;
background: transparent url("../images/mail%20button1-o.png") no-repeat left top;
background-size: contain;
}
#u400:active
{
margin: 0px;
background: transparent url("../images/mail%20button1-m.png") no-repeat left top;
background-size: contain;
}
#u400.MuseLinkActive
{
margin: 0px;
background: transparent url("../images/mail%20button1-n.png") no-repeat left top;
background-size: contain;
}
#u383
{
z-index: 30;
width: 354px;
height: 120px;
top: -8px;
margin-bottom: -8px;
position: relative;
background: transparent url("../images/skype%20button-active%20(normal).png") no-repeat left top;
background-size: contain;
}
#u383:hover
{
margin: 0px 0px -8px;
background: transparent url("../images/skype%20button-over.png") no-repeat left top;
background-size: contain;
}
#u383:active
{
margin: 0px 0px -8px;
background: transparent url("../images/skype%20button-mouse%20down.png") no-repeat left top;
background-size: contain;
}
body
{
position: relative;
min-width: 1280px;
max-height:100%;
}
Try using a wrapper for your page as following:
<div class="wrap"> all your page content </div>
using this CSS:
.wrap {width=800px; margin: 0px auto;}
This will automatically horizontally center the DIV wrapper, as well as making sure that all the content within always stays at the same place, relative to the wrapper.
You can still expand the page vertically by adding more content or adding a height value.
You might want to change the Width if 800px is too much or too little, but make sure it's a constant (px) value.
Related
I made a little landing page and the client wants: "The text, Sourcing & Trading, CCTV security. Want to use overstriking.
Then all will be OK." I googled what overstriking is and I have to admit I'm a little hazy on the concept and not sure how to implement it with CSS at.
The code I tried is in the snippet bellow. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
footer{
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height:100px;
line-height: 10px; /* Vertically center the text there */
padding-top:10px;
background-color: #f5f5f5;
margin-top: 10px;
}
.main-buttons {
width: 400px;
height: 50px;
margin: 0 auto;
text-decoration: line-through;
}
span{
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.main-container {
background-image: url('http://wenshin.ltd/wp-content/uploads/2018/07/logisticsworldmap-1024x586.png');
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
.middle{
top: 50%;
}
.btn-lg {
box-shadow: 3px 3px #888888;
}
h1 {
text-shadow: 1px 1px #888888;
}
.logo {
width: 50%;
}
</style>
</head>
<body class="main-container">
<div class="container middle">
<div class="row ">
<div class="col-md-12 text-center ">
<div class="intro"> <br> <br> <br> <br>
<img src="http://wenshin.ltd/wp-content/uploads/2018/08/WS-01.png" class="img-fluid logo" alt="Logo"> <br> <br>
<h1 class="">WELCOME TO WENSHIN <br> INDUSTRIAL CO LIMITED</h1>
<p>
<a href="http://www.wenshin.ltd/index.php">
<button class=" main-buttons btn btn-light btn-lg mt-3">Sourcing & Trading</button>
</a>
</p>
<p>
<a href="http://www.cctvcamerahd.com/">
<button class="main-buttons btn btn-light btn-lg mt-3">CCTV Security</button>
</a>
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-center"><p><strong>Choose your language:</strong></p></span>
<span class="text-center"><p><span>English</span> <span>繁體中文</span> <span>Español</span> <span>Português</span> <span>Deutsch</span> <span>Français</span> <span>Italiano</span> <span>Pусский</span> <span>한국어</span> <span>日本語</span> <span>Nederlands</span> <span>غة العربية
</span> <span>Indonesian</span>
</p></span>
</div>
</footer>
</body>
</html>
I used:
text-decoration: line-through;
And I wondered if that's it or is there something alternative.
First of all, I would ask my client what he means by that.
Most people mean a strikethrough by saying overstrike.
You would just have to add this to your css for these buttons.
text-decoration: line-through;
As for the overstriking, it is an old technique used in the time of typewriters to write letters that where not on the "Keyboard". It doesn't really make sense anymore.
Cheers!
This just in.... I managed to answer my own question.
Since it turns out that (at least for my device) the inline «style» attribute accepts «/**/» comments like its stylesheet cousin, I thought it would be helpful to "good doctor" the code to make it easier to follow:
<p style="text-align: justify;">An element with «position: relative;»
[such as
<span style="/*Block setup*/display: inline-block; position: relative;
/*Adjust to match print baseline*/vertical-align: -7.5%;
/*Block width*/width: 6.5em;">
<span style="/*Element Name*/position: absolute;
left: 0em;">Cæsium (</span>
<span style="/*Isotope weight*/font-size: 60%; vertical-align: 55%;
position: relative;/**/ left: 6.0em;">133</span>
<span style="/*Atomic number*/font-size: 60%; vertical-align: -25%;
position: relative;/**/ left: 4.6em;">55</span>
<span style="/*Element Symbol*/position: relative;
left: 2.5em;">Cs)]</span>
</span> is positioned relative to its normal position:</p>`
The user may need to jiggle about the «width» and «left» properties to smooth out the spacing for their system (as well as prune the comments if storage space us at a premium).
I'm trying to make a php gallery and thats why I need a good Mask, where the pictures later can be shown.
I want the Mask not to be bigger than screen-size. I mean, there must be no scrolling and the whole <body> needs to have just the width and height of the browser windows, so that every child object in <body> is limited to the frame-size of the browser and will be shrunk down if it overflows. I've tried with max-width and max-height on the <body>, but it doesn't work.
Here are the contents of my index.html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mother">
<div id="header">
<div id="back-link">
Home
</div>
<div id="prev">
next picture
</div>
<div id="next">
previous picture
</div>
<div id="headline">
<p class="h2">Our Galery</p>
</div>
</div>
<!-- Content -->
<div id="container-bild">
<img src="./bilder/P1130079.JPG" id="img-bild" />
</div>
</div>
</body>
</html>
Here are the contents of my style.css file:
body {
max-width: 100%;
max-height: 100%;
}
/* mother-container */
div#mother {
max-width: 100%;
max-height: 100%;
margin: auto;
}
/* main-container */
#container-bild {
max-width: 100%;
max-height: 100%;
}
/* picture in main-container */
#img-bild {
max-width: 100%;
max-height: 100%;
border: 1px solid #280198;
}
Here is a screenshot of what it looks like:
To set the height and width to be 100% of the window (viewport) size, use:
height: 100vh;//100% view height
width: 100vw;// 100% view width
.
div {
background-color: blue;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
color: white;
}
<div>some content here</div>
Try:
html,
body {
height: 100%;
}
body {
overflow: hidden;
}
Do you know how many child elements will be in your gallery? If the number of elements is static, you could simply set their dimensions in CSS using vw and vh units. No JavaScript involved, and the elements would never be able to overflow your body.
As a reminder for my future self:
.book {
margin: auto;
width: 100vh;
max-width: 100vw;
min-width: 500px;
}
Though this is completely unrelated, for links, you might want to use something like:
a[href^="#"] {
text-decoration: none;
color: black;
background: url("http://www.yaml.org/spec/1.2/term.png") no-repeat bottom right;
}
a[href^="#"]:hover {
text-decoration: underline;
color: blue;
background: none;
}
I'm not sure if this is possible with css, it could be.
I have solved similar issue with javascript:
window.top.innerHeight;
gets the available height, excluded menubars etc. of the borwser.
See how I did for the height, my issue was that the footer should be at the bottom even if content was empty->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>C-Driver Manager</title>
<meta name="keywords" content="Aygit,Device,Driver,Surucu,Download,Indir,yedekle,Unknown,Bilinmeyen,Backup,Back-up,stuurprogramma,apparaat,windows,w7,w8,w10,multilanguage,tool,free,gratis,ucretsiz">
<meta name="description" content="Windows 7/8/10 Device indentify, Driver backup, Driver info">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="images/favicon.ico">
</head>
<body onResize="resizecontainer();">
<div class="divtop">
<div class="divtopcontainer">
<div class="divlogo">
</div>
<div class="divHmenu">
<style>
.mnuHorizontal
{
list-style:none;
}
.mnuHorizontal li
{
float:left;
}
.mnuHorizontal .activemnu a,.mnuHorizontal li a:hover
{
background:#00B7EF;
border-radius:5px;
color:white;
}
.mnuHorizontal li a
{
display:inline-block;
text-decoration:none;
padding:5px 12px;
text-align:center;
font-weight:bold;
color:#020042;
}
</style>
<ul class="mnuHorizontal">
<li id="index.php">HOME</li>
<li id="features.php">FEATURES</li>
<li id="download.php" class="activemnu">DOWNLOAD</li>
<li id="contact.php">CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="divblueline"></div>
<div class="divcontainer">
<div style="float:left">
<h2>What is C-Driver Manager</h2>
C-Driver Manager is a simple tool that;
<ul>
<li>displays information about your devices</li>
<li>identify unrecognized devices by windows</li>
<li>Backups your devices driver</li>
</ul>
<h2>Why C-Driver Manager?</h2>
<ul>
<li>No installation needed</li>
<li>No adware</li>
<li>No spyware</li>
<li>Absolutely freeware</li>
</ul>
</div>
<div>
<img alt="" src="images/devmgr5.jpg" height="430" width="700">
</div>
</div>
<div class="divblueline"></div>
<div class="divbottom">
<div id="chmx">
</div>
</div>
</body>
<script>
for (i=0;i<document.getElementsByClassName('mnuHorizontal').item(0).children.length; i++)
{
if (document.getElementsByClassName('mnuHorizontal').item(0).children[i].id ==
"index.php")
{
document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = 'activemnu';
}
else
{
document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = '';
}
}
resizecontainer();
function resizecontainer()
{
avh = window.top.innerHeight;
dbh = document.getElementsByClassName('divbottom').length *
document.getElementsByClassName('divbottom').item(0).clientHeight;
dbt = document.getElementsByClassName('divtop').length *
document.getElementsByClassName('divtop').item(0).clientHeight;
dbbl = document.getElementsByClassName('divblueline').length *
document.getElementsByClassName('divblueline').item(0).clientHeight;
decrh = dbh + dbt + dbbl;
document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
}
</script>
</html>
look for this function inside the example above ->
function resizecontainer()
{
avh = window.top.innerHeight;
dbh = document.getElementsByClassName('divbottom').length *
document.getElementsByClassName('divbottom').item(0).clientHeight;
dbt = document.getElementsByClassName('divtop').length *
document.getElementsByClassName('divtop').item(0).clientHeight;
dbbl = document.getElementsByClassName('divblueline').length *
document.getElementsByClassName('divblueline').item(0).clientHeight;
decrh = dbh + dbt + dbbl;
document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
}
This works great. This will keep your image from growing too large width wise and also keep its proportions.
img {
max-width: 100%;
height: auto;
}
My CSS solution is:
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
First off I'm having a tough time understanding the fundamentals of the hero-transition within Polymer. I am attempting to build a hero transition card like the one in the example provided by them, which can be found here.
Below I've built the mini card and I'm just trying to understand the transition and how the larger card works with the smaller one.
My specific question is, how does the transition bind to each element? Do I need to complete the CSS for both before I can begin playing with the core-animated-pages? Does having an embedded template matter?
Any guidance would be extremely helpful.
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">
<template>
<style>
#page2 {
width: 100%;
height: 100%;
}
#paper_shadow {
position: relative;
display: inline-block;
font-family:'Roboto', sans-serif;
font-size: 12px;
color: white;
}
#chip_body {
height: 400px;
width: 300px;
background-color: aqua;
color: black;
}
#chip_top {
background-color: deeppink;
background-image: url();
background-size: cover;
background-position: center center;
width: 100%;
position: relative;
}
#chip_bottom {
background-color: #fbfbfb;
width: 100%;
height: 20%;
position: relative;
font-size: 1.2em;
word-wrap: break-word;
}
#text {
padding-left: 5%;
padding-right: 2.5%;
overflow: hidden;
}
#coreImage {
display: block;
}
#card_container {
width: 70%;
height: 600px;
background-color: aqua;
color: black;
}
#card_right {
height: 100%;
width: 30%;
}
#card_left {
background-color: darkblue;
height: 100%;
width;
70%;
}
#card_left_top {
padding-right: 20px;
padding-top: 20px;
background-color: skyblue;
}
#circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
#header_text {
}
#card_content {
width:100%;
background-color: lightcoral;
}
</style>
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated=true; hero-p="" on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero=""></div>
</section>
</core-animated-pages>
</template>
<script>
Polymer('chip-card', {
page: 0,
raise: function() {
this.$.paper_shadow.setZ(2);
},
lower: function() {
this.$.paper_shadow.setZ(1);
},
transition: function(e) {
if (this.page === 0) {
this.$.paper_shadow = e.currentTarget;
this.page = 1;
} else {
this.page = 0;
}
}
});
</script>
</polymer-element>
you are actually very close to a working transition with the code you have.
I've implemented a more complicated hero transition on my website and took some code from there to get yours to work.
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" hero-p on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" hero vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero></div>
</section>
</core-animated-pages>
I've made but a few adjustments.
First off, any hero parent element, with the hero-p attribute, should contain just that attribute. So no need for the quotation marks :)
<paper-shadow hero-p .. >
Every element that's part of the Hero transition, needs a hero attribute.
Again, without the quotation marks. <div id="chip_body" .. hero .. >
And the same thing goes for the element you're transitioning to.
<div id="card_container" .. hero .. >
I've put a working version of your code on my website.
There's page containing the <chip-card> element and a second page containing the working template file.
Index page
Template file
Please note : I edited the reference to webcomponentsjs to conform with my folder structure.
Feel free to ask me if there's anything else!
Currently i have a running slideshow as my website background (3 images)
I also have a logo in the middle of these 3 images, which remains there throughout the duration of the slideshow.
Whilst the first image is displayed (when the website is loaded up) the logo image (which also has the function of a button) can be clicked and direct you to another website, however when the images change, the logo remains, however the ability to click is gone...
all help greatly appreciated
here is my current code
$(document).ready(function() {
var header = $('body');
var backgrounds = new Array(
'url(http://urs2009.net/wp-content/uploads/2011/11/lights-of-city.jpg)', 'url(http://hdwallpaperd.com/wp-content/uploads/2014/12/background-wallpaper-hd-1.jpg)', 'url(http://guruwallpapers.com/wp-content/uploads/2014/09/Sunset-Wide-Screen-Wallpapers-6.jpg)'
);
var current = 0;
function nextBackground() {
$('#mask').fadeTo(1000, 0.9, function() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
})
$('#mask').fadeTo(500, 0);
}
setInterval(nextBackground, 5000);
header.css('background-image', backgrounds[0]);
});
body {
-webkit-background-size: 1390px 700px;
-moz-background-size: 1390px 700px;
background-size: 1390px 700px;
}
h1 {
font-size: 600%;
color: white;
margin-top: 0.5em;
}
h3 {
color: white;
margin-top: -50px;
}
.GFImage {
margin-top: 65px;
border: 0;
}
.Footer {
position: fixed;
bottom: 0;
width: 100%;
margin-left: -8px;
color: white;
background: #151515;
opacity: 0.8;
text-align: center;
vertical-align: middle;
height: 7%;
}
#mask {
width: 100%;
height: 100%;
background: #000000;
top: 0;
left: 0;
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<br>
<h1>Welcome to GF</h1>
</center>
<center>
<br>
<h3>Welcome to GF! Check out all the information you need by just the click of a button...</h3>
</center>
<center>
<a href="Home Page .html">
<img src="Images/GF Logo White .jpg" style="width: 275px; height: 275px;" class="GFImage">
</a>
</center>
<div class="Footer">
<p>Copyright © All Rights Reserved. Design by Gavin Foley.</p>
</div>
<div id="mask">SCRIPT FUNCTION IN HERE!!!!</div>
Seams like the link goes below the images.
I was able to solve this adding to the link element these properties:
position:absolute;
z-index:9
and then it should work.
EDIT
Just as a suggestion, have a look at this example, it could be useful if you are at the first try with html and css:
http://css-tricks.com/perfect-full-page-background-image/
I am building a website at the moment using HTML and CSS.
I have a small problem related to zooming. When the page is zoomed out most of the elements get messed up and out of place.
Browsers used:
Google Chrome
Safari
Opera
More over when viewed from Safari on a 27" screen it becomes even worst.
index.html
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Arrow-TvSeries - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta property="fb:admins" content="{793705343}"/>
</head>
<body>
<center>
<table>
<tr>
<td align="center">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=80504353315";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '793705343', // App ID from the app dashboard
channelUrl : '//www.arrow-tvseries.com/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
cookie : true, // enable cookies to allow the server to access the session
oauth : true // enable OAuth 2.0
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asyncchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:f="http://java.sun.com/jsf/core">
<!--website-->
<div id="hood_image">
<br/><br/><br/></br></br></br><img src="images/oli_arrow4.png" align="right"/>
</div>
<div id="sitewrapper">
<div id="header"></div>
<div id="line"></div>
<div id="menu">
<br>Home | Cast | Episodes
</div>
<!--content-->
<div id="content">
<div id="episodecontent">
<table border="0">
<tr>
<td>
<img id="episodeimg" src="images/Next-Episode.png"/>
</td>
<td>
<p style="color: white"><b>Title:</b> Home Invasion<br/><b>Date:</b> 24th April 2013</p>
</td>
</tr>
</table>
</div>
<div id="division1">
<p>After a violent shipwreck, billionaire playboy Oliver Queen was
missing and presumed dead for five years before being discovered
alive on a remote island in the Pacific. When he returns home to
Starling City, his devoted mother Moira, much-beloved sister Thea,
and best friend Tommy welcome him home, but they sense Oliver has
been changed by his ordeal on the island. While Oliver hides the
truth about the man he's become, he desperately wants to make amends
for the actions he took as the boy he was. Most particularly, he
seeks reconciliation with his former girlfriend, Laurel Lance.</p><br/>
<p>As Oliver reconnects with those closest to him, he secretly creates
the persona of Arrow a vigilante to right the wrongs of his family,
fight the ills of society and restore Starling City to its former glory.
By day, Oliver plays the role of a wealthy, carefree and careless
philanderer he used to be - flanked by his devoted chauffeur/bodyguard,
John Diggle - while carefully concealing the secret identity he turns
to under the cover of darkness. However, Laurel's father, Detective
Quentin Lance, is determined to arrest the vigilante operating in his
city. Meanwhile, Oliver's own mother, Moira, knows much more about the
deadly shipwreck than she has let on and is more ruthless than he
could ever imagine.</p><br/>
<p style="font-size: 20px"><b>I n t r o d u c t i o n</b></p><br/>
<p>At the beginning of each episode, with the exception of "Pilot", the
first episode of the series, a voiceover of Oliver Queen describes
briefly the hardships that Oliver faced on Lian Yu. He states that
as he returned, he set out to fulfill his father's dying wish.</p><br/>
<p>"My name is Oliver Queen. For five years I was stranded on an
island with only one goal: survive. Now I will fulfill my father's
dying wish. To use the list of names he left me and bring down those
who are poisoning my city. To do this, I must become someone else.
I must become... something else."</p>
<div id="video" align="middle">
<iframe width="640" height="360"
src="http://www.youtube.com/embed/xZrFSsc6CpI?autoplay=1"
frameborder="1" allowfullscreen>
</iframe>
<!--?autoplay=1-->
</div>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8938167182852335";
/* Home paga bottom */
google_ad_slot = "9919170802";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div style="float: right; font-size: 9px;">
<p><br/><br/>Most of the information about this Tv-Show is taken from IMDB.COM</p>
</div>
</div>
<div id="division2">
<div class="fb-comments" data-href="http://www.arrow-tvseries.com" data-width="200"
data-num-posts="10" data-colorscheme="dark">
</div>
<div class="fb-like" data-href="http://www.arrow-tvseries.com" data-send="false"
data-width="220" data-show-faces="true" data-font="arial">
</div><br/>
<div><br/>
<p><b>You may also like:</b></p>
</div>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8938167182852335";
/* First Ad */
google_ad_slot = "7105305203";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
<br/><br/><img src="images/imdb.png" alt="IMDB" width="100" />
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</center>
</body>
style.css
a:link {color:#fff;} /* unvisited link */
a:visited {color:#fff;} /* visited link */
a:hover {color:#2e6402;} /* mouse over link */
a:active {color:#fff;} /* selected link */
#table{
padding-top: 30px;
padding-bottom: 30px;
z-index: 100;
}
#header{
background-position: center;
position: relative;
background-image:url('images/logo_bg.png');
background-repeat:no-repeat;
border-radius: 25px;
height: 331px;
width: 1300px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
z-index: -3;
/*border:2px solid;*/
display:block;
margin: 0 auto 0 auto;
}
#line{
width: 1290px;
height: auto;
background-color: white;
padding-top: 1px;
margin: 0 auto 0 auto;
}
body{
background-color: black;
}
#sitewrapper{
width: 1300px;
height: 100%;
padding-left: 0px;
padding-top: 3px;
padding-right: auto;
margin: 0 auto 0 auto;
}
p{
text-align: justify;
font-family: arial;
padding-left: 0px;
margin: 0 auto 0 auto;
color: white;
}
p2{
text-align: justify;
font-family: arial;
padding-left: 0px;
color: green;
margin: 0 auto 0 auto;
}
#menu{
width: 1250px;
height: auto;
color: white;
padding-top: 0px;
padding-right: 100px;
padding-bottom: 0px;
font-size: 120%;
/*border:2px solid;*/
text-align: right;
font-family: arial;
z-index: 31;
position: relative;
margin: 0 auto 0 auto;
}
#episodeimg{
width: 250px;
float: left;
padding-top:0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
margin: 0 auto 0 auto;
}
#episodecontent{
width: 55%;
float: auto;
margin: 0 auto 0 auto;
}
#hood_image{
float: left;
width: 30%;
height: auto;
position: fixed;
z-index: 1;
padding-left: 0px;
}
#content{
float: right;
width: 85%;
position: absolute;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
z-index: 5;
margin: 0 auto 0 auto;
/*border:2px solid;*/
}
#division1{
position: relative;
float: left;
height: 100%;
width: 700px;
color: white;
padding-top: 30px;
padding-left: 20%;
padding-right: 0px;
padding-bottom: 10px;
z-index: 30;
margin: 0 auto 0 auto;
/*border:2px solid;*/
}
#division2{
float: right;
height: 100%;
width: 20%;
/*padding-top: 0px;
padding-left: 0px;
padding-right: 0px;*/
color: white;
border:2px solid;
margin: 0 auto 0 auto;
z-index: 1000;
overflow: hidden;
position: relative;
}
#video{
padding-top: 50px;
padding-left: 0%;
padding-right: 0%;
padding-bottom: 100px;
/*border:2px solid;*/
}
#footer{
/*background-color: red;*/
height: 10px;
width: 100%;
color: black;
background-color: white;
display:block;
}
Link to this website:
www.arrow-tvseries.com
There are some things to think about here. #sitewrapperneeds to have position:relative as you want #content to be positioned absolute to position it in relation to its parent element and not the document. This will change around your layout a bit.
Next part is that use use width: 85% on #content. This limits and pushes the facebook integration around. Consider setting it to 100% instead. This will make the facebook box float to the right of the text.
There are many different ways to layout and position elements and this might not be an optimal solution, these changes should make it not move around when zoomed (tested in chrome).
There are also some other things you might want to consider. Try validate the css at http://jigsaw.w3.org/css-validator/ and it will point you to some errors.