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.
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;
}
I'm creating a small data tooltip on my website so whenever someone hovers the word Gig the data tooltip appears. I'm using ::after pseudo-element for it.
Here is my HTML:
Gigs
Here is my CSS:
a[data-tool-tip] {
position: relative;
color: #ffffff;
}
a[data-tool-tip]::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: .5em;
border-radius: .5em;
bottom: 100%;
left: 0;
}
The result coming out has a lot of line breaks. It is showing as below:
Products
are
called
as Gigs
on Fiverr
When I use white-space: no-wrap; then it whole becomes one line.
I WANT IT TO BE IN 2 LINES.
What Should I Do?
Thank You.
I'm seeing just one posibility is to had a fixed width to the ::after element like this :
a[data-tool-tip] {
position: relative;
color: black;
}
a[data-tool-tip]:hover::after {
position: absolute;
width: 80px;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: Playfair Display;
padding: 1em 3em;
font-size: 0.5em;
border-radius: 0.5em;
bottom: 100%;
left: 0;
}
I put the width to 80px to be on 2 lines
But I don't unterstand why thewhite-space: nowrap haven't work on your side (it will be one line with it unless you add a max-width size on it and use white-space: pre-wrap)
You will either have to set the width of the tooltip-elements or use a different approach.
a[data-tool-tip] {
position: relative;
top: 2em;
font-size: 200%;
}
a[data-tool-tip]:hover::after {
position: absolute;
content: attr(data-tool-tip);
display: block;
background-color: #343a40;
color: #ffffff;
font-family: 'Playfair Display';
padding: 1em;
font-size: .5em;
border-radius: .5em;
min-width: 10em;
bottom: 100%;
left: 0;
}
Gigs
I have some code which is meant to render a curved boundary from a vertical to the bottom right as shown in the attached picture:
But as you can see, the text is not in the right spot... granted, it's 10 pixels from the main vertical right wall of the main part of the DIV, but the padding from the top is not 7px. I've tried rendering the "padding" using line-height, but what you see here is at line-height: 0... going any lower doesn't make it go any higher... Increasing it however, does push it further down.
Is there any I can render this code such that "ELBOW 1" appears 7px from the top of the DIV, and yet still retain the text content within the tag as a data attribute?
JSFiddle: https://jsfiddle.net/eliseo_d/b83d9ytL/3/
Code below:
HTML:
<div class="elbow-1-botrt-wide0-grey1" data-text="elbow 1"></div>
CSS:
html {
background-color: rgb(0,0,0);
font-family: Impact;
}
body {
margin: 5px;
}
div[class$='-grey1'] {
background-color: rgb(102,102,102);
}
div[class^='elbow-'] {
/* default settings */
color: rgb(0,0,0);
font-size: 14pt;
height: 67px;
margin-bottom: 4px;
margin-right: 21px;
text-transform: uppercase;
width: 104px;
position: relative;
}
div[class^='elbow-1-'] {
padding-top: 46px;
}
div[class^='elbow-'][class*='-botrt-'] {
border-bottom-left-radius: 42px;
}
/* elbow bar */
div[class^='elbow-'][class*='-botrt-']:before {
content: '';
height: 30px;
left: 104px;
bottom: 0;
position: absolute;
margin-right: 4px;
}
div[class^='elbow-'][class*='-wide0-']:before {
width: 21px;
}
div[class^='elbow-'][class$='-grey1']:before {
background-color: rgb(102,102,102);
}
/* inside curve */
div[class^='elbow-'][class*='-botrt-']:after {
height: 21px;
width: 73px;
bottom: 30px;
left: 21px;
padding-right: 31px;
position: absolute;
content: attr(data-text);
text-indent:-59px;
color: rgb(0,0,0);
text-align: right;
}
div[class^='elbow-1-'][class*='-botrt-']:after {
line-height: 0;
}
div[class^='elbow-'][class*='-botrt-'][class$='-grey1']:after {
background: radial-gradient(circle at 100% 0%, rgba(102,102,102,0) 21px, rgba(102,102,102,1) 21px);
}
Update: For some reason the Impact font isn't rendering correctly in the Fiddle... This won't be an issue in my original local code, but the padding issue from above still stands...
Yep, here we go.
html {
background-color: rgb(0, 0, 0);
font-family: Impact;
}
body {
margin: 5px;
}
div[class$='-grey1'] {
background-color: rgb(102, 102, 102);
}
div[class^='elbow-'] {
/* default settings */
color: rgb(0, 0, 0);
font-size: 14pt;
height: 67px;
margin-bottom: 4px;
margin-right: 21px;
text-transform: uppercase;
width: 104px;
position: relative;
}
div[class^='elbow-1-'] {
padding-top: 46px;
}
div[class^='elbow-'][class*='-botrt-'] {
border-bottom-left-radius: 42px;
}
/* elbow bar & inner curve */
div[class^='elbow-'][class*='-botrt-']:before {
content: '';
height: 52px;
width: 21px;
left: 100%;
bottom: 0;
position: absolute;
/* inside curve */
background: radial-gradient(circle at top right, transparent, transparent 21px, rgb(102, 102, 102) 21px);
}
/* text content */
div[class^='elbow-'][class*='-botrt-']:after {
top: 10px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
position: absolute;
content: attr(data-text);
color: rgb(0, 0, 0);
}
<div class="elbow-1-botrt-wide0-grey1" data-text="elbow 1"></div>
Please try this code sample sample pen
body {
background: #000;
}
.elbow {
background: rgb(102,102,102);
color: red;
width: 150px;
height: 100px;
padding: 10px 20px;
border-bottom-left-radius: 50px;
position: relative;
}
.elbow:before {
content: '';
width: 40px;
height: 75px;
background: #000;
position: absolute;
right: 0;
top: 0;
border-bottom-left-radius: 25px;
}
<div class="elbow">
ELBOW 1
</div>
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>
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