Im having the following problem.
I've created a new pollymer element and i`m trying to make it to fill the entire page.
The problem is that body doesn't get to the entire page:/
here is the page where i call my element:
<!DOCTYPE html>
<html xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<META http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<META name="viewport" content="width=device-width, initial-scale=1.0" />
<h:outputStylesheet library="css" name="style.css" />
<script src="bower_components/webcomponentsjs/webcomponents.js" />
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="my_polymer_elements/top_bar.html" />
<link rel="import" href="my_polymer_elements/left_bar.html" />
<title>Patrimônio</title>
</h:head>
<h:body>
<!-- <my-top_bar userName="Thiago Kairala" profile="Administrador geral"></my-top_bar>-->
<my-left_bar />
</h:body>
</html>
here is my element:
<link rel="import" href="../bower_components/polymer/polymer.html" />
<link rel="import" href="menu.html" />
<polymer-element name="my-left_bar" attributes="systems departments">
<template>
<style>
:host {
position: relative;
display:block;
height: 100%;
}
.left-bar {
width: 15%;
height: 100%;
background-color: #ffcc29;
border: 0;
margin: 0;
}
</style>
<div class="left-bar" start>
<div class="menus">
<my-menu />
<my-menu />
</div>
</div>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
and i`ve made the body, height {margin:0;height:100%;}
https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html. Try fullbleed or fit attributes
Related
I want to style "Login" text , can I do it without "label" tag ?
here's my code
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="WebFontKit/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body>
<div class="logindiv">
<label class="login">Login</label>
Yes, you can. See the fiddle
div.logindiv::before {
content:'Login';
position: top;
color: red;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="WebFontKit/stylesheet.css" type="text/css" charset="utf-8" />
</head>
<body>
<div class="logindiv">
</div>
</body>
</html>
Can anyone give me a help with code? I'm trying to move the h3 header to the right side of the page and cannot seem to get it to move. The attached picture is of where it is now and where I would like it to be.
<!DOCTYPE html>
<html lang="en"><head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href="https://www.carymcclure.com/public_html/favicon.ico?v=1" rel="shortcut icon"
type="image/x-icon" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="004c30">
<style>
body {
background-image: url("../img/ivyt.gif");
background-repeat: no-repeat;
width: 1930px;
height: 8867px;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<a href="../pdf/IVY Academic Transcript.pdf" style="position: absolute; left: 1608px; z-index:
50; width: 248px; top: -86px; height: 233px;"><img style="float:right;margin-
top:250px;position: relative;"
src="../img/ivy logo.gif" width="150" height="150" alt="email"></a>
<h3> Click Logo to Download</h3>
<h3 style="color: white;"></h3>
</body>
</html>
Apply a float: right; to the <h3> element
body {
background-image: url("../img/ivyt.gif");
background-repeat: no-repeat;
width: 1930px;
height: 8867px;
}
h3 {
float: right;
}
<!DOCTYPE html>
<html lang="en"><head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href="https://www.carymcclure.com/public_html/favicon.ico?v=1" rel="shortcut icon"
type="image/x-icon" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="004c30">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body>
<a href="../pdf/IVY Academic Transcript.pdf" style="position: absolute; left: 1608px; z-index:
50; width: 248px; top: -86px; height: 233px;"><img style="float:right;margin-
top:250px;position: relative;"
src="../img/ivy logo.gif" width="150" height="150" alt="email"></a>
<h3> Click Logo to Download</h3>
<h3 style="color: white;"></h3>
</body>
</html>
I have a Polymer app-header element in my master page.
I would like to transition from an image to a solid color when scrolling down. To do so, according to the documentation, I need to add a --app-header-background-rear-layer custom property to my app--header in the stylesheet.
Here is my Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="DarkSoulsMaster.Master.cs" Inherits="DarkSouls.DarkSoulsMaster" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="stylesheets/main.css" type="text/css"/>
<script>
Polymer = {
lazyRegister: true,
useNativeCSSProperties: true
};
</script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html"/>
<link rel="import" href="bower_components/app-layout/app-header/app-header.html"/>
<link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html"/>
<link rel="import" href="bower_components/app-layout/app-header-layout/app-header-layout.html"/>
<link rel="import" href="bower_components/app-layout/app-drawer/app-drawer.html"/>
<link rel="import" href="bower_components/app-layout/app-drawer-layout/app-drawer-layout.html"/>
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-item/paper-item.html" />
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" ></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form" runat="server">
<div style="overflow: auto;">
<app-header-layout>
<app-header condenses shadow fixed effects="resize-title blend-background">
<app-toolbar>
<div style="color: white; font-size: 36px; margin:auto" class="title-main" condensed-title>Dark Souls</div>
<paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
</app-toolbar>
<app-toolbar>
<div style="transform-origin: top, center; color: white;" class="title-main" main-title>Dark Souls</div>
</app-toolbar>
</app-header>
<app-drawer-layout>
<app-drawer id="drawer" align="right" persistent="false">
<div style="height: 100%; background-color: white; padding-top:256px;">
<paper-icon-item>
<iron-icon icon="home" item-icon></iron-icon>
דף הבית
</paper-icon-item>
</div>
</app-drawer>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</app-drawer-layout>
</app-header-layout>
</div>
</form>
</body>
</html>
And here is my app-header in the css file:
app-header {
background-position-x: 60%;
background-position-y: 15%;
height: 256px;
background-color: #263238;
--app-header-background-rear-layer: {
background: linear-gradient(rgba(38, 50, 56, 0.5), rgba(38, 50, 56, 0.5)), url(../res/header.jpg); <!--This is the image -->
};
}
The problem is that the image doesn't appear. Only a solid blue-grey header is seen. I am pretty sure the problem is in the custom property: --app-header-background-rear-layer because it is the only thing that doesn't change the appearance of the website.
Polymer custom CSS properties like --app-header-background-rear-layer should be used in a custom style element <style is="custom-style">.
So you should use an inline <style is="custom-style"> element, or import it in a <link rel="import" href="style.css"> element.
I am trying to make a gallery on my webpage using magnific popup but I can't get the image to show up in a popup it only shows up in a separate tab. How can I get it to show up in gallery view and enabled cycling through all the images in the web page's gallery? In addition, how can I change the size of the lightbox being displayed and the size of the thumbnail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
.modal-dialog {}
.thumbnail {margin-bottom:6px; height: 280px;}
.carousel-control.left,.carousel-control.right{
background-image:none;
margin-top:10%;
width:5%;
}
#open-popup {padding:20px}
.white-popup {
position: relative;
background: #FFF;
padding: 40px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
});
</script>
</head>
<body>
<div id="main" role="main">
<br />
<br />
<br />
<div class="parent-container">
Open popup 1
Open popup 2
Open popup 3
</div>
</body>
</html>
The problem is with your HTML mark up !!
Open popup 1 This won't work.
<a class="test-popup-link" href="path-to-image-1.jpg">Open popup 2</a>
But this will work.
Check Codepen
I have a simple polymer app:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="x-ua-compatible" content="IE=10" >
<script type="text/javascript" src="components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="components/font-roboto/roboto.html">
<link rel="import" href="viewer-app.html">
<style>
html,body {
background-color: #fff;
font-family: 'RobotoDraft', sans-serif;
}
</style>
</head>
<body fullbleed vertical layout unresolved>
<template is="auto-binding">
<viewer-app fit></viewer-app>
</template>
</body>
the custom element 'viewer-app' does not even show up in f12 tools. I'm not getting any errors at all.
How do I get this to work?