I'm trying to make this web page and it just has so many issues. I cannot center the #titlediv and the navbar sometimes disappears. I'm not gonna lie: it might be a big fix, I'm really not sure. But here's the link if anyone can possibly salvage it:
http://jsfiddle.net/glenohumeral13/c604vbrn/
Code:
<body>
<div id="parallaxish"></div>
<div id="navbar">
<nav>
Item1
Item2
Item3
</nav>
</div>
<div id="contentdiv">
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
<div class="barrier"></div>
<div id="item1">
<h1>Item1</h1>
</div>
<div class="barrier"></div>
<div id="item2">
<h1>Item2</h1>
</div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #000;
font-family: Helvetica, Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
#parallaxish {
background-image: url('http://24.media.tumblr.com/tumblr_m54j1nIYN21r0k830o1_500.jpg');
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: auto;
}
#navbar {
float:right;
height: 30px;
margin-right: 100px;
}
nav a {
text-decoration: none;
display: inline;
list-style-type: none;
padding-right: 15px;
padding-top: 10px;
float: left;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
-o-transition: color 1s ease-out;
transition: color 1s ease-out;
font-weight: 100;
color: #fff;
-webkit-font-smoothing: antialiased;
}
nav a:hover {
color: #16a085;
}
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
}
#welcome h1, #item1 h1, #item2 h1 {
font-weight: 100;
-webkit-font-smoothing: antialiased;
}
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
left: 0;
right: 0;
overflow: auto;
}
.barrier {
height: 120px;
width: 100%;
background: transparent;
}
#item1 {
height: 600px;
width: 100%;
text-align: center;
background-color: white;
color: #16a085;
}
#item1 h1, #item2 h1 {
padding: 5% 0;
}
#item2 {
height: 600px;
width: 100%;
text-align: center;
background-color: black;
color: white;
}
First of all, a demo!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/
What it looks like what you are trying to do is vertically and horizontally center it, in the div, correct?
There is a simple way to do this with css, that i find very useful:
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
First of all, we give position:relative; to the div id="welcome":
/*With your current CSS*/
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
position:relative;
}
And then, the magic! The <div> id="titlediv" is given position:absolute; and a few other rules:
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
width: 180px;
height: 76px;
left: 0;
right: 0;
top:0;
bottom:0;
overflow: auto;
}
This little trick only works if the width and height are declared.
Now, for the nav bar easily fixed:
#navbar {
position:absolute;
top:0;
right:100px;
height: 30px;
z-index:10;
}
And to wrap it all up, a full screen demo!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/embedded/result/
http://stickyjs.com/ will help you!
I
//LOAD THE FILES
<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
/RUN THE SCRIPT
<script>
$(document).ready(function(){
$("#navbar").sticky({topSpacing:0});
});
</script>
if i were in your place i'll try to make my page by using a framework like bootstrap or foundation , if you want a lightweight one you can always try skeleton is easy to use & you can find snippets around the web very easily :
http://getbootstrap.com/ |
http://bootsnipp.com/
hopefully i helped you & next time try using google first
Related
I am trying to center text in photo. It works in chrome/mozilla perfectly, though there are problems with Safari.
Here are screenshots of the div from different browsers:
Safari:
Chrome:
When page is refreshed on Safari the text is often centered.
I dont have any ideas how to fix that.
HTML:
<div id="giftsHeaderPhoto" class="akcija">
<div class="subCategoryName">
<h1 > Grožis </h1>
</div>
<div class="intro_block">
<div class="intro_text">
<div class="intro_text-short">
<span>{$intro_text}</span>
</div>
<div class="intro_text-buttonBox">
<span class="buttonShowMore">Plačiau</span>
</div>
</div>
</div>
</div>
SCSS:
#giftsHeaderPhoto {
width: 100%;
height: 350px;
background-size: 1920px 350px;
background-position: center top;
background-color: white;
margin-top: 0px;
position: relative;
z-index: 2;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
transition: background-color 0.3s;
}
&:hover::after {
background-color: rgba(0,0,0,0.5);
transition: background-color 0.3s;
}
.subCategoryName {
width:80%;
margin: auto;
padding-top: 80px;
padding-bottom: 40px;
color:rgba(white, 0.8);
text-align:center;
position: relative;
z-index: 1;
overflow: hidden;
transition: all 300ms;
letter-spacing: 15px;
h1 {
font-weight: 1000;
color: white;
}
Expected behaviour: subCategoryName class is always centered in any browser.
Outcome: subCategoryName class is more to the right in Safari sometimes.
Try this,
Add the property
margin: auto;
to the container div ie, the parent div where all your sub divisions are contained.
also provide,
text-align: center;
to the actual element to be centered.
if nothing works, a <center>...</center> tag may help.
You can also refer this link for details.
You can use this code
body {
margin: 0px;
}
#giftsHeaderPhoto {
width: 100%;
height: 350px;
background-size: 1920px 350px;
background-position: center top;
background-color: white;
margin-top: 0px;
position: relative;
z-index: 2;
}
#giftsHeaderPhoto::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transition: background-color 0.3s;
}
#giftsHeaderPhoto:hover::after {
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.3s;
}
.subCategoryName {
width: 80%;
margin: 0 auto;
padding-top: 80px;
padding-bottom: 40px;
color: rgba(white, 0.8);
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
transition: all 300ms;
letter-spacing: 15px;
}
h1 {
font-weight: 1000;
color: white;
text-align: center;
}
.intro_block {
text-align: center;
margin: 0 auto;
}
<div id="giftsHeaderPhoto" class="akcija">
<div class="subCategoryName">
<h1> Grožis </h1>
</div>
<div class="intro_block">
<div class="intro_text">
<div class="intro_text-short">
<span>{$intro_text}</span>
</div>
<div class="intro_text-buttonBox">
<span class="buttonShowMore">Plačiau</span>
</div>
</div>
</div>
</div>
So I have a resizing problem with my img. It just stays the same size. If you notice the error please tell. Thank You.
Here is a link to the code so you can try your suggestions or whatever: https://jsfiddle.net/pnfaps7L/2/
And here is a snippet:
*::selection {
background: #333;
}
*::-moz-selection {
background: #333;
}
body {
background-color: #fff;
font-family: 'Hind', sans-serif;
}
* {
padding: 0;
margin: 0;
}
#favul {
list-style-type: decimal;
font-family: 'Josefin Sans', sans-serif;
padding-left: 8vw;
margin: 6.5vh auto;
}
#favul>li {
margin: 1vw 0;
}
#favtit {
text-align: center;
}
#fav {
border: 1px solid #000;
font-size: 48px;
padding: 15px;
width: 1000px;
height: 90vh;
overflow: hidden;
background-color: #0A4366;
position: absolute;
}
#images {
position: absolute;
bottom: 0%;
left: 0%;
}
#images>img {
max-width: 100%;
height: auto;
width: auto\9;
}
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
<li>The Flash</li>
<li>Batman</li>
<li>Green Arrow</li>
<li>Dr. Manhattan</li>
</ul><!--#favul-->
<div id="images">
<img src="http://nof.bof.nu/dccomics/characters.jpeg" alt="characters" />
</div><!--#images-->
</div><!--#fav-->
Press the full screen or otherwise you wont get my problem.
Set #fav's width:100%; and max-width: 1000px;, it will adjust width according to screen size.
#fav {
border: 1px solid #000;
font-size: 48px;
padding: 15px;
max-width: 1000px;
width:100%;
height: 90vh;
overflow: hidden;
background-color: #0A4366;
position: absolute;
}
Updated fiddle
Use this. It will solve the problem
img {max-width: 100%}
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>
Currently I have a sidebar on my website, and when a user hovers something on the sidebar it should bring up a popover. Yet there is this really weird issue!
The sidebar has a vertical scroll bar, and when the popover comes up it will not go over the scroll bar. Here is a image of it (Please note that is not going to be the actual popover, it is just for testing):
Sorry, not sure why the text is appearing down here. Anyhow as you can see when there is a scroll bar the text will not pass through it, yet when the scroll bar is removed the text WILL pass through it. Here is all of the important CSS:
.sidebarbuttons2 {
width: 100%;
height: 5%;
margin-left: auto;
margin-right: auto;
background-color: gray;
text-align: center;
font-size: 70%;
border-bottom: 2px solid #474747;
z-index: 2;
}
.sidebarbuttons2 li .dropdownbuttonsholder {
display: none;
margin: 0;
padding: 0;
margin-left:150px;
float:left;
margin-top: -45px;
height: 0;
z-index: 3;
}
.sidebarbuttons2 li:hover .dropdownbuttonsholder {
width: 200px;
background-color: blue;
border: 1px solid black;
list-style: none;
height: 25px;
display: block;
z-index: 4000;
position: absolute;
}
#dropdownbuttonitem1 {
background-color: red;
height: 25px;
z-index: 5;
}
#dropdownbuttonitem2 {
background-color: green;
height: 25px;
z-index: 5;
}
#dropdownbuttonitem3 {
background-color: yellow;
height: 25px;
z-index: 5;
}
#dropdownbuttonitem4 {
background-color: orange;
height: 25px;
z-index: 5;
}
/*-------------------------------------------------------*/
/*Sidebar Style*/
/*-------------------------------------------------------*/
.sidebarpostinbutton {
color: orange;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 1900px;
background-color: gray;
z-index: 1;
border-right: 3px solid #474747;
position: absolute;
overflow-y: scroll;
font-size: 88%;
}
#sidebar:hover {
width: 25%;
z-index: 5;
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
}
.sidebarbuttons {
width: 100%;
height: 5%;
margin-left: auto;
margin-right: auto;
background-color: gray;
text-align: center;
font-size: 70%;
line-height: 0%;
border-bottom: 2px solid #474747;
}
#sidebarbuttonlast1 {
border-bottom: 0px;
}
#sidebarscrollinformation {
display: none;
}
/*-------------------------------------------------------*/
/*Main Contents Box Style*/
/*-------------------------------------------------------*/
.maincontentssection {
background-color: lightgray;
margin-left: 20%;
height: 1900px;
position: absolute;
width: 80%;
overflow-y: scroll;
z-index: 1;
}
And then here is the important HTML:
<div id="sidebar">
<div class="col-xs-12 col-sm-6 col-md-12">
<ul class="nav sidebarbuttons2"> <!-- navbar -->
<li> <h1> Art </h1>
<ul class="dropdownbuttonsholder row">
<ul id="dropdownbuttonitem1" class="col-xs-3"> All Posts </ul>
<ul id="dropdownbuttonitem2" class="col-xs-3"> Most Popular </ul>
<ul id="dropdownbuttonitem3" class="col-xs-3"> Most Viewed </ul>
<ul id="dropdownbuttonitem4" class="col-xs-3"> Newest </ul>
</ul>
</li>
</ul>
</div>
</div>
I can not figure out why it is not going through the scroll bar. Please Help! :)
P.S. If you would like the full HTML go here: http://pastebin.com/c89M7MPk (it is a include), and the full CSS go here: http://pastebin.com/yJZp9HT2
That's just how overflow: scroll works. Even if you use overflow-x or overflow-y, you cannot mix this with overflow: visible in the same element.
The only thing you can do, is to use overflow-x: visible; overflow-y: hidden; for the CSS, and use javascript to scroll the element. Check out a library like this for the scroll: http://darsa.in/sly/
In the CSS, LINE 974 change margin-left:150px; to margin-left: 0px;
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