I'm trying to create the image in the link with only html and css. There are a number of elements that would need to "stack" on top of one another.
I am having a difficult time understanding inheritance, nesting, etc. Here's the code I've written so far:
.heart {
position: relative;
margin-top: 20px;
background-color: #000000;
opacity: .8;
width: 65px;
height: 30px;
border-radius: 15px;
display: inline;
}
.box {
margin: 75px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
display: flex;
}
.thumbnail_image {
position: absolute;
float: left;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
top: 60px;
left: 200px;
right: 100px;
width: 400px;
height: 338px;
position: relative;
display: flex;
}
h1 {
font-color: #ffffff !important;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
<div class="box">
<div class="heart">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
</div>
My concern is how to properly place the heart dialog, the text container, and the image overlay. I seem to be misunderstanding proper inheritance syntax or structure.
Use position:absolute; on heart dialog, text container, and image overlay elements and then position them correctly with the left and right properties.
Absolute positioning and z-index are the key words involved in stacking images with HTML and CSS.
I went ahead and mocked up your image with some html/css to give you an idea of implementation.
Z-index is not relevant in this particular example since you only require one layer above the base, which is automatically given to you with absolute positioning, however if you had multiple layers you would need to set the z-index to a number value where lower numbered z-indexes appear at the bottom and higher z-indexes appear at the top.
Here's my code, hope it helps:
body {
background-color: grey;
}
.container {
position:fixed;
height: 500px;
width: 700px;
background-image: url(http://i.stack.imgur.com/MS8X8.png);
background-position: 46% 52%;
background-size: 150%
}
.hearts {
position: absolute;
background-color: rgba(149, 165, 166,.5);
color: white;
right: 40px;
top: 15px;
padding: 15px 25px 15px 25px;
border-radius: 15px
}
.blue {
width: 550px;
height: 500px;
background-color: rgb(102,173,255);
float: right;
}
h1, h5 {
position: absolute;
font-family: sans-serif;
color: white;
text-transform: uppercase;
}
#quote {
left: 200px;
top: 30px;
font-size: 60px;
}
#attr {
left: 200px;
top: 450px;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "main.css">
</head>
<body>
<div class = "container">
<div class = "hearts">423</div>
<div class = "blue">
<h1 id = "quote">don't you <br> think that <br> if i were </br>wrong,<br> i'd know it?</h1>
<h5 id = "attr">-Sheldon Cooper</h5>
</div>
</div>
</body>
</html>
Understanding the stacking order
In your case, the natural stacking order will do the job; this is nicely explained over on the MDN. The main thing to understand is that elements will overlap those that come before them in the markup. This is better explained with a simple example:
div {
position: absolute;
background: red;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.two {
background: blue;
top: 10px;
left: 20px;
}
.three {
background: green;
top: 20px;
left: 40px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
With that out of the way...
Let's make these!
Feel free to jump to the complete example at the end of this answer!
Want to use some pedantic semantics?
A <blockquote> element to wrap everything together in a semantic container.
A <nav> element to contain the back and forward navigation
A <cite> element that contains the name of the person quoted
Our markup now looks like this:
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<a href="#" class="love-counter">
<3 123
</a>
<nav>
Previous
Next
</nav>
</blockquote>
The CSS
Main background image and color
These can be placed as a background on the blockquote itself. You can use background-size to ensure that the image always has the same dimensions. (It will obviously distort images which have an incorrect size)
blockquote {
background: #18a0ff url(image-url) no-repeat;
background-size: 170px 490px;
}
Add the transparent grey background and quotation character
This can be added with a absolutely positioned before pseudo-element of blockquote. The element is stretched out with left / right / bottom along with a width that matches the image. The transparent grey overlay and transparent text is provided by rgba color.
blockquote:before {
content: '\201C';
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-top: 30px;
font-size: 2.4em;
text-align: center;
background: rgba(0,0,0,0.7);
width: 170px;
color: rgba(255,255,255,0.3);
}
Align the main quote text along with its citation
In order to incorporate smaller quotes, it could be more visually pleasing to vertically center the main text. We can use the display: flex property along with justify-content to easily achieve this; the flex-direction: column property stacks the main quote over the top of the citation. The blockquote is also given left and right padding to appropriately position it horizontally.
blockquote {
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
}
Position the back / forward navigation and love counter
These are easily located with position: absolute along with the appropriate left / right / bottom / top properties. They will look something like this:
.love-counter {
position: absolute;
right: 20px;
top: 20px;
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
}
Complete example
Compatibility: IE 11+ and all modern browsers.
You might consider a javascript method to shrink the font size for larger quotes.
#import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
blockquote {
background: #18a0ff url(http://i.stack.imgur.com/e3nDc.jpg) no-repeat;
background-size: 170px 490px;
height: 490px;
color: #FFF;
font-family: 'Passion One', cursive;
font-size: 4.2em;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
font-weight: 400;
line-height: 1;
width: 650px;
text-transform: uppercase;
}
blockquote p {
margin: 0;
margin-top: 0.75em;
}
cite {
font-size: 0.25em;
font-weight: 400;
margin-top: 2em;
}
cite:before {
content: '\2014 '
}
blockquote:before {
content: '\201C';
font-size: 2.4em;
padding-top: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
width: 170px;
color: rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.love-counter {
color: #FFF;
text-decoration: none;
font-size: 0.2em;
position: absolute;
right: 20px;
top: 20px;
font-family: helvetica;
font-weight: bold;
background: rgba(0, 0, 0, 0.2);
padding: 0 10px;
border-radius: 10px;
height: 30px;
line-height: 30px;
min-width: 60px
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
font-size: 0;
width: 170px;
text-align: center;
}
nav a:before,
nav a:after {
font-size: 36px;
width: 50%;
display: inline-block;
color: #FFF;
}
nav a:first-child:before {
content: '<';
}
nav a:last-child:after {
content: '>';
}
.x-large {
background-image: url(http://i.stack.imgur.com/qWm5m.jpg);
}
.x-large p {
font-size: 0.62em;
}
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
<h2>Larger quote</h2>
<blockquote class="x-large">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
<cite>Albert Einstein</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
heart_button:hover,
heart_button:active,
heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 30px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 22px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
</div>
</body>
<footer>
<div>
<h6>A Project by Charles Bateman</h6>
</div>
</footer>
Related
I'm trying to right align a div on my navigation bar for my website. The goal is to align the div so it's always aligned in the same place towards the right of the webpage. I've tried margins, CSS positioning, and changing the div to display: inline-block;
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
h1,
h2,
h3,
h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
text-align: right;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p,
ul,
ol,
li,
select {
font-family: 'Poppins', sans-serif;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
display: inline-block;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color: rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left: auto;
margin-right: auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
#media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}
<div class="nav-bar">
<nav class="desktop-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
<nav class="mobile-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="hamburger-menu" id="mobile-menu-enter">
<div class="line"></div><br>
<div class="line"></div><br>
<div class="line"></div>
</button>
</div>
</nav>
</div>
You can use float: right;.
You can also find other solutions here How do I right align div elements?
You could use position absolute to remove the element from the DOM and move your element anywhere relative to the first containing parent element up the DOM tree that has a position set. Then use positioning props like top, right, bottom and/or left to move the element on the page.
See MDN on position for more info
:root {
--padding: .5em;
}
/* This is the parent element, set its position to relative
so the right-div will be positioneed relative to it */
#parent {
background: red;
padding: .5em;
position: relative;
}
#first-div {
background: yellow;
padding: var(--padding);
}
p {
padding: var(--padding);
background: white;
}
/* set this divs position to absolute so its top, left, bottom, right
positioning props will be relative to its closest parent set to relative */
#right-div {
position: absolute;
right: calc(var(--padding) + 0px);
top: calc(var(--padding) + 0px);
background: green;
color: white;
padding: var(--padding);
<div id="parent">
<div id="first-div">This is the first div</div>
<p>This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a
paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph</p>
<div id="right-div">This is the right div</div>
</div>
I ended up setting the position to absolute and using vw as the property for the left attribute.
.hamburger-menu {
background-color: transparent;
border: none;
position: absolute;
left: 80vw;
margin-right: 5vw;
}
my SASS style is not being applied when I nest them. I don't understand why, they work perfectly when not nested. I've never encountered this issue before and it seems strange that it would not apply the styling this one time. It also works when I remove the :nth-of-type(1) portion. I find this a bit odd, since I specifically need to divide it with for this one "shop-sec" and others. Thank you.
.shop-sec:nth-of-type(1) {
height: 500px auto;
background-color: white;
margin-top: 75px;
display: grid;
position: relative;
grid-template-columns: .75fr 1.25fr 1.25fr .75fr;
grid-gap: 15px;
.shop-sec-content {
width: 100%;
height: 100%;
}
.shop-sec-content img {
width: 100%;
height: auto;
}
.shop-sec-content:nth-of-type(1) {
position: relative;
}
.shop-sec-content:nth-of-type(1) .shop-sec-text {
position: absolute;
right: 0;
padding-right: 50px;
transform: rotate(-90deg);
top: 42.5%;
font-size: 20px;
font-weight: bold;
}
.shop-sec-content:nth-of-type(4) {
position: relative;
}
.shop-sec-content:nth-of-type(4) .shop-sec-text {
position: absolute;
left: 0;
padding-left: 50px;
top: 42.5%;
font-size: 20px;
font-weight: bold;
}
.shop-sec-content:nth-of-type(2) {
position: relative;
}
.shop-sec-content:nth-of-type(2) .shop-sec-content-text {
position: absolute;
top: 50%;
margin-left: 50px;
font-size: 16px;
padding: 5px 20px;
color: white;
background-color: rgba(0, 0, 0, 0.507);
text-transform: uppercase;
letter-spacing: 5px;
}
.shop-sec-content:nth-of-type(2) .shop-sec-content-text span {
font-size: 24px;
font-weight: bold;
letter-spacing: 0px;
}
}
<div class="shop-sec">
<div class="shop-sec-content">
<div class="shop-sec-text">HELLO</div>
</div>
<div class="shop-sec-content">
<div class="shop-sec-content-text">NEW!<br><span>HELLO</span></div>
<img src="">
</div>
<div class="shop-sec-content">
<div class="shop-sec-content-text"></div>
<img src="">
</div>
<div class="shop-sec-content">
<div class="shop-sec-text">01</div>
</div>
</div>
EDITED JSFIDDLE
The goal to display a transition upward height when the button is hovered, but this line of CSS .btn-position:hover ~ .bg-transit { height: 430px !important;} seems it expands downwards instead upward. Is there a way to transition UPWARD?
I dont want to add any JS to it.
HTML
<div class="career-wrapper-positions">
<div class="section-positions">
<div class="position-wrap">
<div class="position-box" id="video_interpreter">
<div class="employees"><img src="http://staging.svrs.com/assets/images/careers2018/position-lady1-1.png" alt="SVRS | Video Interpreter positions"></div>
<div class="position-tited-top-bg"></div>
<div class="position-box-info">
<div class="position-header"><h5 class="h5-careers18">CUSTOMER SERVICES</h5></div>
<div class="position-subheader" id="subheader1">positions</div>
<div class="position-p">Individually, passionate about the work. Collectively, the largest sales workforce in the world.</div>
<div class="btn-position">
<button onclick="location.href='#'" class="position-btn" id="btn1-position">Apply now</button></div>
<div class="bg-transit"></div>
</div>
</div>
</div>
</div>
CSS
.section-positions { margin: 0 auto; width: 100%; }
.position-header { text-align: center; }
.position-header p { margin-top: 0; }
.position-wrap { height: 525px; position: absolute; z-index: 10; width: 100%; text-align: center; display: flex; margin-top: 175px; }
.position-box { width: 209px !important; height: 330px; display: block; margin: 20px; background-color: #231f20; z-index: 2;}
.position-tited-top-bg { width: 209px !important; height: 20px; background-color: #231f20; -webkit-transform: skew(0deg, 2deg); transform: skew(0deg, 2deg); margin-top: -15px; position: relative;z-index: -2; }
.position-header { height: 15px;color:#ffbb11; font-size: 22px; font-family:'Source Sans Pro', sans-serif; font-weight: 400; }
.position-subheader { color: #ffbb11; margin-top: 10px; font-family:'Source Sans Pro', sans-serif;}
.position-p { color: #fff; padding: 0 10px 0 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px; margin-top: 10px; line-height: 20px; }
.position-btn { background-color: #ffbb11; width: 150px; height: 41px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 50px; }
.position-box-info { padding-top: 10px; }
/* this is the button to trigger a new height size transition of the background box */
.bg-transit { width: 209px !important; height: 338px; display: block; background-color: #ff0000; z-index: -1; position: relative; top: -280px; transition-property: height; transition-duration: 0.5s;}
.btn-position:hover ~ .bg-transit { height: 430px !important;}
.position-btn:hover { background-color: #231f20 !important; color: #ffbb11 !important; border: #9c7002 solid 1px; }
.employees { position: absolute; margin-top: -210px; width: 207px; margin-left: 5px; z-index: 9999;}
.position-btn:hover ~ .position-box-info selects all siblings .position-box-info that come after a .position-btn:hover. Since .position-box-info is actually the parent of the .position-btn element, nothing gets selected. In fact, you can't select a parent from a child, so you either have to add a class with javascript or change your HTML.
Also, you seem to miss a </div> closing tag.
I have a Codepen link where I have an absolutely positioned div, which has two children.
I'm trying to move one child to the top of the div, while the other to the bottom, but cant quite figure it out with bottom:0 and top:0. I'm also trying to only use the width of the content for one of the elements, as opposed to the entire width of the parent element.
Change the CSS :
.event-type-label{
background: rgba(161,178,166,.8);
border-radius: 2px;
overflow: hidden;
font-family: Lato;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
font-size: 0.8em;
font-weight: 300;
letter-spacing: .05em;
line-height: 1;
padding: 5px;
}
.event-header-title {
color: #fff;
position: absolute;
bottom:0;
font-family: Lato;
font-size: 3em;
font-weight: 300;
line-height: 120%;
margin: .5rem 0;
}
Adding position:absolute to the childs will solve your problem. As absolute positioned elements take the width of content only.
Made a few CSS tweaks - you were close! Just needed to position: absolute the correct elements along with top and bottom, and position: relative the parent.
By doing this, the width of the element is automatically restricted to its content.
Check out my comments to see what was added and removed.
html,
body {
height: 100%;
width: 100%;
box-style: border-box;
margin: 0px
}
.event-page {
width: 100%;
height: 100%
}
.event-page-header {
position: relative;
height: 450px;
max-height: 70vh;
padding: 0 0 1.75rem;
width: 100%;
}
.event-page-header .event-header-content {
width: 100%;
height: 100%;
/*position: absolute; // removed */
z-index: 200;
padding: 0 20px;
/*bottom: 0; // removed */
/* added 1 line: */
position: relative;
}
.event-type-label {
background: rgba(161, 178, 166, .8);
border-radius: 2px;
overflow: hidden;
font-family: Lato;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
font-size: 0.8em;
font-weight: 300;
letter-spacing: .05em;
line-height: 1;
padding: 5px;
/* added 2 lines: */
position: absolute;
top: 0;
}
.event-header-title {
color: #fff;
font-family: Lato;
font-size: 3em;
font-weight: 300;
line-height: 120%;
margin: .5rem 0;
/* added 2 lines: */
position: absolute;
bottom: 0;
}
.event-header-image {
background: red;
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 100;
}
#media (min-width: 769px) {
.event-header-image::after {
background: linear-gradient(rgba(65, 77, 87, 0), rgba(65, 77, 87, .7));
bottom: 0;
content: '';
height: 70%;
left: 0;
position: absolute;
width: 100%;
}
}
<div class='event-page'>
<header class='event-page-header'>
<div class="event-header-content">
<div class="event-type-label">Event Tag</div>
<h1 class="event-header-title">Event Title</h1>
</div>
<div class='event-header-image'></div>
<div class="clear"></div>
</header>
</div>
You could use flex-box like in this example.
Or just use position: absolute and add all styling to a sub span to just use the space needed.
I've already run my code through a validator, so there are no syntax errors, but I can't figure out what's going on. Nothing I do changes the "p" elements in my code. I've tried styling the p class. I've tried wrapping them in a "div" tag and stylizing that, but it just seems to keep inheriting the body properties. If I want to style the text at all, I have to do it through the body properties.
Here's the HTML.
<div id="topBar"><img src="images/logo.png" alt="Escaping Shapes"/></div>
<div id="rope"><img src="images/rope2.png" alt="Bottom of logo border"/></div>
<p>Yarrrrgh! Shapes be escaping from below the surface of the Web! Push'em back down below the page as fast as ye can!</p>
<p class="bold">Your time: <span id="time">(not attempted yet)</span></p>
<div id="box">
</div>
Here's the CSS for the body:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
Here's the CSS for the "p" element that does NOTHING for me lol.
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}
Not sure what's going on, but any help would be greatly appreciated. I can provide more of my code if necessary.
EDIT My Entire CSS:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
#topBar {
background-color: #2980b9;
height: 120px;
width: 100%;
position: relative;
}
#topBar img {
display: block;
margin: 0 auto;
width: 600px;
position: relative;
top: 25px;
left: -85px;
}
#box {
background-color: #0ff;
height: 150px;
width: 150px;
display: none;
position: relative;
top: 0;
margin-top: 0;
margin-bottom: 10px;
opacity: 0.9;
box-shadow: 10px 10px 5px #7e7e7e;
-webkit-transition:all 0.1s linear;
-moz-transition:all 0.1s linear ;
-ms-width:all 0.1s linear ;
-o-width:all 0.1s
}
#box:active {
box-shadow: none;
top: 10px;
margin-bottom: 0;
-webkit-transform:scale(0.25, 0.25);
-moz-transform:scale(0.25, 0.25) ;
-ms-width:scale(0.25, 0.25) ;
-o-width:scale(0.25, 0.25) ;
}
#box:hover {
opacity: 1;
}
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
.bold {
font-weight: bold;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}
You have not closed off -o-width:all 0.1s
with a semi-colon under your #box css properties This is your problem.
You also haven't closed off your #rope properties }
It seems that the p styles are being applied to the p. I tried by setting the font color via the p rule and it works: http://jsfiddle.net/L2q1Lbzj/
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
color: red;
}
There is no problem in your css.
The <p> is working good enough in your given code.
CSS properties overlap each other.So be careful about this.
jsfiddle
edit:
as your new edit
you are missing closing }
write
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
}
instead of
rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
link