I am trying to style the height of a gold-email-input. I tried setting the height with:
gold-email-input {
background-color: var(--light-theme-base-color);
width: 100%;
height: 48px;
max-width: 670px;
padding: 0px;
--paper-input-container: {
max-height: 48px;
};
}
But what ever I try the paper-input-container stays 61px while the gold-email-input resizes to 48px. Is there anything I can do to fix this?
If you want the height of the paper-input-container to match the height of gold-email-input, you would set its height to 100%, and clear its margin and padding:
gold-email-input {
--paper-input-container: {
height: 100%;
margin: 0;
padding: 0;
}
}
To style the gold-email-input outside of a custom element, make sure to use a custom-style:
<head>
<base href="https://polygit.org/polymer+1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="gold-email-input/gold-email-input.html">
</head>
<body>
<style is="custom-style">
:root {
--light-theme-base-color: rgba(0,112,0,0.4);
}
gold-email-input {
background-color: var(--light-theme-base-color);
width: 100%;
height: 248px;
max-width: 670px;
padding: 0px;
--paper-input-container: {
outline: solid 3px red;
height: 100%;
margin: 0;
padding: 0;
};
}
</style>
<gold-email-input></gold-email-input>
</body>
codepen
Within a custom element, you could use the style normally (i.e., without custom-style) inside the dom-module:
<head>
<base href="https://polygit.org/polymer+1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="gold-email-input/gold-email-input.html">
</head>
<body>
<style is="custom-style">
:root {
--light-theme-base-color: rgba(0,112,0,0.4);
}
</style>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
gold-email-input {
background-color: var(--light-theme-base-color);
width: 100%;
height: 248px;
max-width: 670px;
padding: 0px;
--paper-input-container: {
outline: solid 3px red;
height: 100%;
margin: 0;
padding: 0;
};
}
</style>
<template>
<gold-email-input></gold-email-input>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
</body>
codepen
Related
I'm trying to set my body's background color to a simple grey background but I am getting a two blocks with different greys like this:
* {
padding: 0px;
margin: 0px;
}
body {
height: 100vmax;
width: 100vmax;
background-color: rgb(23, 23, 23);
}
#menuClosed {
width: 45px;
height: auto;
}
#menuOpen {
width: 45px;
height: auto;
filter: brightness(0) invert(1);
}
#sidebarOpen {
background-color: rgb(23, 23, 23);
display: table;
text-align: center;
height: 100vh;
color: white;
padding: 0px 50px;
font-size: 34px;
font-family: sans-serif;
}
#sidebarOpen button {
padding: inherit;
padding-top: 10px;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue" defer></script>
<script src="./app.js" defer></script>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="root">
<div id="sidebar">
<img v-show="sidebar.open === false" #click="sidebar.open = true" src="./assets/navi/menu.png" id="menuClosed">
<div v-show="sidebar.open === true" id="sidebarOpen">
<img #click="sidebar.open = false" src="./assets/navi/menu.png" id="menuOpen">
<p>menu</p>
</div>
</div>
</div>
</body>
</html>
this is my js file
Vue.config.devtools = true
var rootvue = new Vue({
el: "#root",
data: {
sidebar: {
open: false
}
}
})
Then when i click the menu button it goes away and turns into this
I currently achieve the look of the first image here by applying border-collapse: separate to the table and border-right: dashed 1px #dddddd as well as position: sticky and left: 0 to the td:
When scrolling horizontally, is there a pure CSS way of making a shadow appear as follows:
There is no pure CSS way to detect a position: sticky element. But there is a way to detect it with JS and interact with any element on it.
var observer = new IntersectionObserver(function(entries) {
if(entries[0].intersectionRatio === 0)
document.querySelector("#nav-container").classList.add("nav-container-sticky");
else if(entries[0].intersectionRatio === 1)
document.querySelector("#nav-container").classList.remove("nav-container-sticky");
}, { threshold: [0,1] });
observer.observe(document.querySelector("#nav-container-top"));
body {
margin: 0px;
font-family: Roboto, Tahoma;
}
#logo-container {
background-color: #bdc3c7;
height: 100px;
}
#nav-container-top {
background-color: #bdc3c7;
height: 1px;
}
#nav-container {
background-color: #2980b9;
height: 60px;
line-height: 60px;
color: white;
text-align: center;
font-size: 25px;
position: sticky;
top: 0;
font-weight: 700;
transition: font-size 0.2s ease-out;
}
.nav-container-sticky {
background-color: #e74c3c !important;
font-size: 18px !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
#main-container {
background-color: #ecf0f1;
height: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo-container"></div>
<div id="nav-container-top"></div>
<div id="nav-container">Navigation Container</div>
<div id="main-container"></div>
</body>
</html>
Took manual from here https://usefulangle.com/post/108/javascript-detecting-element-gets-fixed-in-css-position-sticky
I just started learning HTML and CSS and I have been stuck on the layout of a website in css for a while now. In the first picture you can see how i am trying to make it look and in the second picture you see how it looks right now...
I tried searching online but I don't seem to grasp the way layout and positioning works in CSS. Does anyone know what I am doing wrong??
Picture here!
2nd picture here!
html
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
<title>ALISAN'S OCCASIONS</title>
</head>
<body>
<div class="header">
</div>
<div class="home_page">
<div class="home_left">
<ul id="social_media">
<li><img src="Facebook1.jpg"></li>
<li><img src="Instagram1.jpg"></li>
<li><img src="twitter1.jpg"></li>
</ul>
</div>
<div class="home_center">
</div>
<div class="home_right">
</div>
</div>
</body>
</html>
and this the CSS stylesheet
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #8799b7;
overflow-y: scroll;
max-height: 735px;
}
.header {
display: block;
background-image: url("header4.jpg");
height: 500px;
}
.home_page {
display: block;
margin:0;
padding: 0;
}
.home_left {
display: inline-block;
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
.home_center {
display: inline-block;
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
.home_right {
display: inline-block;
height: 235px;
width: 506px;
margin: 0;
padding: 0;
You can simplify your code by using flexbox, as long as you don't need to support older browser.
The HTML would be:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
<title>ALISAN'S OCCASIONS</title>
</head>
<body>
<div class="header">
header
</div>
<div class="home_page">
<div class="home_left">
left
</div>
<div class="home_center">
center
</div>
<div class="home_right">
right
</div>
</div>
</body>
</html>
The CSS:
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #8799b7;
overflow-y: scroll;
max-height: 735px;
}
.header {
display: block;
background-image: url("header4.jpg");
height: 500px;
}
.home_page {
display: flex;
margin:0;
padding: 0;
}
.home_page > div {
border: 1px solid grey;
}
.home_left {
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
.home_center {
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
.home_right {
height: 235px;
width: 506px;
margin: 0;
padding: 0;
}
And you can see it in action at:
https://codepen.io/anon/pen/EvqXmg
I am helping a student with a project and we are going through a tutorial. The tutorial is here:
https://ihatetomatoes.net/demos/parallax-scroll-effect/
Here is our index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>joeys school project</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<body>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1">
<div class="hsContainer">
<div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-1 h2">
<h2>Mac Vs. Windows</h2>
<p>Which is better? Which should you choose?</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Here is our main.css:
body {
margin: 0;
}
.mac_header {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
/* CSS */
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
opacity: 0;
}
.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center;
}
.hsContent h2,
.copy h2 {
color: #ffffff;
font-size: 45px;
line-height: 48px;
margin-bottom: 12px;
}
.hsContent p {
width: 400px;
margin: 0 auto;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {
background-image:url('../img/computers-1227142.jpg');
height: 733px;}
The issue is we can see the block for the text when we inspect the page in Chrome, but it is not displaying the text over the image. All we see is the outline of the div where it is located. We have researched how to get this working and also followed the tutorial correctly. Also we have compared our code to the tutorial and can't see where the disconnect is. Any ideas? At this point a solution that works instead of what is in the tutorial will be fine as well.
I was looking for some help in regards to media queries. This is the first time I am using this on a site, but it doesn't seem to work. This is also the first time I am changing my html4 code to html5, not sure if that's where the problem lies.
My HTML Code:
<!doctype html> <!-- html5 doctype -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- line added to for responsive layout -->
<title>Dummy Site</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="wrapper">
<header></header>
<div id="spacer1"></div>
<div id="banner"></div>
<div id="range"></div>
<div id="spacer2"></div>
<div id="cols"></div>
<div id="spacer3"></div>
<footer></footer>
</div>
</div>
</body>
</html>
My CSS:
body {
margin:0 auto;
background:#f5f3ef;
}
a {
font-family: 'Arial';
font-size: 12px;
color: #66308f;
text-decoration:none;
font-weight:bold;
}
#container {
margin: 0 auto;
height: 1264px;
width: 100%;
}
#wrapper {
margin: 0 auto;
height: 1264px;
width: 893px;
background-color:#0CF;
}
header {
margin:0 auto;
height: 171px;
width: 883px;
}
#spacer1 {
height:59px;
}
#banner {
margin:0 auto;
width: 883px;
height: 439px;
background:url(z_imgs/banner.jpg) no-repeat;
}
#range {
margin: 0 auto;
height: 246px;
width: 883px;
}
#spacer2 {
height:24px;
}
#cols {
margin: 0 auto;
height:188px;
width:883px;
}
#spacer3 {
height:39px;
}
footer {
margin: 0 auto;
height:98px;
width:883px;
}
<!-- MEDIA QUERIES -->
#media (max-width: 850px) {
#wrapper {
background-color: red;
}
}
When I resize the browser to below 850px the color still stays the same and doesn't change to red.
It does not work since you are using HTML comments inside CSS code which leads to syntax error and browser not recognizing the code. Remove the comment or modify it from <!-- --> to /* */ and it works.
body {
margin: 0 auto;
background: #f5f3ef;
}
a {
font-family: 'Arial';
font-size: 12px;
color: #66308f;
text-decoration: none;
font-weight: bold;
}
#container {
margin: 0 auto;
height: 1264px;
width: 100%;
}
#wrapper {
margin: 0 auto;
height: 1264px;
width: 893px;
background-color: #0CF;
}
header {
margin: 0 auto;
height: 171px;
width: 883px;
}
#spacer1 {
height: 59px;
}
#banner {
margin: 0 auto;
width: 883px;
height: 439px;
background: url(z_imgs/banner.jpg) no-repeat;
}
#range {
margin: 0 auto;
height: 246px;
width: 883px;
}
#spacer2 {
height: 24px;
}
#cols {
margin: 0 auto;
height: 188px;
width: 883px;
}
#spacer3 {
height: 39px;
}
footer {
margin: 0 auto;
height: 98px;
width: 883px;
}
/* Media Queries */
#media (max-width: 850px) {
#wrapper {
background-color: red;
}
}
<!doctype html>
<!-- html5 doctype -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- line added to for responsive layout -->
<title>Dummy Site</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="wrapper">
<header></header>
<div id="spacer1"></div>
<div id="banner"></div>
<div id="range"></div>
<div id="spacer2"></div>
<div id="cols"></div>
<div id="spacer3"></div>
<footer></footer>
</div>
</div>
</body>
</html>