I'm trying to use Stellar.js as multiple backgrounds inside of single element such as content. Anything that I've tried not working at all..
Default output look like this:
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.summer {
background-image: url(images/1.png);
}
.autumn {
background-image: url(images/2.png);
}
.winter {
background-image: url(images/3.png);
}
.spring {
background-image: url(images/4.png);
}
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
But I want it to be something like that
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
background-image: url(images/1.png), url(images/2.png), url(images/3.png), url(images/4.png);
}
<div class="photo" data-stellar-background-ratio="1.0"><div>content</div></div>
I'm quite new to this and need some help. Maybe it just couldn't work as I want?
Related
This absolutely positioned pseudo-element has a position:relative parent. We should expect its border styles to be applied, but they are not. Why?
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: #ffffff;
}
.tooltip-hard-coded {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
}
.tooltip-hard-coded::after {
position: absolute;
top: 11px;
right: 100%;
left: -9px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: red;
background-color: pink;
}
<div style="display: flex; flex-direction: column">
<div style="padding: 32px;">
<div class="tooltip">With CSS variables</div>
</div>
<div style="padding: 32px;">
<div class="tooltip-hard-coded">With hard-coded values</div>
</div>
</div>
<div class="tooltip">Hi</div>
no border with the following CSS:
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: var(--color-background);
}
when hard-coding a border color value, the pseudo-element only gets the style partially applied:
<div class="tooltip-hard-coded">With hard-coded values</div>
with hard-coded values:
<div class="tooltip-hard-coded">With hard-coded values</div>
What is the correct way to apply border styles to an absolutely positioned pseudo-element using CSS custom properties?
Tried several variations of the styles applied to pseudo-element; tried hard-coded values, tried changing display methods, etc
I have this message thread component that has a header, content and a textarea and everytime. The issue here is in mobile views, when I want to type a message the keyboard on IOS (Iphones) pushes the divs up so the header would be hidden, I don't want this behavior, for Android it doesn't behave like this. This app is using React and scss and the code is this:
<div className="message-thread-wrapper d-flex flex-column">
<div className="messages-header d-flex flex-row justify-content-between align-items-center">
<Icon
className="back-btn d-lg-none"
icon="chevron-left"
onClick={(e) => {
e.stopPropagation();
actions.closeMessage();
}}
/>
<h5 className="messages-title text-truncate">
{participant.firstname && participant.lastname ? `${participant.firstname} ${participant.lastname}` : participant.name}
</h5>
<div className="messages-header-right d-flex flex-row align-items-center">
<Icon
className="settings-btn"
icon="settings"
onClick={(e) => {
e.stopPropagation();
this.toggleDeleteMenu();
}}
/>
}
<Icon
className="close-btn-cross d-none d-lg-block"
icon="cross"
onClick={(e) => {
e.stopPropagation();
this.setState(
{isMinimized: false},
actions.closeMessage
);
}}
/>
</div>
</div>
{showDeleteMenu &&
<DeleteMenu onClick={this.archiveMessage} onClickOutside={this.toggleDeleteMenu}/>
}
{
this.renderMessages()
}
<div
className="bottom-actions d-flex flex-row flex-nowrap justify-content-between align-items-center">
<TextArea
ref={ref => this.messageInput = ref}
className="input blue d-block"
name="msgText"
placeholder="Type your message..."
.
.
.
.
autoFocus
/>
<Button
className={`send-btn circle ${IS_SAFARI ? 'safari-fix-button' : ''}`}
icon="paper-plane"
onClick={this.onSendMessage}
/>
</div>
}
</div>
and the scss file:
.message-thread-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0;
z-index: 950;
.messages-header {
padding: 19px 16px 14px 16px;
width: 100%;
flex-basis: 57px;
color: white;
pointer-events: none;
position:sticky;
.back-btn {
pointer-events: auto;
}
.close-btn-cross {
width: 18px;
height: 18px;
pointer-events: auto;
}
.settings-btn {
width: 25px;
height: 26px;
pointer-events: auto;
}
}
.delete-menu {
border-radius: 2px;
background-color: white;
position: absolute;
top: 53px;
right: 0px;
z-index: 1;
.menu-arrow {
width: 15px;
height: 15px;
position: absolute;
top: 0;
right: 0;
background: white;
border-right: none;
border-bottom: none;
}
a {
padding: 18px;
font-size: 16px;
line-height: 1.5;
text-decoration: none;
z-index: 1;
cursor: pointer;
}
}
.messages-content {
height: 100%;
padding: 16px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.dateline {
margin: 28px 0 11px 0;
line-height: 1.33;
text-align: center;
}
}
.bottom-actions {
bottom: 0;
width: 100%;
max-height: 130px;
min-height: 70px;
overflow-y: hidden;
padding: 0 0 0 24px;
background-color: white;
box-shadow: 0 -1px 3px 0 #d9dbdc;
.form-group-wrapper {
padding-top: 10px;
width: 100%;
align-self: stretch;
overflow: auto;
&.text-area-wrapper {
padding-right: 71px;
textarea {
min-height: 48px;
}
.form-bar {
display: none;
}
}
}
.button.circle {
width: 34px;
height: 34px;
padding: 9px 12px 9px 8px;
position: fixed;
right: 26px;
&.safari-fix-button {
bottom: 22px;
}
}
}
}
Note I deleted the properties that are not important for this question so it won't be too long.
This is how it currently behaves:
Iphone:
Android - Pixel 2XL:
I would appreciate if Any could help me. Thank you in advance!
Today when testing a project of mine, I found out that the mobile navigation of my website isn't show it's list items on some iOS devices.
I tested on Iphone 5 and IPad mini, and those worked,
then i tested on an Iphone 4 and a old Ipad and it didnt show the list items of my navigation. So i think it i enclosed the problem to a outdate iOS or device i guess?
I really have no idea how i should be debugging this problem without being able to use the inspect element tool i have on a desktop. I also don't really find a problem in my code.
My website url is: http://gillesvercammen.be/praniels/
if anyone could be brave enough to test this on an older iOS device, that would be awesome. Below I will put some snippets of relevant code for the bug.
Please forgive me if my code is a little messy, this is my first decent sized project.
This is my full navigation (although the problem only lies in the list items not showing when expanding the hamburger menu)
<header>
<a href="#" title="praniels logo" class="logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo van praniels">
</a>
<nav class="floatfix nav">
<div id="hamburgerknop">
<a href="#" title="praniels logo" class="mobile-logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo van praniels">
</a>
<span id="hamburger" class="fa fa-bars"></span>
</div>
<ul class="main-nav">
<li><a class="<?php if(isset($home)){ echo($home); } ?>" href="<?=$prefix?>index.php" title="naar homepage">Home</a></li>
<li><a class="<?php if(isset($overons)){echo($overons);} ?>" href="<?=$prefix?>over-ons/over-ons.php" title="naar over ons">Over Ons</a></li>
<li><a class="<?php if(isset($producten)){echo($producten);} ?>" href="<?=$prefix?>producten/producten.php" title="naar producten">Producten</a></li>
<li><a class="<?php if(isset($workshops)){echo($workshops);} ?>" href="<?=$prefix?>workshops/workshops.php" title="naar workshops pagina">Workshops</a></li>
<li><a class="<?php if(isset($klanten)){echo($klanten);} ?>" href="<?=$prefix?>klanten/klanten.php" title="naar klantenpagina">Klanten</a></li>
<li><a class="<?php if(isset($contact)){echo($contact);} ?>" href="<?=$prefix?>contact/contact.php" title="naar contactpagina">Contact</a></li>
</ul>
<ul class="icon-nav">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-google-plus"></span></li>
<li><span class="fa fa-instagram" target=_"blank"></span></li>
</ul>
<?php
if(isset($_SESSION["fldEmail"])){
?>
<span class="fa fa-lock"></span>Logout
<?php if(isset($_SESSION["admin"])) { ?>
<span class="fa fa-lock"></span>Admin
<?php } else {}}
else { ?> <span class="fa fa-unlock-alt"></span>Login <?php }
?>
</nav>
</header>
Following are some relevant CSS lines
header {
/*background-color: rgba(255,255,255,0.5);*/
position: fixed;
left: 0;
height: 120px;
top: 0;
width: 100%;
z-index: 10;
display: block;
}
.logo {
z-index: 12;
position: absolute;
left: 50px;
top: 0;
display: block;;
width: 150px;
padding-top: 10px;
}
.nav {
z-index: 11;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
}
.non-transparent
{
z-index: 11;
background-color: rgb(31,15,16) !important;
}
.main-nav {
list-style: none;
}
.mobile-logo {
display: none;
}
.nav li {
display: inline-block;
vertical-align: middle;
height: 120px;
letter-spacing: 1px;
text-transform: uppercase;
}
.nav li a {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
text-decoration: none;
display: block;
line-height: 16px;
height: 16px;
padding: 25px 10px 24px;
}
.nav li a:hover {
color: rgb(212,192,152);
}
.nav ul li .active {
color: rgb(212,192,152);
}
.icon-nav {
position: absolute;
right: 0px;
top: 0;
margin-right: 50px;
}
.icon {
display: inline-block;
zoom: 1;
vertical-align: top;
width: 44px;
height: 0;
padding-top: 44px;
overflow: hidden;
text-align: left;
white-space: nowrap;
}
.logout {
position: absolute;
right: 10px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.admingo {
position: absolute;
right: 80px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.fa-lock, .fa-unlock-alt {
margin-right: 5px;
}
.logout:hover {
border: 1px solid rgb(212,192,152);
color: rgb(212,192,152);
}
/* ================= RWD =============== */
#media screen and (min-width: 769px) {
.logo {display: block !important; }
#hamburgerknop { display: none !important; }
.nav { display: block !important; }
}
#media screen and (max-width: 768px) {
header {
height: 80px;
}
.main-nav {
display: none;
}
.expand .main-nav {
display: block;
}
#hamburgerknop {
background: rgba(31,15,16, 0.35);
padding: 8px;
text-decoration: none;
width: 100%;
z-index: 2;
height: 80px;
}
#hamburgerknop span {
margin-top: 15px;
cursor: pointer;
display: block;
padding: 3px 4px 3px;
position: relative;
color: rgb(246,246,226);
font-size: 2em;
line-height: .8;
text-align: center;
}
.nav ul {
list-style: none;
margin: 0;
width: 100%;
height: 100%;
background-color:rgb(31,15,16);
padding: 0;
}
.main-nav {
height: 0px;
}
.nav li:nth-child(1){
padding-top: 5%;
}
.nav li {
display: block;
position: relative;
font-size: 1em;
font-weight: bold;
height: 20%;
}
.nav li a {
height: initial;
display: block ;
background: none !important;
color: #fff;
text-decoration: none;
}
.nav {
clear: both;
position: fixed;
}
nav {
height: auto;
display: none;
position: fixed;
}
.expand {
display: block !important;
}
.logo {
display: none;
}
.mobile-logo {
z-index: 12;
position: absolute;
top: 0;
display: block;
margin-top: 5px;
width: 100px;
}
}
Please use below mentioned code:
.non-transparent {
background-color: #1f0f10 !important;
max-height: 100%;
overflow: auto;
z-index: 11;
}
instead
.non-transparent
{
z-index: 11;
background-color: rgb(31,15,16) !important;
}
Trying to follow this tutorial in this book, but the images supplied are not being shown on the page my /views/layouts/ads.html.erb looks like this
<!doctype HTML>
<html>
<head>
<title>Ads: <%= controller.action_name %></title>
<%= stylesheet_link_tag 'default.css' %>
</head>
<body>
<div id="wrapper">
<div id="header">
<div>
<h1>MeBay</h1>
<ul id="nav">
<li>All Ads</li>
</ul>
</div>
</div>
<div id="content">
<%= yield %>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS in /app/assets/stylesheets looks like this
html, body { height: 100%; }
body { background-color: #e6dacf; background-image: url('/images/bg.png'); background-position: top center; background-repeat: repeat-y; font-family: "Trebuchet MS", Arial, san-serif; font-size: 14px; margin: 0; padding: 0; text-align: center; }
a { color: #000; }
a:hover { background: #000; color: #e6dacf; }
div#wrapper { min-height: 100%; }
* html div#wrapper { height: 100%; }
div#header { background: url('/images/bgHeader.png'); height: 100px; padding: 8px 0 0 0; }
div#header div { margin: 0 auto; position: relative; width: 800px; }
div#header h1 { left: 0; margin: 0; position: absolute; }
div#header h1 { background: url('/images/logo.png') no-repeat; display: block; height: 0; margin: 0 auto; padding: 92px 0 0 0; overflow: hidden; width: 319px; }
ul#nav { float: right; list-style: none; margin: 0; padding: 69px 0 0 0; }
ul#nav li { background: #e6dacf; border: solid #000; border-width: 2px 2px 0 2px; float: left; margin: 0 0 0 2px; }
ul#nav a { display: block; padding: 3px 6px 0 6px; text-decoration: none; }
ul#nav a:hover { display: block; padding: 3px 6px 7px 6px; }
ul#nav a.current { padding-bottom: 8px; }
ul#nav a.current:hover { background: #e6dacf; color: #000; cursor: default; }
div#content{ margin: 0 auto; padding: 20px 0; text-align: left; width: 720px; height: 300px}
div#content img { border: 10px solid #000; float: right; margin: 18px 0 0 20px; }
div#content h2 { border: solid #999; border-width: 0 0 5px 0; font-size: 28px; margin: 0; padding: 0 0 10px 0; }
div#content p { margin: 0; padding: 4px 6px 10px 0; }
div#clearfooter { height: 110px; }
div#footer { background: url('/images/bgFooter.png'); height: 110px; margin: -110px auto 0 auto; }
and I placed the supplied images in /app/assets/images
This is how it should look, and also what it looks like for me
http://imgur.com/a/VEryr
You should debug these kinds of problems with either
Chrome Developer Tools
Firebug for Firefox
Both provide excellent support for resolving js / css related issues.
In your particular case, you need to check the Network or Net tabs in the tools to see how the CSS gets loaded. Most likely you'll see an error in loading the stylesheet.
The tool will show you the CSS path its trying to access and you can debug it from there...
I have a twitter feed on my website and i'm trying to put it in a box that has a top, a middle section that repeats as needed to accommodate text and a bottom image as well as an image below the bottom. the problem is that originally the feed was in a box that didn't repeat or anything the feed was just on top of the box, but now i can't get the box set up right or the feed to do it's thing. here is my code:
#twitter_update_list {
overflow: hidden;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#twitter_update_list li {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
list-style: none;
}
#twitter_update_list li a {
color:#f7f6e7;
text-decoration: none;
}
#twitter_update_list li a:hover {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #f7f6e7;
}
.twitter_top {
position:absolute;
left:632px;
top: 39px;
width: 333px;
height: 27px;
background:url(twittertop.png);
}
.twitter_mid {
width: 333px;
background:url(twittermiddle.png);
background-repeat:repeat-y;
padding: 0 15px;
}
.twitter_bot {
width: 333px;
height: 27px;
background:url(twitterbottom.png);
background-repeat:no-repeat;
margin-bottom: 0px;
}
.twitter_whale {
width: 140px;
height: 67px;
left: 900px;
background-image: url(Layer-6.png) no-repeat;
position: absolute;
left: 9px;
top: 9px;
line-height: 13px;
}
<div class="twitter_top"></div>
<div class="twitter_mid">
<ul id="twitter_update_list"></ul>
</div>
<div class="twitter_bot"></div>
<div class="twitter_whale">
<div id="twitter_div"><ul id="twitter_update_list"><li></li></ul></div>
(update list i'm not putting in here because it's just the js)
</div>
<div id="twitter_box">
<div id="twitter_top">
</div>
<div id="twitter_middle">
</div>
<div id="twitter_bottom">
</div>
</div>
I would think it would make more sense to contain them all in one div, from here you can set your styles, since you want the middle part to expand leave the height dynamic.