Why these CSS rules are not applied - css

I was trying to make this parallax-website. In the CSS I am defining properties for .image1 . So I wrote down properties and then just below it I again wrote some properties for the same class .image1. But only the ~ opacity, position (from 1st) and other properties defined (from 2 time) were applied. I checked the it using Inspect Element and all other properties were cut down. I am not able to understand why this is happening. Please help me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.70;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg');
min-height: 100%;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>

I think you need to mention background image as "background-image". You are declaring background property individually. or you can write like that way :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg') no-repeat fixed center center;
background-size: cover;
min-height: 100%;
opacity: 0.70;
position: relative;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>

Related

How to make the text overflow the backrgound from top and bottom?

I'm trying to emulate this behavior using CSS:
And this is what I have to this moment:
.contenedor{
height: 30px;
margin-bottom: 10px;
}
.lineaRoja{
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
}
.centreado{
font-size: 30px;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
How can I get that CSS behavior?
I would cut the upper and lower part via clip-path. No need to use extra elements or pseudoelements
h2 {
background: #f16c73;
color: #fff;
font: 2.4em Arial;
font-style: italic;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
clip-path: polygon(20% 33%, 20% 70%, 80% 70%, 80% 33%);
}
<h2>STREAMING</h2>
Here is another idea where you can consider line-height
h2 {
background: #f16c73;
color: #fff;
font: 2.4em Arial;
font-style: italic;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
line-height:0.45;
/*overflow:hidden; uncomment this if you want to hide the overflow */
}
<h2>STREAMING</h2>
Another one where you can adjust the background:
h2 {
color: #fff;
font: 2.4em Arial;
font-style: italic;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
background:
linear-gradient(#f16c73,#f16c73) center
/100% 45% /* Adjust this value */
no-repeat;
}
<h2>STREAMING</h2>
I wouldn't use opacity, but simply white text and white background. The text can be vertically positioned by using postion: relative and a bottom setting to offset it to the optimal position.
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
background-color: red;
height: 24px;
border-radius: 5px;
text-align: center;
}
.centreado {
font-family: sans-serif;
font-style: oblique;
font-size: 50px;
color: white;
position: relative;
bottom: 8px;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">STREAMING</h2>
</div>
</div>
Another solution is to move the text via transform property of CSS.
.contenedor {
height: 30px;
}
.lineaRoja {
background-color: rgba(255, 0 ,0, 0.5);
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
overflow: hidden;
}
.centreado {
font-size: 70px;
line-height: 70px;
color: white;
margin: 0;
padding: 0;
transform: translateY(-40%);
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
Change the text colour to transparent and set the font style to italic.
.centreado{
font-size: 60px;
color: transparent;
font-style: italic;
}
Move the div downwards.
.contenedor{
height: 30px;
margin-bottom: 10px;
transform: translateY(20px); /*Change this value according to your need */
}
html:
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
css:
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
position: relative;
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
}
.centreado {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 38px;
text-transform: uppercase;
font-style: italic;
margin: 0
}
JSfiddle: https://jsfiddle.net/hansfelix50/q0zxh9ku/
The secret here is overflow: hidden; on your red line, anything overflowing it gets cut off.
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
position: relative;
overflow: hidden;
}
.centreado {
font-size: 55px;
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
color: #fff;
text-transform: uppercase;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
You can do this easily with css flexbox.
Steps:
Remove the opacity: 0.5; and text-align: center; from .lineaRoja
Add background-color: #f36167; to .lineaRoja
Add display: flex; align-items: center; justify content: center; to .lineaRoja
Style the h1 as necessary; I've used: letter-spacing: 2px; font-size: 55px; font-family: arial; font-style: italic; color: white;
Here is a simple example using:
body {
background-color: grey;
padding-top: 50px;
}
.lineaRoja {
background-color: #f36167;
height: 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.centreado {
letter-spacing: 2px;
font-size: 55px;
font-family: arial;
font-style: italic;
color: white;
}
<div class="lineaRoja">
<h1 class="centreado">STREAMING</h1>
</div>

Jekyll site stopped working, but nothing changed

My jekyll sight had been running fine for a while until I add a blog post, which works perfectly locally, but then I get an error via email from GitHub saying
SCSS file Desktop/my-blog/css/style.scss has an error on line 1: File to import not found or unreadable: ../_sass/bootstrap. Load path: /hoosegow/.bundle/ruby/2.4.0/gems/jekyll-theme-primer-0.4.0/_sass.
I went to report this as an issue on the theme I was using, but I noticed that others were having similar build issues with Jekyll. Here's the link to that thread
Also, here is my style.css file, which seems to be causing the error.
---
---
#import '../_sass/bootstrap';
#import '../_sass/syntax-highlighting';
%oswald { font-family: 'Oswald', sans-serif; }
%roboto { font-family: 'Roboto Condensed', sans-serif; }
body {
#extend %roboto;
font-size: 18px;
line-height: 30px;
padding-top: 51px;
-webkit-font-smoothing: antialiased;
}
p {
margin-bottom: 30px;
}
section, header, footer, main, article, nav, aside { position: relative; }
a {
outline: none !important;
text-decoration: none !important;
transition: all 225ms ease;
color: rgb(19, 100, 214);
&:hover { color: #6165FF; }
}
.btn {
text-transform: uppercase;
font-weight: 400;
#extend %oswald;
}
h1, h2, h3, h4, h5, h6 { #extend %oswald; }
::selection {
background: #086AFF;
color: #fff;
}
nav.navbar {
margin: 0;
a {
text-transform: uppercase;
font-size: 16px;
}
.navbar-brand {
text-transform: none;
i {
transition: inherit;
color: rgb(19, 100, 214);
transform: scale(1);
}
&:hover i {
color: rgb(19, 100, 214);
transform: scale(1.35);
}
}
}
.title-group {
text-align: center;
padding: 0 15px;
margin: 50px 0 100px;
p {
max-width: 800px;
margin: 25px auto 0;
}
}
h1.special {
position: relative;
text-align: center;
overflow: hidden;
margin: 4;
text-transform: uppercase;
#extend %oswald;
font-size: 69px;
line-height: 69px;
font-weight: 700;
color: rgb(19, 100, 214);
span {
display: inline-block;
position: relative;
padding: 0 15px;
max-width: 1000px;
&:before, &:after {
content: '';
position: absolute;
display: block;
height: 1px;
background: #e8e8e8;
width: 99999999px;
top: 50%;
transform: translateY(-50%);
}
&:before { left: 100%; }
&:after { right: 100%; }
}
}
.tile {
position: relative;
box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135);
margin-bottom: 125px;
.inner-guts { padding: 50px; }
h2 {
margin: 0;
font-size: 100px;
font-weight: 400;
letter-spacing: -0.05em;
line-height: 100px;
}
.featurette {
position: relative;
display: block;
overflow: hidden;
margin-bottom: 15px;
width: 100%;
height: 550px;
background-color: #e8e8e8;
.img {
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 225ms ease;
transform: scale(1);
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: '';
background: #000;
opacity: 0.4;
transition: all 225ms ease;
}
}
iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover {
.img {
transform: scale(1.2);
&:before {
opacity: 0.2;
}
}
}
}
.excerpt {
font-size: 35px;
font-weight: 300;
line-height: 49px;
color: #484848;
p {
margin: 0;
}
}
.tags {
position: absolute;
left: 0;
top: 100%;
margin-top: 15px;
span {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
text-transform: uppercase;
#extend %oswald;
}
}
.read-more {
margin-top: 50px;
width: 100%;
max-width: 175px;
position: relative;
padding-right: 75px;
i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-54%);
font-size: 31px;
line-height: 100%;
}
}
}
aside {
font-size: 17px;
color: #525252;
margin: 16px 0;
#extend %oswald;
span {
text-transform: uppercase;
margin: 0 5px;
}
}
.site-footer {
margin-top: 200px;
}
.pagination-wrap {
text-align: center;
}
.topper {
height: 500px;
position: relative;
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
}
pre {
margin: 75px -100px;
}
#media only screen and (max-width : 991px) {
pre {
margin-left: 0;
margin-right: 0;
}
}
#media only screen and (max-width : 480px) {
.tile .featurette, .topper {
height: 300px;
}
h1.special,
.tile h2 {
font-size: 40px;
line-height: 44px;
}
.tile .inner-guts {
padding: 15px 25px;
}
.tile .excerpt {
font-size: 22px;
line-height: 35px;
}
}
Any advice is extremely helpful!
The error is telling you that the file bootstrap.scss can't be imported; either because it isn't in the location specified (the theme /_scss/ directory) or because it isn't called bootstrap.scss. The link you posted seems completely unrelated.

