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
Related
I'm trying to replicate a snack bar box in css to practice some things I've learned in a tutorial. I have two div items inside another div ("10" and "bars") that I'm trying to get to stack. But they just sit next to each other.
Here is my code:
/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/
/*GLOBAL STYLE
------------------------------*/
body {
background: #769A30;
}
#font-face {
font-family: 'Akzidenz';
src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}
h1, h2 {
color: #F0CD92;
font-family: 'Akzidenz';
}
/*HEADER
------------------------------*/
.headerSection {
text-align: center;
background: #612D22;
margin: 0px;
padding: 0px;
height: 100px;
}
.headerDiv {
display: inline-block;
text-align: center;
background: red;
height: 100px;
width: 100px;
line-height: 100px;
}
#middleDiv {
display: inline-block;
}
.middleSubDiv {
text-align: center;
display: inline-block;
background: #E63A3E;
height: 50px;
width: 100px;
line-height: 50px;
}
.topH1 {
margin: 0px;
padding: 0px;
}
.topH2 {
margin: 0px;
padding: 0px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Larabar | Apple Pie</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="headerSection"><!--
--><div class="headerDiv"><!--
---><h1 class="topH1">value<h1><!--
--></div><!--
--><div id="middleDiv"><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">10<h2><!--
---></div><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class="headerDiv"><!--
--><h1 class="topH1">pack<h1><!--
--></div><!--
--></div>
<footer>
</footer>
</body>
</html>
If I remove "display: inline-block;" from the middleSubDiv class (the two divs that are supposed to stack) they DO stack correctly, but then the divs right next to them are pushed down. Can someone help me understand why this is? Here is a picture of what I'm talking about
Thank you, any help is greatly appreciated!
Remove the display: inline-block; from the .middleSubDiv and add vertical-align: bottom; to the .headerDiv.
/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/
/*GLOBAL STYLE
------------------------------*/
body {
background: #769A30;
}
#font-face {
font-family: 'Akzidenz';
src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}
h1, h2 {
color: #F0CD92;
font-family: 'Akzidenz';
}
/*HEADER
------------------------------*/
.headerSection {
text-align: center;
background: #612D22;
margin: 0px;
padding: 0px;
height: 100px;
}
.headerDiv {
display: inline-block;
text-align: center;
background: red;
height: 100px;
width: 100px;
line-height: 100px;
vertical-align: bottom;
}
#middleDiv {
display: inline-block;
}
.middleSubDiv {
text-align: center;
/* display: inline-block;*/
background: #E63A3E;
height: 50px;
width: 100px;
line-height: 50px;
}
.topH1 {
margin: 0px;
padding: 0px;
}
.topH2 {
margin: 0px;
padding: 0px;
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Larabar | Apple Pie</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="headerSection"><!--
--><div class="headerDiv"><!--
---><h1 class="topH1">value<h1><!--
--></div><!--
--><div id="middleDiv"><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">10<h2><!--
---></div><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class="headerDiv"><!--
--><h1 class="topH1">pack<h1><!--
--></div><!--
--></div>
<footer>
</footer>
</body>
</html>
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 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
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>
I have a render problem(no render) of a core-list element when my custom element is in core-animated-pages
here is a jsfiddle when it works( grey list) ==> album-grid outside core-animated-pages
http://jsfiddle.net/flagadajones/yq30u78d/
here is a jsfiddle when id doesn't works( no grey list) ==> album-grid inside core-animated-pages
http://jsfiddle.net/flagadajones/m87sd0x3/2//
could you help me thanks
Here is my code:
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js">
</script>
<link href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html" rel="import">
<link href="https://www.polymer-project.org/components/core-icons/core-icons.html" rel="import">
<link href="https://www.polymer-project.org/components/core-icon-button/core-icon-button.html" rel="import">
<link href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html" rel="import">
<link href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html" rel="import">
<link href="https://www.polymer-project.org/components/core-list/core-list.html" rel="import" >
<style>
html, body {
margin: 0;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
remote-app{
display: block;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body fit>
<remote-app ></remote-app>
<polymer-element name="album-detail" attributes="album" layout vertical>
<template>
<style>
#details {
width: 740px;
margin: auto;
height: 100%;
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.6);
poosition:relative;
}
.mycard {
height: 540px;
border-radius: 3px;
text-align: start;
overflow: hidden;
background: #fff;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card-left {
width: 200px;
height: 200px;
background-color:blue;
}
.btn{
background-color:red;
height:63px;
}
.title{
background-color:yellow;
color:black;
}
.info{
height:200px
}
.item{
height:48px;
color:black;
background-color:grey;
}
</style>
<section id="details" class="details" >
<div class="mycard " layout vertical>
<div layout horizontal>
<div class="card-left" ></div>
<div flex auto-horizontal layout vertical class="info">
<div layout vertical flex class="title">
<div flex auto>title</div>
<div flex auto>title2</div>
</div>
<div layout horizontal >
<a flex class="btn">aaa</a>
<a flex class="btn">bbb</a>
<a flex class="btn">ccc</a>
</div>
</div>
</div>
<core-list id="list3" data="{{album.pistes}}" height="48" flex>
<template>
<div layout horizontal class="item" center>
<div>{{index}} toto {{model.name}}</div>
</div>
</template>
</core-list>
</div>
</section>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
<polymer-element name="remote-app" layout vertical>
<template>
<style>
[drawer] {
background-color: #B99588;
border-right: 1px solid #ccc;
}
[main] {
background-color: #4F7DC9;
height:100%;
}
:host {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.album-grid {
display: block;
height: 100%;
width: 100%;
margin: 0 auto;
}
#pages {
display: block;
height: 100%;
margin: 0 auto;
}
.item{
height:48px;
color:black;
background-color:grey;
}
</style>
<core-drawer-panel>
<div drawer>
</div>
<div main>
<album-detail album="{{ele}}" flex/>
<!--core-animated-pages id="pages" selected="0" >
<album-detail album="{{ele}}" />
</core-animated-pages-->
</div>
</core-drawer-panel>
</template>
<script>
Polymer({
ele:{pistes:[{name:"1"},{name:"2"},{name:"3"},{name:"4"}]}
}
);
</script>
</polymer-element>
Kevin Schaaf has helped me fix this issue. Please see this thread.
Note that you will first need to get the latest version of Polymer (currently 5.2) from bower. Then go to core-animated-pages.html and find this piece of code -
if (!oldItem) {
this.applySelection(this.selectedItem, true);
return;
}
Now add this.async(this.notifyResize); after applySelection -
if (!oldItem) {
this.applySelection(this.selectedItem, true);
this.async(this.notifyResize);
return;
}
That's it! Your code should be working without calling updateSize or any other tricks.
I think after 5.2 this fix will be included into package so you don't need to do this. But for now it's just simple change that you need to make.
I was having the exact same issue with Polymer 0.5.1.
For now I switched core-animated-pages back to core-pages and it renders properly.
This isn't a 'fix' but a work around. I found that putting any text or even a <br/> tag between the core-list element and its template element, causes it to render in core-animated-pages.
Maybe that will help someone troubleshooting the problem as well.