I am using image gallery in which outer width is 100%. But image is going align left because gallery image position is absolute. I m trying to make aligned center plz help me.
outer div css code:
.wt-rotator .screen {
height: 500px !important;
left: -5px;
position: relative;
top: -11px;
width: 100% !important;
}
style on image css:
.wt-rotator .main-img {
border: 0 none;
display: none;
left: 0;
padding: 0 !important;
position: absolute;
top: 0;
z-index: 0;
}
Thanks.
Try adding css properties {left: 50%; right: 50%;}
Related
http://lucasdebelder.be/googledoodle/
I want to have the planet (bottom image) on top of the top image (the blue background/space). I have a main div class:"center" set on 'position: absolute' and around both of those images is separately a div wrapped with position: relative; but somehow they don't want to go and sit on top of each other, I've also tried it with z-index but that doesn't work either.
Thanks in advance.
Use these properties the planeet_achtergrond class:
.planeet_achtergrond{
position: absolute;
bottom: 150px;
}
I would recommend nesting the two images in a div then adding a class to each image. Then use margin: 0 auto to center the div to the page. This is my solution:
#googledoodle {
position: relative;
top: 0;
left: 0;
height:512px;
width:900px;
margin: 0 auto;
overflow: hidden;
}
.galaxy {
position: relative;
top: 0;
left: 0;
}
.planet {
position: absolute;
top: 380px;
left: 0px;
}
<div id="googledoodle">
<img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
<img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>
i changed all css. Here sample:
.center {
position: relative;
text-align: center;
width: 900px;
margin: auto;
overflow: hidden;
height: 500px;
}
.space_achtergrond {
width: 100%;
z-index: 0;
position: absolute;
height: auto;
bottom: 0;
}
.planeet_achtergrond {
width: 100%;
height: auto;
z-index: 100;
position: absolute;
bottom: -15px;
}
form {
position: absolute;
bottom: 15px;
z-index: 999;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
use overflow:hidden outer div.
if you want place divs inside a div with position:absolute, use position:relative for parent div.
if you want to stick a div bottom, use only bottom:0
I'm trying to solve my problem since one week, and I really try everything !
I have a two column layout (left: content / right: description of the content).
I want this two columns full height page and the only way I found is :
body {
margin: 0;
height: 100%;
padding: 0;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
text-align: right;
}
The closest way to center a div in my columns was to use (in CSS3) flexbox. But there is conflicts with the absolute position of my columns.
Here's the bootply I made to be more explicit :
http://www.bootply.com/1OovYNhx1E#
In this example, I'd like to center (horizontally and vertically) the <h1>TEXT</h1>
UPDATE
Bootply is a terrible tool. So I used Plunker to replicate your example. This includes Bootstrap and everything you had originally except:
.fluid-container and .row are combined.
#inner is now moved out of #leftcol
#inner has the rulesets previously mentioned.
Both columns changed height: 100vh
Added position: relative to body.
Added width:100% and height:100% to html and body elements.
#inner {
position: absolute;
left: 50%;
top: 50%;
bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
transform: translate(-50%, -50%);
z-index: 9999;
}
PLUNKER
OLD
Use the following ruleset on your center element:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You weren't clear as to where this centered div should be center in relation to. If you want it to be centered in relation to viewport, (i.e. edge to edge of screen) then the center div shouldn't be inside any column. I f you want it centered within the left column, then it's in the correct place. Regardless, if you use this solution it will center itself perfectly inside of whatever you put it into.
SNIPPET
body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
}
#leftcol {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: left;
background: brown;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: right;
background: yellow;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
outline: 3px solid red;
width: 25%;
height: 25%;
background: rgba(0,0,0,.4);
}
<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>
Finally find the answer HERE
With flexbox just add to your inner container :
margin: auto;
It will prevent the top scroll problem !
In my html I have the following
<article class="innovate">
<img src="img/entrepreneur-593358.jpg" />
<h1>We Innovate</h1>
</article>
And its CSS
.innovate {
position: relative;
margin-top: -140px;
text-align: center;
color: #fff;
}
.innovate img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
height: 100vw;
overflow: hidden;
}
.innovate h1 {
padding-top: 230px;
font-size: 80px;
}
I have tried a few things to make the overflow: hidden in the img tag work
but for some reason it doesn't. Any suggestions?
If you are trying to crop your image programmatically, I would recommend using the CSS clip property, which will clip an absolutely positioned element. The arguments specified are the top, right, bottom, and left coordinates of the rectangle to clip to.
The following example code will clip your image to be 60px wide and 200px tall:
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
I have a div header which is fixed to the top of the page with a nested div. The div container has a height of 70px, a fixed height.
I want the nested div to have a height of 100% of the screen, not of the container div.
This is my code:
<div class="header">
<div class="nested">Content</div>
</div>
My css:
.header {
height: 70px;
width: 100%;
background-color: #ccc;
position: fixed;
left: 0;
top: 0;
display: block;
}
.nested {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow-x: visible;
overflow-y: auto;
background-color: #ddd;
}
How can I get my nested div to be the height of the screen, not the container?
.header {
height: 70px;
width: 100%;
background-color: #ccc;
position: fixed;
left: 0;
top: 0;
display: block;
}
.nested {
display: block;
position: relative;
margin-top: 70px;
height:100vh;
background-color: #ddd;
}
Fiddle:https://jsfiddle.net/ek7zfzua/1/
For making the child div 100% in height, you will have to first let the parent div be 100%.
The child div cannot break open the boundaries of its parent and show up in complete screen unless the parent div boundaries are big enough.
You can use height:100vh instead of percentage: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css
div
{
position: relative;
top: 0px;
left: 0px;
}
div img
{
margin-top: -10px; /*img width is 20px*/
position: absolute;
top: 50%;
}
This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.
PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.
For the image you say top: 50%. 50% of what? It should be 50% of the parent element. What is the parent element set to? If it's not set to anything, therein lies the problem.
why not do something like this
div
{
position: relative;
top: 0;
left: 0;
}
div img
{
position: relative;
top:25%;
left:50%;
}
The relative for the image means 25% from the top of the div and 50% for the left side.
Try putting it as a background image if you just want the image there.
div
{
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
margin: 0px auto;
position: relative;
width: Xpx;
height: Xpx;
top: 0px;
left: 0px;
vertical-align: middle;
}
and for the text use a div inside and position it using margin, padding or whatever.
How about auto margins:
div img
{
margin-top: -10px; /*img with is 20px*/
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
This works for me in firefox 7
This is a good article on the subject from CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Test this:
div {
position: relative;
top: 0px;
left: 0px;
background: red;
width:500px;
}
div img {
margin-top: -10px;
//position: absolute; /*get it out*/
display: block; /*Important*/
margin: auto; /*Important*/
top: 50%;
}