Responsive Text Sizing Issues within container

I am having the hardest time here...I have searched for a while now and can't quite figure out how to properly get my text to properly re-size in my parent container.
Here is the code:
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
font-size: 100%;
}
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: 50px auto;
position: relative;
max-width: 90%;
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;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
max-width: 90%;
word-wrap: break-word;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 3.7em;
font-family: Montserrat;
font-weight: 700;
line-height: 1.3;
text-align: left;
width: 100%;
word-wrap: break-word;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1em;
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: 1em;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
nav {
position: absolute;
left: 35px;
bottom: 28px;
}
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;
}
#media screen and (max-width: 649px) {
.box {
width: 450px;
height: 350px;
max-width: 90%;
}
h1 {
font-size: 2em;
word-wrap: break-word;
}
.text_container {
width: 280px;
height: 236.6px;
max-width: 90%;
}
}
<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>
<nav>
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-left_moebxn.png">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-right_oilpij.png">
</nav>
</div>
</body>
So again, my thought was that I could have the .box class be a parent container and then the .text_container that would be nested could 're-size the text in a responsive manner in smaller viewports. But it's not...and my hair is going grey.
Errggghhhh...
child with the position absolute can't change the size or its parent or vice versa. Alternatively you can use the float property and set it to "right". Also, you might want to use % instead of pixels if you're aiming for a responsive design.
I guess what you need is http://freqdec.github.io/slabText/
font-size cannot do resize accroding to the windows's width, unless you define different font-size accroding to the width with Media Queries

