The first pseudo class in the styled.q isn't working. It will not appear on the screen. If I copy and paste it so that ::before is listed first it doesn't work. If I list the first pseudo class a second time it works.
const ResearchingRyan = styled.div`
height: 100vw;
width: 100vw;
background-image:url(${phonePic});
background-repeat: no-repeat;
background-position: left;
background-size: cover;
display:flex;
flex-direction:column;
justify-content: flex-end;
align-items: center;
#media screen and (min-width: 525px) {
background-image:url(${tabletPic});
height: 500px;
width: 500px;
}
#media screen and (min-width: 1100px) {
background-image:url(${desktopPic});
height: 500px;
width: 500px;
}
`
const QuoteP = styled.p `
background-color:${dark};
color:${bgAlt};
padding:1rem
`
const QuoteQ=styled.q`
quotes: "\201C", "\201D";
&::after {
content: close-quote;
font-weight: bold;
font-size: 36px;
color:${bgAlt};
}
&::before {
content: open-quote;
font-weight: bold;
font-size: 36px;
color:${bgAlt};
}
`;
In "QuoteQ" component you need to correct "quotes" property. You write is correct, but sometimes in styled components meet especially work with unicode in something properties, example is "quotes".
Because of this, styles were not applied to pseudo-elements. Because style processing stopped at the quotes property. Correct the quotes and everything will work.
Below represent code with correct "quotes" property. And link to codesandbox with demo with this code.
https://codesandbox.io/s/styled-components-forked-1r1qc5
Also link to github issue with like problem.
https://github.com/styled-components/styled-components/issues/3413
const QuoteQ = styled.q`
quotes: "\\201c" "\\201d";
&::after {
content: close-quote;
font-weight: bold;
font-size: 36px;
color: blue;
}
&::before {
content: open-quote;
font-weight: bold;
font-size: 36px;
color: red;
}
`;
I need some help with some overflowing text on my webpage that I am designing for school. I'm two weeks into my HTML/CSS webdesign class, so I am unable to use some of the more advanced coding. I am just curious as to why the text on the right hand side of my website(I'll post a link to jsfiddle in the comments because I cannot figure out how to add it in this original post.) doesn't want to stay on its side of the screen. Any help?
here are my codes(both CCS and HMTL):
#charset "utf-8";
/* temporary background color for testing purposes */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
el,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* My Styles */
body {
font-family: Arial, Hevetical, sans-serif;
font-size: 100%;
background-color: blue;
width: 80% margin: 0 auto;
}
header {
padding: 3em;
height: 330px;
margin: 0;
background-color: lightblue;
position: relative;
}
nav {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 1em;
}
nav a {
padding: .25em 5em;
background-color: #235B8A;
}
section {
padding: 3em;
}
footer {
padding: 3em;
background-color: lightblue;
text-align: center;
}
aside {
padding: 3em;
background-color: lightgrey;
}
h1,
h2,
h3 {
padding-bottom: 1em;
}
h1 {
font-size: 250%;
}
h1 a {
text-decoration: none;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 80%;
}
.container {
overflow: hidden;
}
.col-1-3 {
width: 32%;
float: left;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
.col-2-3 {
width: 65% float: left;
}
.cleafix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
clear: both;
}
<title>Crystal Coast Theater</title>
<link href="CSS/css.css" rel="stylesheet" type="text/css">
<link href="../CSS/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header style="text-align:center">
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html"><h1> Crystal Coast Theater.
</h1></a>
<nav style="text-align:center">
Home
Events
Tickets
Contact us
</nav>
</header>
<div class="container cleatfix">
<aside class="col-1-3">
<h2>Upcoming events:</h2>
<p><span class="emphasis">May 22 – June 8:</span> Daring Last Days of Blackbeard</p>
<p><span class="emphasis">June 11 – June 29:</span> Ghost Stories of the Crystal Coast</p>
<p><span class="emphasis">July 3 – July 20:</span> Beach Rental</p>
<p><span class="emphasis">July 23 – August 10:</span> The Siege of Fort Macon</p>
</aside>
<section style="text-align:center" class="col-2-3">
<h2>Your Down East Playhouse</h2>
<p>The Crystal Coast Theater is located in downtown Moorehead City. It features local talent performing in both renowned plays and in works written by some of the Crystal Coast’s own talented playwrights.</p>
<br>
<p>The Crystal Coast Theater also offers educational performances that bring to life the history and culture of the 85 miles of coastline that are favorite destinations for tourists.</p>
<br>
<p>Check out our upcoming events and make plans to come and see one of our shows.</p>
</section>
</div>
<footer style="text-align:center">
<small>Copyright © 2015 Paul Bernhardt Enterprises</small>
</footer>
</body>
</html>
-dark_nemesis
This will fix it:
section {
overflow: hidden;
padding: 3em;
position: relative;
}
Greetz
I have a simple page here:
http://www.ttmt.org.uk/color/
The center blocks color is saved as a variable in sass
The color of the blocks either side are created with sass's lighten and darken.
Is it possible to display the actual hex number of these lighter and darker colors that sass has created.
The color's hex are displayed in the output css but I'd like to be able to do it dynamically and display the hex color in the block.
I have the colors in scss file
$base-blue: #267EC8;
// Blue
.at-blue{
background-color: $base-blue;
}
.at-blue-lighter{
background-color: lighten($base-blue, 20%);
}
.at-blue-light{
background-color: lighten($base-blue, 10%);
}
.at-blue-dark{
background-color: darken($base-blue, 10%);
}
.at-blue-darker{
background-color: darken($base-blue, 20%);
}
Then I'm using the class name in the html
<div class="my_Box at-blue-lighter" >.at-blue-lighter<span></span></div>
<div class="my_Box at-blue-light" >.at-blue-light<span></span></div>
<div class="my_Box at-blue" >.at-blue <span></span></div>
<div class="my_Box at-blue-dark" >.at-blue-dark<span></span></div>
<div class="my_Box at-blue-darker" >.at-blue-darker<span></span></div>
And styling the box in separate scss file
.my_Box{
text-align: center;
height: 120px;
float: left;
padding: 10px;
margin: 0 30px 0 0;
width: 120px;
span{
display: block;
font-size: 1.2em;
margin: 10px 0 0 0;
}
}
You can use content to show it : http://jsfiddle.net/A9rML/
$color : rgb(38, 126, 200);
div{
background-color: $color;
&:after{
content: "#{$color}";
font-size: 42px;
color: white;
}
width: 200px;
height: 200px;
}
I am really confused... I have this code:
a {
float: left;
padding: 5px 20px;
}
a:link {
text-decoration: none;
color: #008B45;
}
a:hover {
color: #00FF00;
font-weight: bold;
}
a:visited {
color: #EE9A00;
}
but the link after I visited it the a links are not changin the color according to a:hover... why?
Thank you
I don't know exactly why but I guess it's because the attribute :visited is preferred to :hover. In order to make this work you have to add "!important" at the end of the color statement. Like this:
a {
float: left;
padding: 5px 20px;
}
a:link {
text-decoration: none;
color: #008B45;
}
a:hover {
color: #00FF00 !important;
font-weight: bold;
}
a:visited {
color: #EE9A00;
}
Hi I am teaching myself some backbone from tutorials, and I want to create a table like display element using spans.
So I added a width element into my span in the template. (I know it isn't the best place to put it, but it should take priority over stylesheet properties, and is just to get an idea during development).
<script type="text/template" id="loadedwith-template">
<span style="width:100" class="library"><%= library.name %></span>
<input style="width:100" class='input' type="text" />
<button class="delete_lw" >delete</button>
</script>
However when I look at it in the browser, the element shows up as before without the width setting applied.
"Inspect element" in Chrome shows the width property, but is disabled (has a line like html strikethrough on it). This is the last thing shown in element styles before the computed styles section.
There is another stylesheet referencing the span. Is there anything causing the width to be disabled? The other stylesheet is as follows (borrowed from the backbone tutorial). (The span is inside a list).
a { color: #2929FF; }
a:visited { color: #777; }
a:hover {
color: #8F8FFF;
text-decoration: none;
}
body, button { font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {
background: #FFF;
color: #444;
padding: 25px 50px;
}
button, .delete, .swap {
border: 0;
border-radius: 5px;
color: #FFF;
cursor: pointer;
font-weight: bold;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
button:hover, .delete:hover, .swap:hover { opacity: 1; }
button {
background: #2929FF;
font-size: 0.75em;
padding: 7px 12px;
opacity: .75;
}
h1 {
font-size: 1.25em;
letter-spacing: -0.5px;
}
p {
color: #777;
font: italic 0.75em/1.2 "Georgia", Palatino, "Times New Roman", Times, serif;
}
span {
display: inline-block;
margin-right: 10px;
}
ul { padding-left: 0; }
.delete, .swap {
font-size: 0.625em;
opacity: .25;
padding: 3px 10px;
position: relative;
top: -3px;
}
.delete { background: #FF29D0; }
.swap { background: #FF6529; }
You need to specify a unit of measurement
Specifying CSS units is a requirement for non-zero values. Browsers may try to guess what you meant, but it would still be a broken stylesheet according to the standard.
I.e. there is no "default unit" in CSS, it's just that the browser may try to help you out, although it may as well just ignore your statement that doesn't specify units as an invalid one.
Try style="width:100px"
You should specify a unit, like px:
style="width: 100px"