Put png in content in pseudoclass ::before.
Tryed every path, GitHub pages wont show it.
https://github.com/tacticSugar/Resume - Repo
https://tacticsugar.github.io/Resume/ - Page
.work h3 {
padding-left: 5rem;
position: relative;
}
.work h3::before {
content: url(https://tacticsugar.github.io/Resume/arrow.png);
display: inline-block;
width: 0;
height: 0;
transform: scale(.3);
position: absolute;
top: 0;
left: -1.5rem;
}
It should work in the context of GitHub Pages, since rosmeltd/css_pseudoclases does use pseudo-elements in his GitHub pages site rosmeltd.github.io/css_pseudoclases, with the CSS:
/* ============ CHALLENGE 7 ============ */
.challenge--7 .challenge__code p::before,
.challenge--7 .challenge__code p::after {
content: url(img/smiley.gif);
vertical-align: middle;
}
For:
<section class="challenge challenge--7">
<h4 class="challenge__title">
<b>VII.</b> Inserte la imagen "smiley.gif" antes y después de cualquier elemento <p>, utilizando los pseudoelementos ::before y ::after.
</h4>
<div class="challenge__code">
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
</section>
In your case CSSLint mentions:
Disallow qualified headings
Heading (h3) should not be qualified.
.work h3::before {
For testing, try h3::before instead of .work h3::before.
Related
I am trying to show an edit icon on a cells hover state, using font awesome.
How can make the class name unique so I can target it with css for each row?
import {Icon} from 'react-fa'
if(this.props.day.achievements) {
listItems = this.props.day.achievements.map((achievement) => (
<div className="cell" key={achievement + "_achievements"}>
{achievement}
<div className="edit">
<a href="#">
<Icon name="pencil-square" className="edit" />
</a>
</div>
</div>
))
}
I am using the following css:
.cell:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
How can I display the icon for each cell?
Since you're using position:absolute on the edit wrapper, try adding position:relative to the .cell. I suspect your icons ARE showing but they're all floating up to the top overlapping with each other.
Hey I create Ember application , And I try to set Sticky Footer.
I try to do this by this tutorial Sticky Footer On CSS-Tricks , Cause it's work for me once.
But with Ember its dosen't work
My css:
.mainFooter {
height:100px;
color:white;
background-color: #0c2635;
text-align:center;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
}
.wrapper:after {
content: "";
display: block;
}
.mainFooter, .wrapper:after {
height: 100px;
}
My HTML:
<footer class="mainFooter">
SOME TEXT
</footer>
As I said, it's dosent work.
I watch the source code via the Inspector and I saw that Ember added its own wrapper to content the I put in the application.hbs file, this wrapper have a class named ember-view so I try to do:
.ember-view {
min-height: 100%;
}
But it's dosent work either, the footer displayed in the middle of the page.
Someone maybe try this and successid?
I would like to know about a solution to this problem.
I don't know how to fake an Ember app in jsfiddle/codeopen so I upload the app to my server, url: http://drawyourgif.pe.hu/dist/
EDIT
According to the solution that kumkanillam sugest I did so:
Application.hbs:
{{outlet "modal"}}
{{partial "header"}}
<div id="gif" class="wrapper">
{{outlet}}
</div>
{{partial "footer"}}
app.js
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
rootElement: '#gif',
Resolver
});
And I get this error in the console:
ember.debug.js:43272Uncaught TypeError: Cannot read property 'tagName' of undefined
What I did wrong?
.ember-view will be included for all ember component by default so it's not good to apply css property for this class.
there may be many ways but the below should help.
You can wrap your application.hbs to render inside your page-wrap div.
for this you need to include the below line in
index.html
<div id="app-name" class="wrapper">
{{content-for "body"}}
</div>
application.hbs
<h1> Content </h1>
{{outlet}}
<div id="footer">
<p>I'm the Sticky Footer. inside application.hbs</p>
</div>
Configure rootElement in app.js. that will force entire app to include it in app-name div.
app.js
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
rootElement: '#app-name',
Resolver
});
app.css
#wrapper {
min-height: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 50px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
}
Final Update:
You don't need to change anything in app.js. just look at the sample twiddle. I think this will help you
SAMPLE TWIDDLE
Here is a solution that uses flexbox. You may not want to use flexbox because you're unfamiliar with it, but I'll submit this answer for later google searches.
Here's a codepen with very little content in the main body: http://codepen.io/anon/pen/KgXgjV
Here's the same css with much more content in the main area: http://codepen.io/anon/pen/dpVpBK
Here is an example of why position: absolute doesn't work: https://ember-twiddle.com/f620502b8172f4181c9d58503e02e39c?openFiles=templates.application.hbs%2C
HTML
<html>
<body>
<div id="root" class="ember-application">
<div id="ember332" class="ember-view">
<div class='main-content'>
<h1>Welcome to Ember Twiddle</h1>
<br />
<p>
this page has very little content
</p>
</div>
<div id="footer">
<p>I'm the Sticky Footer. inside application.hbs</p>
</div>
</div>
</div>
</body>
</html>
CSS
/* this is just to reset codepen */
/* probably not necessary on ember */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* end reset */
html, body, #root {
height: 100%;
}
.ember-view {
display: flex;
flex-direction: column;
min-height: 100vh;
background: lightblue;
}
.main-content {
flex: 1;
}
#footer {
width: 100%;
height: 50px;
background-color: grey;
}
I am trying to modify the z-index of the http://tympanus.net/Development/ScatteredPolaroidsGallery/ . The demo I am refering to is in the third / final example shown.
When the polaroid is flipped I am unable to select the text in chrome or Safari, but I can in firefox.
Chrome and Firefox
I just need a way to be able to select the text in chrome/safari. This way I can then be able to add hyperlinks and call to action buttons that are currently hidden behind the z-index.
The div in question is 'photostack-back'
HTML
<section id="photostack-1" class="photostack photostack-start">
<div>
<!-- Polaroid with backside -->
<figure>
<a href="http://goo.gl/fhwlSP" class="photostack-img">
<img src="img/2.jpg" alt="img02"/>
</a>
<figcaption>
<h2 class="photostack-title">Happy Days</h2>
<!-- optional backside -->
<div class="photostack-back">
<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
</div>
</figcaption>
</figure>
</div>
</section
CSS
.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
}
Here is the tutorial Scattered Polaroids Gallery
I figured out that this was not a z-index issue but a backface-visibility issue.
I used veinjs to inject the following code in photostack.js
vein.inject('figure', {'backface-visibility' : 'visible !important'});
and the css
figcaption {
backface-visibility: hidden;
}
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
I am programing a webpage with html and CSS. My pseudo class :hover stopped working on my webpage, but :focus still works. Hover was working fine, and then I made an unrelated edit (added an image to one of my blocks), and noticed it had stoped working. I deleated my last change and it still did not work.
I have checked everything and ran both the html and css through validators and there are no errors other than something about using character encoding, but I know it worked fine without that. It really makes no sense!
I will show my page and my code. Keep in mind this is my very first webpage, I know that I did not optimize my background images properly, and may have some unnecessary divs, but I feel pretty good about it considering a week ago I did not know what html was. I have heavily commented and organised my CSS, you can find my hover code near the top along with the rest of the none classes/ID's. The hover link is the only link on the webpage on the sidebar.
http://www.adrianhoulewebprojects.com/HomePage.html
Here is my HTML
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
Here is my CSS
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a :hover, :focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thank you for any help.
CSS is very touchy about putting extra spaces in it. Combine a with :hover like this:
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
Also want to make it a:focus unless you want every element to be affected.
Remove the space between a and :hover
a:hover{
background-color: yellow;
text-decoration: none;
font-size: larger;
}