I have the following structure for a slide within a site created for an iPad
<div id="slide4">
<div class="slide4A1"></div>
<div class="slide4A2"></div>
<div class="slide4A3"></div>
</div>
Each block contains background images which are controlled via media queries to allow them to fill the screen whether the Ipad is portrait or landscape.
I need to animate the blocks but want the positions to be as follows -
.slide4A1 - fixed left
.slide4A2 - fixed centre
.slide4A3 - fixed right
I have tried floating left and right for slides 1 and 3 and centering with auto margin- but the layout go's astray - any ideas?
js fiddle here - http://jsfiddle.net/chunk_pd/PAqSb/6/
First you have to clean your CSS - combining position: absolute; and float won't work. Use your wrapper <div id="slide4"> and set its positioning as relative and width: 100%. Both animated divs have to have position: absolute; top: 0px; in order to reach top of the wrapper.
What is more - you have a typo in your JS:
$('.slide4A1').animate({left:'0px;',}, 1600); just remove ; after 0px and voila.
I believe this is what you expected to see:
CSS:
#slide4 {position: relative; }
.slide4A1, .slide4A3{ position:absolute; top: 0; }
.slide4A1{background:#000; width:120px; height:1024px; left:-120px;}
.slide4A2{background:#367ab2; width:531px; height:1024px; margin-left:auto; margin-right:auto; position:relative!important; display: none;}
.slide4A3{background:#ff7e00; width:120px; height:1024px; right:-120px;}
JS:
function goDown3bPt2(){
$('.slide4A1').animate({left:'0',}, 1600);
$('.slide4A2').fadeIn('slow');
$('.slide4A3').animate({right:'0',}, 2100);
}
Updated jsfiddle.
Apply width :100%, margin:0 auto to slide4
width :33 % to slide4A1,slide4A2,slide4A3
Float Left to slide4A1 and float right to slide4A3 classes....!!
Related
I have 2 divs, one 30%, one 70%, with float:left to position them side by side in the webpage. the first div contains some text, a select control and a button. that displays properly. The second 70% width div is a slideshow container. I use javascript to display the slides, which are contained within varying sized divs. The slides have a 50px margin-left and display properly. I have another div within the slideshow container div that contains navigation elements for navigating through the slideshow. I want to position this div below the current slide, offset by 50px left and centre within the slide width.
here's a diagram...
Something like this?
https://jsfiddle.net/tmqqn9aj/
Kind of hard to tell what you want without seeing your code.
Add a slide container around your slide and then use:
position: absolute;
left: 50px;
To add the 50px left 'margin'
And add position: relative to the 70% width div
Add your nav inside the slide container, leave the width at auto and center align your nav
Ok, just seen your code.. the problem is you are absolutely positioning .mySlides and so the nav is being pushed to the top of the document as absolute positioning removes any relativity.
Instead, absolutely position your .slideshow-container and add left: 50px to it, remove margin-left: 50px and position: absolute; from .mySlides
#container{
margin:0 auto;
width:100%;
}
#leftpart{
width:30%;
height:200px;/*remove this*/
background-color:blue;/*remove this*/
float:left;
}
#contentpart{
width:70%;
height:500px;/*remove this*/
background-color:red;/*remove this*/
float:left;
}
#fixeddiv{
width:30px;
height:100px;/*remove this*/
position:absolute;
top:10px;
left:calc(30% + 5px);
background-color:cyan;/*remove this*/
padding:0px;
}
.sidediv{
margin-top:5px;
width:100%;
height:30px;/*remove this*/
background-color:violet;/*remove this*/
}
<div id='container'>
<div id='leftpart'></div>
<div id='contentpart'>
<div id='fixeddiv'>
<div class='sidediv'></div>
<div class='sidediv'></div>
</div>
</div>
</div>
I'm doing a website and I trying to center a text but I don't know what the top is not working. It works if I use something like this:
up:25px;
But this doesn't work when I want to use this:
up:50%;
Can you help me? This is my code:
.absolute{
position:absolute;
}
.relative{
position:relative;
}
.white{
background-color:white;
}
#menu-title{
width:300px;
z-index:5;
top:50%;
left:calc(50% - 150px);
top:calc(50% - 2.5em);
}
<div class='relative' id='menu'>
<div class='absolute white' id='menu-title'>
<h2 >Menu</h2>
</div>
</div>
Considering you want to center the <h2> in the <div> with id of 'menu-title', you have several ways to do that.
If you want to use the top property you first have to define the position to fixed, like this:
#menu-title {
position: fixed;
top: 50%;
}
The other way to do that is to use margins:
#menu-title {
margin-top: 100px;
}
You can always change the px.
You should use position:fixed
and also depends on the size of the text you can move it to exactly in the center with transform
#menu-title{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
hope that helps
Make position:fixed
.absolute{
position:fixed;
}
.relative{
position:relative;
}
.white{
background-color:white;
}
#menu-title{
width:300px;
z-index:5;
top:50%;
left:calc(50% - 150px);
top:calc(50% - 2.5em);
}
<div class='relative' id='menu'>
<div class='absolute white' id='menu-title'>
<h2 >Menu</h2>
</div>
</div>
First of all... it IS working, only not as you expected it. The CSS top:calc(50% - 2.5em), is relative to the first POSITIONED ancestor element. In your case this is the relative (parent) element with id="menu". The height of this element is 0. Therefore it works as it should, but apperently not as you expected.
You might have expected that the menu had a certain height. It does not, because its only child (the menu-title div) is positioned absolute. Absolute positioned elements do not grow their parents.
More likely is that you expected that the title would position relative to the viewport height, instead of relative to its parent.
There are three ways to position the menu-title relative to the viewport height:
Solution 1. Remove relative positioning from the parent
This will make the parents position static (not positioned) and the first positioned ancestor element becomes the viewport. The viewport has a 100% height by nature. Therefore this solution works. A working example of this solution can be found here: http://codepen.io/anon/pen/bBLZva
Solution 2. Give the parent 100% height
When removing the relative positioning from the ancestor(s) is not an option, you can give the parent an 100% height. This, however, is not a straight forward task. Simply adding the CSS height: 100% to the parent is not enough. The height of the menu div is relative to the height of its parent element and not to the height of the viewport. Therefore you need to set their parents explicitly to 100% (viewport height). This can be achieved by adding: body,html {height: 100%;} to the CSS. A working example of this solution can be found here: http://codepen.io/anon/pen/XNZGOv
Solution 3. Use position fixed
Know that position: fixed is fundamentally different than position: absolute AND has compatability issues on older iOS and Android versions (stock browser). However it MIGHT result in the expected behaviour. This can be explained by the fact that 'position: fixed' implies positioning relative to the viewport (and not to the parent). You should use position fixed on the title itsself. A working example of this solution can be found here: http://codepen.io/anon/pen/PbQgpB
I would like to do a responsive design for the popup notifications in my application.I'm using Angular Toaster for the notifications.
For instance I have located the toaster-container element in the center of the screen, but using an absolute position,so for smaller screens the notifications stay in the same position so they are not displayed. I would like to make the notifications relative to the parent element where they are contained, (in this case the container grid). How do I achieve that using CSS? This is my html code:
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" ></div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"></div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>We are loading the products. Please wait...</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
</body>
And the custom css rule I use for the toaster-container element:
.toast-container-custo
{
position: absolute;
top:100px;
left: 780px;
}
Use percentages instead of pixels
You can make your div relate to it's container using percentages both for width/height and top/left values. The percentage you use here will be in relation to the parent container size. So if your parent container is set to width:300px and your child is set at width:50% then the child will be rendered at width:150px;
Use relative positioning for the element.
Relative positioning, is just what it says on the label - it positions the element relative to other elements. So you also need to set the element to position:relative;
Here is how I would go about this:
.toast-container-custo{
position: relative;
margin: 0 auto;
width: 30%;
height:30px;
}
margin:0 auto will center
the child elements within it's container, horizontally
the width now is 30% of the parent container
the height, well, I just prefer to set this at a fixed px value but
you can definetely use % here as well
You can change your container to:
.toast-container-custo{
position: absolute;
top: 100px;
margin-left: auto;
float: none;
margin-right: auto;
left: 0;
right: 0;
}
Generally, this is a good way to center horizontally absolute elements.
I´m trying to float 3 divs in different order in responsive design. In mobile version is correlative (div 1, div 2, div 3) but in desktop version I want to place the div 3 near the div 1 and the div 2 at bottom of them. I´m triying it with float, clears and so but I dont know how fix it. I share a mockup. can help me anyone? Thanks
(source: subirimagenes.com)
This is the html structure:
<div id="fondo-web">
<div id="main">
<section id="main-container" name="div1">
Random Image
</section>
<section id="cadiz-a-caballo" name="div2">
Copy Text
</section>
<section id="frm-container" name="div3">
Contact Form
</section>
</div>
</div>
In example, this is one attempt:
#main-container{
width:33%;
background-color:#856;
float:left;
}
#cadiz-a-caballo{
width:33%;
background-color:#376;
}
#frm-container{
width:30%;
background-color:#856;
float: right;
}
And other attempt with absolute positioning and margin-bottom for the father container:
#main-container{
width:62%;
background-color:#856;
float:left;
}
#cadiz-a-caballo{
width:70%;
position: absolute;
background-color:#376;
top:600px;
}
#frm-container{
width:35%;
background-color:#856;
float: right;
}
#main{
width:75%;
margin:auto;
margin-bottom: 150px;
overflow: hidden;
background-color: #343;
}
This is more or less what you want: http://jsfiddle.net/uyQzQ/1/
First of all you want to make the first div to a certain percentage of its parent:
#main-container{
width:65%;
}
This will leave space for the 3rd div to fall into later.
Then you want the second div to be the full width of the parent:
#cadiz-a-caballo{
width: 100%;
}
Finally you want to position the 3rd div in the space left to the right of the first div. To do this you need to position the parent so absolute positioning of the 3rd div will be relative to the parent, not the document:
#main{
position: relative;
}
Now, you just need to set the width of the 3rd div to the size of the space that is left, and then position it in the top right of the parent.
#frm-container{
width:35%;
position: absolute;
top: 0;
right: 0;
}
I've not included any margin between each element. You can adjust the widths to take this into account to add those margins.
The main issue with this approach is that the 3rd div needs to be the same height or shorter than div 1, otherwise as div 3 is out of the flow of the document, it will display on top of div2 as well (and any content below that too if long enough).
Well.. my english is not good, so i draw what i want..
FULL PAGE: http://d-3.me/full.jpg
The green container it's my content wrap. The Black and Red Squares, are some button's to access another pages.
So when i resize the page, i want to keep theses button's like this another image:
1024px Window Views: http://d-3.me/1024.jpg
this is my initial HTML :
<div id="wrap_home_bts">
<div class="bt_woman"></div>
<div class="bt_man"></div>
</div>
and this is my css:
#wrap_home_bts{
position:relative;
width:100%;
height:100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
position:absolute;
left:0;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
right:0;
bottom:74px;
}
but this way, the "button's" accompanies the resized window.
I clear?
Instead of positioning your blocks using left and right 0px, position them to 50%, and then align them the way you want using a negative margin. This should work, although you'll have to adjust the margins to fit exactly like you want:
#wrap_home_bts{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
display: block;
position:absolute;
left:50%;
margin-left: -650px;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
display: block;
left:50%;
margin-right: -650px;
bottom:74px;
}
http://jsfiddle.net/E4mmz/
.bt_woman and .bt_man are absolutely positioned in #wrap_home_bts which's width is set to 100%. That way #wrap_home_bts size will change with browser resizing and the position of .bt_woman and .bt_man will follow this element. Perhaps it will be better that .bt_woman and .bt_man to be outside the #wrap_home_bts. Then you may set some width to the body element with javaScript, like the width of the screen. That way they will never change there position on resize.