I am making a landing page, and this might sound like a stupid question, but my <h2> and <form> elements are not showing up anywhere on my page. I have tried everything I can think of and still, nothing. I'm baffled.
The photo I am using for my full screen background image is one off of photoshop with a grey square in the center (which looks like what some people do with z-index). In the background, it is cycling logo's in js as a kind of throwback design.
I am not sure if I am doing something wrong, or if there is something in my css, html, js making it so the text/form is not showing up.
index.html
<section id="bg">
<img src="img/bg.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12" id="rotating-img-wrapper">
<img class="rotating-img" src="img/corona.png">
<img class="rotating-img" src="img/mc.png">
<img class="rotating-img" src="img/mtv.png">
<img class="rotating-img" src="img/op.png">
<img class="rotating-img" src="img/supercell.png">
</div>
</div>
<div class="text">
<h2>To learn more about our services, drop us a line</h2>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email Address</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</div>
</section>
css
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#rotating-img-wrapper img {
position: fixed;
width: 250px;
height: 750px;
}
.rotating-img {
display: none;
position: absolute;
top: 0;
left: 0;
}
h2 {
color: #000000;
position: absolute;
}
javascript
$(window).load(function() {
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fades time (in milliseconds)
var fadeTime = 2500;
//number of items
var numberOfItems = $('.rotating-img').length;
//current item
var currentItem = 0;
//show first item
$('.rotating-img').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-img').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-img').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
If anyone can see an error(s) in my code that I cannot see, I would love to know. Thanks for the help.
I have some insight into how you might approach this layout.
I simplified your HTML slightly (removed the form and put in a simple line of text) so
as to concentrate on the various stacking layers due to the fixed and absolutely
positioned elements.
The key is that since your #bg element is fixed, it sets the reference point for
positioning any other positioned child elements, be it fixed or absolute.
In your original post, you set the offsets to be top: -50% and left: -50%, which
places the origin of the block outside of the visible viewing area.
As a result, h2 was positioned at the top left corner of #bg, hence not visible,
and the p text, which is in regular content flow, would also start to the top left
of the container block (#bg).
As a start, set the offsets to top: 0 and left: 0 with 100% for the width and height,
and then rethink about how to size your images in your image rotator and the background
image.
Now that you see where the elements are, you will make be able to make progress
with your layout.
body {
margin: 0; /* get rid of 10px border from default browser style sheet */
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#rotating-img-wrapper img {
position: fixed;
width: 250px;
height: auto;
}
.rotating-img {
display: block;
position: absolute;
top: 0;
left: 0;
}
h2 {
color: #000000;
position: absolute;
top: 30%;
left: 50%;
}
<section id="bg">
<img src="http://placehold.it/500x500">
<div class="container">
<div class="row">
<div class="col-lg-12" id="rotating-img-wrapper">
<img class="rotating-img" src="http://placekitten.com/2000/4000">
</div>
</div>
<div class="text">
<h2>To learn more about our services, drop us a line</h2>
<p>Some other words ...</p>
</div>
</section>
You can use background-image: url(img/bg.jpg); in #bg, instead of adding the image directly and try to add something on it.
In your image CSS, do this in the CSS:
z-index:-1000;
The z-index controls what elements overlap other elements. The higher the z-index, the more in front an element will be. See if that clears anything up. Otherwise, there is another issue. I am also curious as to why you are using absolute positioning on all those elements.
In CSS try this code:
#bg {
background-image:url('img/bg.jpg');
}
And then remove the tag from the HTML page. I would also take a look at simplifying your code since you seem to have a ton of divs all wrapped within each other. Perhaps consider using a table if it suits your needs.
Related
I have this HTML structure:
<div class="container">
<img class="image" />
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>
and this CSS code:
.container {
position: relative;
height: 88vh;
margin: 0;
}
.image {
height: 100%;
position: absolute;
margin-right: auto;
margin-left: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.overlay {
position: absolute;
}
My requirements are as follows:
Make image fill the available vertical space and center it horizontally. (Works)
Make image overlay of the same size as the image - without using an absolute width attribute. (Does not work - problem)
Fix icons to specific spots on the image. (Using percentages for top and left attributes ... Not sure if this is going to be as easy as I currently think.)
How can I have it all - a horizontally centered image expanded to fill the vertical space, an exact overlay and elements fixed to specific spot of the image?
While I would prefer a CSS hack, a Javascript solution will be considered, too, in case the width of the image needs to be transferred to the overlay programmatically.
One way of doing it would be to wrap the Image and the Overlay in a div and center that.
.container {
position: relative;
height: 88vh;
margin: 0;
text-align: center;
}
.imagecontainer
{
position: relative;
display: inline-block;
height: 100%;
}
.image {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
<div class="container">
<div class='imagecontainer'>
<img class="image" src='imageurlhere'/>
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>
</div>
Like this, the Image will set the width of its parent and in doing so also the width of the Overlay.
Hello I am trying to position a div on top of another div programmatically (javascript or css). The divs are completely separate meaning they look as follows:
<div class="bottom">
<img src="image"></img>
</div>
<div class="Top">
<img src="image2"></img>
</div>
I am new to javascript, css but mosty of the solutions I find are for separate divs inside a div which allows them to use zIndex. Please let me know if you would like me to provide more information regarding my question. Thank you for you help!!
You can set these with absolute positioning and change the z-index to pick what div you want on top. See fiddle: https://jsfiddle.net/c259LrpL/27/
.top{position: absolute; top: 0; left: 0; z-index: 1;}
.bottom{position: absolute; top: 0; left: 0; z-index: -1;}
The element positioned absolutely doesn't NEED the z-index property but it may help prevent conflicts down the road.
<style>
.stack-wrapper { position: relative; }
.bottom { position: static; z-index: 1; }
.top { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
</style>
<div class="stack-wrapper">
<div class="bottom">
<img src="image"></img>
</div>
<div class="top">
<img src="image2"></img>
</div>
</div>
Set the wrapper div as position:relative; then the inner div will be position in the top if you use position:absolute; and top:0; :)
I have a HTML5 code. It has a parent div, and two child div. The parent div takes the whole page and each child div takes half a page. I add some images to the left div and some to the right div. Now I need to add an image to the parent div and keep the images on both left and right child divs visible, i. e I want all images super imposed and visubale.
What is the easiest way of doing this?
Code is like this:
<div id="parent"... >
<div id="leftChild">... </div>
<div id="rightChild">... </div>
</div>
Something like this?
http://moody.es/nons/kek.html
View page source to see the code.
The parent image has position: absolute; and I've the set the children's <img> to have z-index: 1;. When using z-index, the element in question must be positioned, hence the position: relative;
Depending on what you are doing you may need to make parent container relative or you can keep it as it is!
#parent{
width: 100%;
height: 100%;
position: absolute;
background-image: url("http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg");
opacity: 0.75;
z-index: 9;
}
#leftChild{
width: 250px;
height: 125px;
position: absolute;
top: 0px;
left: 0px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBUBNygUQANzDPmF45jMi81XQ-nJ70Zw4LGvfpvpTLehLNjWZK8w");
z-index: 0;
}
#rightChild{
width: 250px;
height: 150px;
position: absolute;
top: 0px;
right: 0px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSMc12mb4F7OWtwX_r9Sry0SOQgme7GUwXTHVhIipN2WkCWpGZnNQ");
z-index: 0;
}
#parent, #leftChild, #rightChild{
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div id="parent"... ></div>
<div id="leftChild">... </div>
<div id="rightChild">... </div>
I am creating an advanced administration panel, and I'm playing the part of editing items, I like it when I clicked to edit an item he would fill the entire space of its parent, however I have no idea how to make the element back to its original position with animation, any idea how to do this? I tried this so far:
Here is a pen: http://codepen.io/anon/pen/WvGONp
HTML
<div id="container">
<div class="single-item">
<div class="title">home</div>
<a class="edit" href="#"></a>
</div>
<div class="single-item">
<div class="title">Gallery</div>
<a class="edit" href="#"></a>
</div>
<div class="single-item">
<div class="title">Contact</div>
<a class="edit" href="#"></a>
</div>
</div>
SCSS
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html, body, #container {
height: 100%;
min-height: 100%;
}
#container{
& > .single-item{
position: relative;
background-color: #d9d9d9;
border-radius: 2px;
margin-bottom: 15px;
padding: 15px;
z-index: 1;
& > .edit{
display: block;
position: absolute;
background-color: #000;
top: 15px;
right: 15px;
width: 20px;
height: 20px;
}
&.active{
z-index: 2;
}
}
}
Javascript
$("#container").on("click", ".edit", function(e){
e.preventDefault();
var el = $(this);
var elParent = el.closest(".single-item");
var curElTop = elParent.position().top;
var curElLeft = elParent.position().left;
elParent.toggleClass("active", function(){
elParent.css({
position: "absolute",
top: curElTop,
left: curElLeft
}).animate({
top: 0,
right: 0,
bottom: 0,
left: 0
});
});
});
CSS3 transition will help you create smooth animation for full screen width & height.
But if still for some reason, you want to do it in jQuery, here is the solution :
While clicking second time on the "edit" button, you just have to say :
$("<element_reference>").removeAttr("style");
It will remove the styles what was applied previously, get back the element to its normal view.
Or you can also change the position from "absolute" to "static", both will give you the same result. Refer this question for animating position using jQuery.
Hope it helps.
I've discovered the easiest way to do things like this is:
Put CSS transition properties on the item.
Make a new class that you add onto the item when it's clicked, to make it fullscreen. Take off the class when the item is closed.
CSS transitions tend to be faster and smoother.
After doing
$view.offset({
left : X, //X is the same each time
top : this.y
});
console.log($view.offset()); //outputs what it should
for several objects. I saw (in firebug) the following html code
<div id="4017" class="text-block" style="position: relative; top: 2px; left: 22px;">
<div id="4043" class="text-block" style="position: relative; top: 41px; left: -64px;">
<div id="4053" class="text-block" style="position: relative; top: 80px; left: -95px;">
<div id="4081" class="text-block" style="position: relative; top: 119px; left: -135px;">
left should be the same for all divs (and it's displayed so if left is equal for each div). Why left is not the same for each div despite it's shown so that left is the same for all divs?
In CSS I have:
div.text-block {
display: inline-block;
}
Thank you in advance!
UPD: divs are located iside three other divs:
<div id="app-container">
<div id="canvas-container">
<div id="canvas">
<!-- divs are located here -->
</div>
</div>
</div>
In respective CSS I have:
#canvas {
position: absolute;
background-color: white;
width: 100%;
height: 100%;
}
#app-container {
height: auto !important;
min-height: 100%;
}
#canvas-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
As said in jQuery documentation,
.offset( coordinates )
Description: Set the current coordinates of every element in the set of matched elements, relative to the document.
So if your elements are in other elements not positioned on position (0, 0) relative to the document, there is an offset applied.
EDIT
Relatively positioned inline elements with same left value :