I have issue with background for element article. I use :nth-child(n), but they do not work correctly at my localhost. When I same code place to jsfiddle all is ok.
Code at my local is following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:: Nove pokusy s Yablkem ::</title>
<link rel="stylesheet" href="/ath/css/normalize.css">
<link rel="stylesheet" href="/css/yablko.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<article>Jsem ve středě?</article>
<article>Všichni co se moc ptají se nic nedozví...</article>
<article>Marmelada</article>
<article>Sýrové kuličky || Menu</article>
</body>
</html>
CSS (yablko.css)
html, body {
height: 100%;
}
body {
padding: 1em;
margin: 0;
background: orange;
font-size: 20px;
display: flex;
align-items: center;
justify-content: baseline;
justify-content: center;
flex-direction: row;
}
article {
padding: 1.2em;
background: #336dd1;
border-radius: .8em;
margin: 5px;
}
article:nth-child(1) { background: #888; }
article:nth-child(2) { background: #ccd; }
article:nth-child(3) { background: #333; font-size: 10px; }
article:nth-child(4) { background: #aaa; font-size: 30px; }
Image from local (bad result):
Image from jsfiddle (ok result):
Can I ask for help? Thanks
Related
What I have
I have 1 parent div containing 2 div's of bg-color green and orange, I animated so that when I hover over them they get bg-color red for duration 1s, for now everything works fine.
what I need
When I hover, it nicely animates for 1s, but when I move mouse from div's it immediately comes to original styles, but I need them to take 2s to revert back to original styles when I move mouse away from that elements
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.fst--row {
width: 80rem;
height: 20rem;
display: flex;
gap: 0.7rem;
}
.fst--row>div {
width: 50%;
height: 100%;
}
.fst--row>div:nth-child(1) {
background-color: #099268;
}
.fst--row>div:nth-child(2) {
background-color: #e67700;
}
.fst--row>div:hover {
animation: hover--flex 1s forwards;
}
#keyframes hover--flex {
to {
background-color: red;
}
}
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="flexLaying.css">
</head>
<body>
<div class="fst--row">
<div></div>
<div></div>
</div>
</body>
</html>
To the best of my knowledge, you can't do this with pure HTML/CSS animations. However, you have some options!
Firstly, if it's just one property, you should consider the CSS transition property. You can set it on the element to change as transition: 1s background-color;, then specify the intended :hover style (e.g. background-color: blue;) as you normally would. CSS magic handles the rest :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.fst--row {
width: 80rem;
height: 20rem;
display: flex;
gap: 0.7rem;
}
.fst--row>div {
width: 50%;
height: 100%;
transition: 1s background-color;
}
.fst--row>div:nth-child(1) {
background-color: #099268;
}
.fst--row>div:nth-child(2) {
background-color: #e67700;
}
.fst--row>div:hover {
background-color: red;
}
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="flexLaying.css">
</head>
<body>
<div class="fst--row">
<div></div>
<div></div>
</div>
</body>
</html>
Or you can use javascript to toggle classes (Credit to https://stackoverflow.com/a/17626510/8273686), and trigger your animations that way.
$("#box1").hover(
function () {
$(this).removeClass('mouseleave').addClass('mouseover');
},
function () {
$(this).removeClass('mouseover').addClass('mouseleave');
}
);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.fst--row {
width: 80rem;
height: 20rem;
display: flex;
gap: 0.7rem;
}
.fst--row>div {
width: 50%;
height: 100%;
transition: 1s background-color;
}
.fst--row>div:nth-child(1) {
background-color: #099268;
}
.fst--row>div:nth-child(2) {
background-color: #e67700;
}
.mouseover {
animation: mouseover 1s forwards;
}
.mouseleave {
animation: mouseleave 1s forwards;
}
#keyframes mouseover {
from {
background-color: #099268;
}
to {
background-color: red;
}
}
#keyframes mouseleave {
from {
background-color: red;
}
to {
background-color: #099268;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="flexLaying.css">
</head>
<body>
<div class="fst--row">
<div id="box1"></div>
</div>
</body>
</html>
Like the question says, Is there any way to avoid the overflow x?
Many Thanks in advance
https://github.com/1GCONF/simple_social_media.git
enter image description here
#edit: found the answer:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/style.css">
<script src="main.js" async defer></script>
</head>
<body>
<section class="section">
<nav>
<div class="port_item">Nav</div>
</nav>
<div class="port">
<div class="port_item">Profile</div>
<div class="port_item">Berichten</div>
<div class="port_item">Component X</div>
<div class="port_item">Component X</div>
<div class="port_item">Component X</div>
</div>
</section>
</body>
<style>
#import url("https://fonts.googleapis.com/css2?family=Kameron:wght#400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-shadow: 0 4px 4px rgba(25, 25, 25, 0.25);
font-family: 'Kameron', serif;
font-weight: 200;
}
body .section {
display: grid;
grid-template-columns: 2fr 7fr;
justify-content: center;
align-items: center;
outline: 2px solid red;
width: 75%;
margin: 5ex auto;
}
body .section nav {
outline: 2px solid red;
}
body .section .port {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
body .section .port .port_item {
outline: 2px solid red;
height: 250px;
}
</style>
</html>
Is responsive and Looks like this:
responsive grid without queries
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'm trying to put my code on Github Pages. It shows and works, but the styling is off, I'm attaching pictures of what it looks like when I test index.html locally vs when I open up my github.io page. How do I get it to look like when I'm testing it locally?
<head>
<script src="jquery-3.1.1.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="bootstrap.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script src="examples.js" defer></script>
<!-- stylesheet -->
<link rel="stylesheet" type="text/css" href="main.scss">
</head>
My main.scss:
#utable {
background-color: #e6e6e6;
width: 75%;
margin-left: 40px;
}
input {
text-align: right;
display: block !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
width: 98% !important;
border-radius: 0 !important;
line-height: 1 !important;
}
td {
margin: 0 !important;
padding: 0 !important;
border: 0;
}
tr {
margin: 0 !important;
padding: 0 !important;
border: 0;
}
.box {
background-color: #e6e6e6;
width: 75%;
margin-left: 40px;
padding: 3px;
}
hr {
background-color: #1F5D15 !important;
color: #1F5D15 !important;
border: solid 2px #1F5D15 !important;
heigth: 1px !important;
width: 100% !important;
}
.form-control {margin:0;
display: inline-block;
}
body {
width: 95%;
margin:0;
padding-top:50px;
}
.tab {
margin-left: 40px;
}
tr.spacer {
border-bottom: 15px solid #e6e6e6;
}
#masthead {
min-height:270px;
background-color:#1F5D15;
color:#aaaacc;
}
#masthead h1 {
font-size: 55px;
line-height: 1;
}
#masthead .well {
margin-top:13%;
background-color:#FFFFFF;
border-color:#1F5D15;
}
.icon-bar {
background-color:#fff;
}
#media screen and (min-width: 768px) {
#masthead h1 {
font-size: 100px;
}
}
.navbar-bright {
background-color:#111155;
color:#fff;
}
.navbar-bright a, #masthead a, #masthead .lead {
color:#aaaacc;
}
.navbar-bright li > a:hover {
background-color:#000033;
}
.affix-top,.affix{
position: static;
}
#media (min-width: 979px) {
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix-bottom {
position: relative;
}
#sidebar.affix {
position: fixed;
top:70px;
width:228px;
}
}
#sidebar li.active {
border:0 #eee solid;
border-right-width:4px;
}
#sidebar li li.active {
border:0 #ccc solid;
border-right-width:3px;
}
#mainCol h2 {
padding-top: 55px;
margin-top: -55px;
}
The problem is your file location is wrong
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="bootstrap.min.js"></script>
You must check your location of css, js file. When you upload into server, you must correct this. It's like
<link href="https://myreponame.github.io/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://myreponame.github.io/bootstrap.min.js"></script>
or you can use an CDN
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I also encountered the same problem . I tried different methods but still the CSS was not working on GitHub Pages.
Solution: first make your complete project locally on your PC and after finishing it, create a repository and click on the option "uploading an existing file":
and then just drag and drop your whole project.
If you want to edit something on your website, then directly edit the code from GitHub dashboard. Don’t use command line for GitHub pages.
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.