I know how to make an image fixed position with CSS but I have no idea how to actually create a header using HTML.
I've attached an image, I'd like to be able to still edit things into the header,
Any help would be greatly appreciated because I can never do this.
Here is how I'd do it if it were an image:
<style>
.header
{
position: fixed;
top: 0%;
left: 0%;
right: 0%
z-index: 1;
}
</style>
<img src="IMAGE URL" class="header" width="100%" height="150px">
The image would then be pinned, How do I make it so there is a solid colour box over the top of everything.
Thanks.
<style>
.header
{
background-color: red;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 150px;
z-index: 1;
}
</style>
<div class="header">
Some Text
</div>
Related
I have an HTML/CSS pure layout and I'm using flexbox. I am developing a simple hamburger overlay menu sort of thing, but the overlay isn't fully covering the entire site -- there is no higher z-index present.
If I change the opacity to 0, the entire page goes white.
Desired Output:
Div that covers the entire page
Current Output (See Below):
HTML
<body data-theme="light" class="overlay">
...
</body>
CSS
.overlay {
opacity: 1;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
Output
You can't make the HTML body an overlay because it is the main container for the whole page, so it contains the elements you are trying to overlay.
Instead you can create a separate div for the overlay. This shouldn't have any content (unless you want content in your overlay of course). Then you can add your existing overlay class to it:
.overlay {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
h1, p { color: red;}
<body data-theme="light">
<div class="overlay"></div>
<h1>Hello</h1>
</body>
First you may add
.FlexContainer{position: relative;}
Next a few changes for the Overlay:
.FlexContainer .Overlay {
position: absolute;
top: 0;
left: 0;
margin: 0;
border: none;
width: 100%;
height: 100%;
background-color: rgba(013, 130, 230, 0.5);
cursor: not-allowed;
}
My requirement is to show a bit of hero image on load and then as I scroll complete image should unfold.
reference website : https://karpov.paris/ (similar hero image effect)
I tried exploring several links, all the links are explaining about zoom-out effect.
Can you please help me to meet my requirement.
Thanks in advance.
Here I made a simple demo. I hope it can help you.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".zoom img").css({
transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
});
});
body {
height: 100%;
margin: 0;
padding: 0;
}
.content{
position: relative;
min-height: 100vh;
background-color: white;
font-size: 30px;
padding: 40px;
}
.zoom{
height: 50%;
overflow: hidden;
padding-bottom: 55%;
}
.zoom img{
position: fixed;
top: 0%;
left: 50%;
max-width: 150%;
transform: translateX(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zoom">
<img src="https://picsum.photos/1200/1200" alt="img"/>
</div>
<div class="content">
Put some content here.
</div>
I am creating this in a visualforce page but due to stackexchange policy I need to post web development questions here.
I have the following HTML code:
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;">
</div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:white; font-weight:bold; text-align: center;">
<h>Transferring Records...</h><br />
<img src="/img/loading32.gif"/><br />
<h>This may take a minute or two...</h><br />
</div >
Which generates a full screen gray overlay and then my text and image in the center.
What I am trying to do is create a smaller white box around my text as well so it is easier to read. Can anyone help me with that?
Here is a screenshot of current setup:
Personally I would change your structure a slight bit and decouple your CSS - if only for your own sanity when reading the thing in between content (if you want to you can simple include it in a <style type="text/css"></style> tag and it would work as well.
Since you want your white box to be inside your container, why not structure it like that? By fixing the outer container (with class overlay, referenced as .overlay in CSS) you can now position the inner box correctly, by moving it 50% from the left and top and then transform the box itself using translate, moving it by minus half its width and height. Now your structure makes sense and you can do whatever you want with your inner box:
div.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: gray;
background-color: rgba(150,150,150,.5);
}
div.overlay div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: black;
font-weight: bold;
text-align: center;
padding: 20px;
background: rgba(255,255,255,.5)
}
<div class="overlay">
<div>
<h>Transferring Records...</h>
<br /><img src="/img/loading32.gif"/>
<br /><h>This may take a minute or two...</h>
</div>
</div>
This structure also makes it easy to work with as everything is simply contained in one single element, and you control everything in it. Easier to debug, easier to reason about (the relationship of the elements is obvious) and your CSS can target specifically divs that are nested inside boxes with the class overlay.
Are you searching for something like this?
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;"></div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:white; font-weight:bold; text-align: center;">
<div style="background-color: rgba(255, 255, 255, 0.3);padding: 20px;">
<h>Transferring Records...</h><br>
<img src="/img/loading32.gif"><br>
<h>This may take a minute or two...</h>
</div>
</div>
To add a white background to your div, use background: white;. The problem you then have is your text is also white, so you have to change the color to color: black (or some other color).
Knowing SalesForce, your probably would want rounded corners, so add border-radius: 10px; for that :)
To round the corners more, increase the 10px to a higher number, say 20px, and to round them less, decrease the number to say 5px
As snippet below
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;">
</div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:black; font-weight:bold; text-align: center; background: white; border-radius: 10px;">
<h>Transferring Records...</h>
<br />
<img src="/img/loading32.gif" />
<br />
<h>This may take a minute or two...</h>
<br />
</div>
I want to simply overlay these 4 images with a block of colour, and text aligned in the middle of each. But with my current use of "position: absolute" to get each image in the correct position and z-index etc. I'm finding it hard to attempt something like this: http://jsfiddle.net/jimjeffers/mG78d/1/ and get it to work. My position absolute seems to always break other code I've been trying from stackoverflow and others, even tried a few jquery scripts.
Live URL: http://bit.ly/1k7RgDS
HTML
<div class="index-gallery">
<img src="<?php HTTP_HOST ?>/Images/1.JPG" alt="" class="img1" />
<img src="<?php HTTP_HOST ?>/Images/2.JPG" alt="" class="img2" />
<!-- <img src="<?php //HTTP_HOST ?>/Images/3.JPG" alt="" class="img3" /> -->
<img src="<?php HTTP_HOST ?>/Images/6.JPG" alt="" class="img3" />
<img src="<?php HTTP_HOST ?>/Images/5.JPG" alt="" class="img4" />
</div>
CSS
#index-gallery .index-gallery { margin-bottom: 30px; }
#index-gallery .index-gallery img:hover { opacity:0.6; filter:alpha(opacity=40); /* For IE8 and earlier */ }
#index-gallery .index-gallery img:before { content: "Show Home Hemel Hempstead"; }
#index-gallery .index-gallery .img1 { width: 550px; top: 10px; position: absolute; z-index: 3; display: block; }
#index-gallery .index-gallery .img2 { width: 550px; right: 0; position: absolute; z-index: 2; display: block; }
#index-gallery .index-gallery .img3 { width: 400px; top: 400px; left: 10px; position: absolute; z-index: 4; display: block; }
#index-gallery .index-gallery .img4 { width: 710px; top: 400px; right: 0; position: absolute; z-index: 1; display: block; }
I've got a little bit of a transparency code to work but looking more for what's on that JSFIDDLE with the ability to center the text in the middle when hovered over with colour overlay. If you have a suggestion which would change all the code I don't mind, if this is bad practice what i've got so far.
So - Working with what you already have you could just try this route. Minimal position changes and I've added Paragraph tags inside your spans so you can position the text absolutely.
http://jsfiddle.net/9H7eM/
<span><p>Hello</p></span>
#overlay {position: relative;}
#overlay span {
background: red;
bottom: 0;
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#overlay span p {
position: absolute;
text-align: center;
width: 100px;
top: 30px;
font: bold 16px arial;
}
IF you're open to changing your code, you could try an approach similar to this: http://jsfiddle.net/te6t8/1/
But if you're already happy with how it is, stick with what you have and know!
I am using wordpress as my CMS, and have used a theme of my choice. The theme shows a slider (carousel) on the home page, but takes up too much space. I tried to edit the width and height to be 80%, but the UI gets screwed. The slider does not center, or the frame with the left right arrows come closer. The image gets smashed. I need to get the css right for this.
I tried the following
modified width and height to 80%
reduced the px values, messed it up further
Below I have relevant css and html portions of the code.
<div id="slides">
<div class="slides_container slide" style="overflow: hidden; position: relative; display: block;">
<div class="slides_control" style="position: relative; width: 2736px; height: 480px; left: -912px;"><div style="position: absolute; top: 0px; left: 912px; z-index: 5;">
<img src="http://localhost/taxeeta/wp-content/uploads/2013/01/116.png?1358343444279" alt="">
</div>
<div style="position: absolute; top: 0px; left: 912px; z-index: 0; display: none;">
<img src="http://localhost/taxeeta/wp-content/uploads/2013/01/215.png" alt="">
</div>
</div>
</div>
CSS:
#slides {
position: absolute;
top: 15px;
left: 0px;
z-index: 100;
width: 897px;
margin-left: 14px;
}
.slides_container {
width: 912px;
margin: 0;
padding: 0;
}
.slides_control {
position: absolute;
top: 15px;
left: 0px;
z-index: 100;
width: 897px;
margin-left: 14px;
}
Are you sure that there is jo javascript code modifying the element-css?
Did you changes the width of slides and slides_control as the same?
(sorry iam not able to write comments...)