problems with optimization of css for IE 9

i can't seem to get my site css optimized for IE9
frustrating when my costumer uses IE9
website here
looks like theres a problem with float to.
i have tried making all min-height 100% to height 100% but that only fixed some of the problems
have problem with opacity and with a whole div not showing
any suggestions? :)
How it sadly looks in IE9
body {
background-color: lightgray;
background-image: url('img/wall.jpg');
background-size: 100%;
margin: 0;
font-family: "Courier New";
}
#footer a {
color: black;
}
a {
color: white;
}
h1 {
}
p {
margin-top: 64px;
margin-left: 30px;
margin-right: 30px;
color: white;
font-size: 10pt;
font-family: "Courier New";
}
ol {
margin-left: 30px;
margin-right: 30px;
color: white;
font-size: 10pt;
font-family: "Courier New";
}
#navbarWrapper a {
text-decoration: none;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#logo {
background-image: url('img/saefelogo2.png');
height: 40px;
width: 228px;
margin-left: 40px;
margin-top: 30px;
margin-bottom: 30px;
cursor: pointer;
background-size: auto 100%;
background-repeat: no-repeat;
}
#navbarWrapper {
position: absolute;
top: 130px;
left: 0px;
width: 500;
}
.nav {
color: white;
background-color: black;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 40px;
text-shadow: 0px 0px 2px #000000;
width: 400px;
background-color: rgba(0,0,0,0.4);
font-size: 10pt;
}
.nav:hover {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
cursor: pointer;
}
#firma #nav1 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#natklub #nav2 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#event #nav3 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#uniform #nav4 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#speciel #nav5 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#overv #nav6 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#job #nav7 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#ref #nav8 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#socialWrapper {
position: absolute;
top: 420px;
left: 35px;
}
#facebook {
height: 30px;
width: 30px;
display: inline-block;
background-image: url('img/facebook.png');
margin: 2px;
background-size: 100%;
opacity: 0.6;
}
#linkdin {
height: 30px;
width: 30px;
display: inline-block;
margin: 2px;
background-image: url('img/linkdin.png');
background-size: 100%;
opacity: 0.6;
}
#linkdin:hover, #facebook:hover {
opacity: 0.9;
cursor: pointer;
}
#footer {
width: 400px;
position: absolute;
bottom: 20px;
left: 40px;
font-size: 13px;
}
#contentWrapper {
position: absolute;
width: 600px;
top: 0px;
left: 500px;
/*height: 100%;*/
background-color: rgba(0,0,0,0.9);
min-height: 100%;
height: 100%;
}
#contentHeader {
padding-bottom: 35px;
height: 45px;
vertical-align: bottom;
color: white;
font-size: 17px;
font-weight: bold;
padding-top: 55px;
padding-left: 30px;
}
#contentHeader2 {
padding-bottom: 35px;
height: 60px;
vertical-align: bottom;
color: white;
font-size: 17px;
font-weight: bold;
padding-top: 40px;
padding-left: 30px;
}
#uoverskrift {
font-size: 15px;
font-weight: normal;
}
#pictureWrapper {
height: 225px;
width: 600px;
}
#index #picture {
background-image: url('img/index.png');
background-size: auto 100%;
height: 225px;
}
#event #picture {
background-image: url('img/event.png');
background-size: auto 100%;
height: 225px;
}
#natklub #picture {
background-image: url('img/natclub.png');
background-size: auto 100%;
height: 225px;
}
#firma #picture {
background-image: url('img/firma.png');
background-size: auto 100%;
height: 225px;
}
#uniform #picture {
background-image: url('img/uniform2.png');
background-size: auto 100%;
height: 225px;
}
#speciel #picture {
background-image: url('img/special.png');
background-size: auto 100%;
height: 225px;
}
#overv #picture {
background-image: url('img/materiel.png');
background-size: auto 100%;
height: 225px;
}
#job #picture {
background-image: url('img/job.png');
background-size: auto 100%;
height: 225px;
}
#ref #picture {
background-image: url('img/ref.png');
background-size: auto 100%;
height: 225px;
}
#textWrapper {
width: 600px;
}
#hstreg1 {
height: 1px;
min-width: 100%;
width: 100%;
background-color: black;
position: absolute;
top: 100px;
left: 0px;
}
#hstreg2 {
top: 393px;
height: 1px;
min-width: 100%;
width: 100%;
background-color: black;
position: absolute;
}
#vstreg1 {
top: 0px;
left: 470px;
min-height: 100%;
height: 100%;
width: 1px;
background-color: black;
position: absolute;
}
#vstreg2 {
top: 0px;
left: 1128px;
min-height: 100%;
height: 100%;
width: 1px;
background-color: black;
position: absolute;
}
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
Found a fix
Apperently it is important for IE that the doctype is correctly spelled!
<!DOCTYPE html>

