I am displaying a progress bar(loading gif) while my screen loads.
my css entries are as below
.hiddenDiv {
display: none;
}
.visibleDiv {
display: none;
}
.hiddenStyle {
cursor: wait;
z-index: 99999;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: alpha(opacity=80);
}
.busyStyle {
position: absolute;
top: 300px;
left: 580px;
text-align: center;
vertical-align: middle;
font-family: arial, helvetica, verdana, sans - serif;
color: red;
font-size: 16px;
font-weight: bold;
}
when I include background-color: white; in hiddenStyle, then the main screen behind is replaced by a white background while the page is loading.
If I remove that entry, then the progress bar is displayed with main screen behind.
I would like to grey out the main screen behind while the progress bar is displayed. How do I achieve this by changing CSS entries ?
Achieved this by changing CSS entries as
.visibleDiv {
z-index: 99999;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: alpha(opacity=50);
opacity: 0.6;
background-color: white;
}
in JS
document.getElementById('mask').className = 'visibleDiv';
so opacity did the trick
Hopefully, this can help as I have it implemented and working on a website:
HTML
<div id="divLoading">
<div class="page-center">
<div class="loadingBox">
<div class="centered">
Loading...
</div>
</div>
</div>
</div>
Put this anywhere on your page.
CSS
#divLoading {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%; height: 100%;
background-color: #666666;
z-index: 30001;
opacity: .9;
filter: alpha(opacity=90);
display: none;
}
.page-center {
display: inline;
top: 50%;
left: 50%;
position: relative;
}
.loadingBox {
border: 2px solid black;
border-radius: 20px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
width: 300px;
height: 100px;
background-color: white;
}
.centered {
text-align: center;
}
And when you call the said loading method (the one which shows the progress bar) also call this:
$("#divLoading").show();
It will show a div in front of everything else. When the progress is done, call:
$("#divLoading").hide();
You can have following set at the loading time of document:
<html><body>
<script>
document.body.style.backgroundColor='gray';
</script>
</body>
</html>
Once your progress is loaded you can reset the body color:
document.body.style.backgroundColor='#fff';
Related
I am learning HTML/CSS for school.
I wanted to create a bar menu that if someone hover one button shows the blue bar (see snippet) and it creates below a Box for a Dropdownmenu. The Problem I get it only to work for one object the second one gets ignored even if I put my second object into so that both balken and Dconfig are directly under the button-class.
I really dont know how to solve it and it.
I hope you can help me :)
header {
background-color: black;
height: 70px;
width: 100%;
}
/*ButtonsCSS*/
.button{
height: 73px;
top: -2px;
background-color: transparent;
background-repeat:no-repeat;
border-color: transparent;
cursor:pointer;
overflow: hidden;
outline:none;
font-family:Arial, Helvetica, sans-serif ;
font-size: 12pt;
color: white;
position: absolute;
}
.balken{
opacity: 1;
}
.button:hover + .balken{
background-color: rgba(108, 155, 243, 0.945);
height: 4px;
position: absolute;
top: 66px;
}
.UeberCG{
left: 470px;
border-right-width: 17px;
}
.balkenUeberCG{
width: 80px;
/**/
left: 475px;
}
/*DropdownCSS*/
.Dconfig{
opacity: 1;
}
.button:hover + .Dconfig{
background-color: rgb(223, 217, 217);
width: 300px;
height: 300px;
position: absolute;
top:70px;
}
.DUeberCG{
left: 470px;
}
<!DOCTYPE html>
<html lang="de">
<body>
<header>
<div class="Buttons">
<button class="button UeberCG">Über CG</button>
<div class="balken balkenUeberCG"></div>
</div>
<div class="Dropdownmenue">
<div class="Dconfig DUeberCG"></div>
<div class="Suchleiste"></div>
</div>
</header>
</body>
</html>
I hope so I understanded your requirements well. On button hover you want to show Dropdownmenu? If that is the case you have to wrap everything into one parent div, applying hover on that div will trigger actions on children divs (this is the only possible way with pure CSS while in Javascript it is different and html elements can be in different places).
Here is an example of how I figured out your requirements.
.Buttons {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
.button-wrapper {
position: relative;
}
.button {
outline: 0;
border: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: white;
background: none;
display: block;
padding: 10px 20px;
cursor: pointer;
}
.balken {
background-color: rgba(108, 155, 243, 0.945);
height: 4px;
opacity: 0;
visibility: hidden;
}
.button-wrapper:hover .balken {
opacity: 1;
visibility: visible;
}
.Dropdownmenu {
background-color: rgb(223, 217, 217);
width: 300px;
height: 300px;
position: absolute;
top: 100%;
visibility: hidden;
opacity: 0;
}
.button-wrapper:hover .Dropdownmenu {
visibility: visible;
opacity: 1;
}
<div class="Buttons">
<div class="button-wrapper">
<button class="button UeberCG">Über CG</button>
<div class="balken balkenUeberCG"></div>
<div class="Dropdownmenu">
<div class="Dconfig DUeberCG"></div>
<div class="Suchleiste"></div>
</div>
</div>
</div>
I hope so this is what you need.
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 am having difficulties centering a an input and borders around text that I created. I am trying to center it with a percentages based setting, so that it becomes more responsive. It seems the percentages are off and every time I go over left: 35%;, it does not move over anymore.
The same applies to my submit button, inside of the search input. I took the percentage left out because it did not do anything.
I have stored all of my code inside of this fiddle:
https://jsfiddle.net/ghp4t489/
But, to get the best option to view what I am trying to do, is to visit my website. realtorcatch.com/test_index
How can I get the text with borders/search bar to be centered in the page?
Here is my CSS
.search_option_container_out {
text-align: center;
top: 450px;
left: 30%;
position: absolute;
z-index: 111;
}
.search_option_box {
position: absolute;
text-align: center;
left: 40%;
}
.search_option_box li {
display: inline;
border: 1px solid black;
line-height: 2em;
padding: 20px 75px;
background: rgba(24, 24, 24, 0.3);
color: #FFFFFF;
cursor: pointer;
}
.search_option_box li:hover {
background: rgba(0,0,255, 0.3);
}
.home_searchbar_out {
text-align: center;
padding-top: 60px;
}
.home_searchbar {
padding: 10px;
}
.home_search_input {
position: absolute;
left: 45%;
width: 575px;
padding: 14px;
font-size: 1.1em;
}
#home_search_submit {
padding: 11px 20px;
position: absolute;
background-color: blue;
color: #FFFFFF;
cursor: pointer;
font-size: 1.1em;
z-index: 1;
}
your code demo here: https://jsfiddle.net/ghp4t489/4/
essentially, you want to use the concept of centering a container inside the page like so:
div {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>my div here</div>
this code is using margin: auto to center the div in the page.
EDIT: https://jsfiddle.net/ghp4t489/7/ with button on the right and next to the input
https://jsfiddle.net/ghp4t489/9/ with button on right inside the input
I'm trying to get a trapezoidal perspective shape to have the whole area be clickable. I've gotten it to work in Firefox and even IE, but Chrome isn't cooperating too well.
Here's a fiddle with the shape and a link: http://jsfiddle.net/9n9uh6f6/1/
As you can tell, the link doesn't become active until you hover over the 'area' part of the text. In other browsers, the whole height of the shape is clickable.
I read that Chrome renders a perspective image differently and perhaps that's why it's not doing what it's supposed to.
Here's my CSS:
.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}
.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}
Please have look at this code:
.prodcaptions {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
perspective: 150px;
perspective-origin: 50% 0;
}
a{
padding: 50px;
position: absolute;
border: 1px solid black;
transform: rotateX(-15deg);
}
Seems to work the way you want it. fiddle
Try this shape for link trapazoid shape - jsFiddle
Advantage - you can change skew property to change angle of shape! Easy and effective! Reverse value for reverse shape!
html
Click Here!
css
a {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 136px;
height: 85px;
/* demo-only decoration */
margin: 100px auto;
font: 16px/50px Arial, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: orange;
}
a:before, a:after {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
/* demo-only decoration */
border-radius: 4px;
background-color: orange;
}
a:before {
transform: skew(-20deg);
left: 25px;
}
a:after {
transform: skew(20deg);
right: 25px;
left: auto;
}
I have tried as hard as I could but I can't figure out why this page hasn't any chance of scrolling (mouse, keys, scrollbars missing) in Chrome. In other major browsers everything seems fine.
You should be try with:
Create new id next <body>
<div id="container">
<div class="bloque_superior">...</div>
<div class="contenido">...</div>
...
</div>
css
body {
font-family: Tahoma,Arial, Helvetica, sans-serif;
font-size: 12px;
color: black;
background-color: white;
background-image: url(img/bg.png);
background-repeat: repeat-x;
}
#container {
margin-left: auto;
margin-right: auto;
width: 970px;
}
On line 62 in ui.checkbox.css, change
.ui-checkbox input, .ui-radio input {
position: absolute;
visibility: visible;
left: -99999999px;
top: -99999999px;
width: 14px;
height: 13px;
margin: 0px;
border: 0px none;
padding: 0px;
}
to
.ui-checkbox input, .ui-radio input {
visibility: visible;
left: -9999px;
top: -9999px;
width: 14px;
height: 13px;
margin: 0px;
border: 0px none;
padding: 0px;
}
This works for me.