How to make a custom cursor appear on an entire page and not just one small portion

I have seen this, but it does not provide any solution to my programming issues:
Custom cursor to entire page
This is the CSS Markup:
body {
height: 100%; width: 100%; padding: 0; margin: 0;
background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; font-size:12px; font-weight:bold;
cursor: url('http://www.rw-designer.com/cursor-view/21962.png'), auto;
}
div#mask {
cursor: not-allowed;
z-index: 999;
height: 100%;
width: 100%;
}
a:link {
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #ffffff;
font-weight: bold;
text-decoration: line-through;
}
a:active {
color: #F433FF;
font-weight: normal;
text-decoration: blink;
}
a:hover {
color: #F433FF;
font-weight: bold;
text-decoration: blink;
}
#about_me
div.center {
margin-left: auto;
margin-right: auto;
width: 8em;
}
{
width: 355px;
float: right;
margin: 20px 0px 0px 0px;
}
.contentTitle {
color: #fff;
background: #000;
}
.contentModule {
color: #FF00FF;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
}
#right_column {
float: left;
width: 355px;
margin: 20px 0 0 20px;
}
#left_column {
width: 210px;
margin-bottom: 10px;
margin-right: 0px;
float: left;
}
#pet_panel {
position: absolute;
top: 80px;
right: 700px;
margin-top: 50px;
width: 40%; float: left; margin: 0 0 20px 0;
}
#comment_panel {
position: absolute;
top: 700px;
right: 85px;
margin-top: 50px;
}
#tombstone_panel {
position: absolute;
top: 30px;
right: 85px;
margin-top: 50px;
}
#user_panel {
position: absolute;
top: 30px;
right: 385px;
margin-top: 50px;
}
#wishlist_panel {
position: absolute;
top: 250px;
right: 85px;
margin-top: 50px;
}
This is the HTML Markup:
<div id="about_me" class="contentModule">
<div class="contentTitle">About Me</div>
<div class="contentModuleI">my tagline </div>
</div>
What can I do to make my custom cursor visible throughout my page like the default cursor is?
If you need to display custom cursor on full page you have to add CSS like this. Have a look at DEMO.
body, html
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center;
cursor:url('http://www.rw-designer.com/cursor-view/21962.png'), url('cute25.cur'), help;
}
so here explain how it works; Firefox and chrome are fine with .jpg or .png file extension. But to support in IE need a .cur file extension. You may convert your image into .cur extension. from this online tool.
Note: If you need it work also in IE then you have to use cursor .cur file extension.

Resources