My images were centering perfectly until I decided to place an image behind another and use z-index. I was using relative positioning, but after moving to absolute, it aligns to the left.
How can I center it, even if window is resized?
Heres my code in a jsfiddle:http://jsfiddle.net/WJPhz/
HTML
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"> </script>
<center>
<div id="sign" style="z-index:1">
<img src="http://s9.postimg.org/bql0ikclb/dope.png" alt"">
</div>
<div id="numbers" style="z-index:0">
<img src="http://s9.postimg.org/z3j212sov/image.png" alt"">
</div>
</center>
CSS
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
}
Javascript
$(document).ready(function() {
$('#sign').hide().delay(1000).fadeIn(3000);
$('#numbers').hide().delay(2000).fadeIn(3000);
$("#sign").click(function() {
$('#sign').fadeOut(3000);
});
});
A workaround would be to put your images in another div and center that div:
html
<div class="center">
<div id="sign">
<img src="http://s9.postimg.org/bql0ikclb/dope.png" alt"" />
</div>
<div id="numbers">
<img src="http://s9.postimg.org/z3j212sov/image.png" alt"" />
</div>
</div>
css
.center {
position:relative;
max-width: 241px;
margin:0 auto;
}
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
z-index:2;
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
z-index:1;
}
http://jsfiddle.net/peteng/WJPhz/2/
Try this one maybe this can help http://jsfiddle.net/markipe/WJPhz/1/
CSS
left:50%;
margin-left: -120px; /*div width divide by 2*/
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
margin-left:calc(50% - 120px);
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
margin-left:calc(50% - 120px);
}
This should work.
Related
Hello i have found a nice javascript effect of box in
link 1
link 2
But it's for wordpress only.
Is it possible to make same slide box with Bootstrap and javascript/jquery?
This is a very simple example of recreating the slide down effect on the links you posted. It can be done fairly easily just using html and css.
<div tabindex="1" class="mainbox">
<h1>
This is a box with hidden content
</h1>
</div>
<div class="hidden">
<h2>
I am no longer hidden
</h2>
</div>
div {
width:500px;
height:200px;
background:#3c3c3c;
color:black;
}
.mainbox {
cursor:pointer;
position:relative;
z-index:1;
}
.mainbox:hover {
outline:none;
}
.hidden {
position:absolute;
top:0;
z-index:-1;
opacity:0.75;
-webkit-transition:top 1s;
-moz-transition:top 1s;
}
.mainbox:hover + .hidden {
top:200px;
-webkit-transition:top 1s;
}
https://jsfiddle.net/tz3vjLg7/
Try this; with this approach you can move the main container to any place you want, add margins, paddings, etc to main-container without having to also re position the sliding panels inside
.main-container {
position: relative;
margin-left: 50px;
}
.main-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: lightgrey;
z-index: 1
}
.slide-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: blue;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.main-container:hover .slide-panel {
opacity: 1;
transform: translateY(150px)
}
<div class="main-container">
<div class="main-panel"></div>
<div class="slide-panel">Slide Panel</div>
</div>
i am using three div tags like this
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
css
#main
{
width:auto;
height:auto;
margin-left:-100px;
}
#content{
width:auto;
height:auto;
border:5px solid blue;
}
#sub
{
width:100%;
height:100%;
border:1px solid red;
}
so i kept everything auto. But even when i resize or change the margin of main parent the last child not adapting to it.
I am not sure what may be the problem. But when i set width and height as 100% in resize or margin change event it seems adapting.
Can anyone help me out in this? And also is there anyway to detect the parent div attribute changes in some event??
JSFIDDLE
Try This
$(document).ready(function() {
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
$('button').click(function() {
$('#main').css('margin-left', '0px');
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
});
});
#main {
width: auto;
height: auto;
margin-left: -100px;
}
#content {
width: auto;
height: auto;
border: 5px solid blue;
}
#sub {
width: 100%;
height: 100%;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
Working Demo
You are setting the width from JS. Try this.
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
#main
{
margin-left:-100px;
}
#content{
border:5px solid blue;
}
#sub{
display: block;
border:1px solid red;
}
$(document).ready(function(){
$('#sub').css('height',$('#content').height());
$('button').click(function(){
$('#main').css('margin-left','0px');
});
});
JSFiddle
I have 1 div and 1 image tag , one upon the other. Div is smaller than image.
I have set overflow=visible for div. My question is that, when I insert an image to image tag, the content which is overflowed through div should be opacity=0.5 like this.
for me it shows like this.. any help
<div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm;top: 20px; left: 20px; position: relative; overflow: visible;" id="divimg">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
</div>
If you can change HTML to something like this:
<div id="holder">
<div id="overlay">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" />
</div>
<div id="box"></box>
</div>
CSS:
#holder {
width:500px;
height:250px;
position:relative;
overflow:hidden;
}
#overlay {
width:500px;
height:250px;
opacity:0.5;
}
#displayimg {
width:500px;
height:250px;
}
#box {
width:250px;
height:100px;
background-color:black;
position:absolute;
left:200px;
top:70px;
overflow:hidden;
}
#box #ima {
position:absolute;
width:500px;
height:250px;
display:block;
}
And little JQuery magic:
$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima" /> ');
$('#ima').offset($('#holder').offset());
$( "#box" ).draggable();
$( "#box" ).draggable({
drag: function() {
$('#ima').offset($('#holder').offset());
}
});
Since you have mentioned dragging, i have imported JQuery UI in fiddle:
http://jsfiddle.net/y3c41d10/1/
For resizing, you will have to do some calculations, but it is doable, i hope...
Here is the demo for your requirement.
.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}
<div class="outter_div">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>
JSFiddle demo
This is what I came up with:
<div class="container">
<div class="main">
<div class="sub">This is a text</div>
</div>
</div>
.main {
background-image:url(http://lorempixel.com/g/200/200/);
position: relative;
}
.container {
width:300px;
height:300px;
}
.sub {
text-align: center;
padding:15px;
border: solid 30px rgba(255, 255, 255, 0.5);
color:white;
}
Here is the JSFiddle demo
I want to display the button in div tag on right side.I use the code which I used to display the div content on right side.Now I have a problem that my div tag display on left side.
I want to display login div tag on right side.
I created a layout.I want to display login div tag where I marked as red and named it btn div.I marked current display of div tag in blue color.
CSS
.login {
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
http://jsfiddle.net/mount/q4gxv7y2/
You can use an absolute position for your login div. For that, you also have to set the header position as relative, in order to make position the login div relatively to it.
Position absolute but relative to parent
.header{
position:relative;
background:red;
width:100%;
height:100px;
margin-bottom:300px
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
background:blue;
}
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
html:
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">
<input type='button' value='right click' class='right-button'>
</div>
</div>
css:
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
border: 1px red solid;
height: 100%;
position:relative;
}
.header{
width: 100%;
height: 100px;
border: 1px green solid;
}
.right-button{
position:absolute;
bottom:0;
right:0;
}
Jsfiddle Demo
You can use something like this:
CSS
.login {
margin:0 auto;
padding:0
text-align:right;
float:right;
width:40%;
}
.ribbon{
float:left;
}
.logo{
float:left;
}
.header {
width:100%;
height:auto; // or specify the max height of content
outline:none
position:relative;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
Use position:absolute to achieve this.
HTML
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
CSS
.header {
width:100%;
height:40px;
outline:1px solid green;
position:relative;
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
outline:1px solid red;
position:absolute;
right:0;
bottom:0;
}
JSFiddle demo
Side note: Keep in mind that class is only used for objects placed more than once on a page. If an object is only placed once on the page, in your case for example: header, logo, then you should use id instead of class. Biggest reason for this is because id's have a higher specificity score compared to classes. So you can give styles to all objects more controlled.
Something like:
.header {
position: relative;
}
. login {
position: absolute;
bottom: 0;
right: 0;
}
I have a gallery grid that has four div containers. I want to enclose whatever image inside the divs, keeping in mind that each div box has a different height and width. The should be centered in the div leaving reasonable padding on all sides. Please check the link to get a better understanding JsFiddle
http://d.alistapart.com/fluid-images/3-4.png
Any help is highly appreciated.
enter code here
<div id="body">
<div class="container">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h2">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h3">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container w2">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
.container {
height:100px;
width: 100px;
overflow: hidden;
position: relative;
margin-bottom: 10px;
float: left;
background: #CCC;
border-radius: 5px;
cursor: pointer;
box-shadow: 4px 0 2px -2px rgba(0, 0, 0, 0.4);
}
.magic {
max-width:90%;
height:70%;
}
.h2 {
height: 210px;
width: 220px;
}
#body {
margin: 10px;
}
.h3 {
width: 340px;
height: 210px;
}
.w2 {
width: 220px;
}
I'm not sure that i understood your problem... if you use
.magic {
max-width:100%;
max-height:100%;
}
with big pictures what is the problem ?
you want them to fill the entire div AND respecting theire size ratio ?
I recommend adding these images as a background-image property to a block-level div, such as:
<div class="container">
<div class="magic" style="background-image: url(SOURCEHERE.JPG)"></div>
</div>
With additional CSS like:
.container{
width: 100px; /* or some other width */
height: 100px; /* or some other height */
padding:20px; /* this will add a little margin around your image */
box-sizing:border-box; /* padding will be calculated with the container dimensions */
}
.magic{
width:100%;
height:100%;
background-size:contain;
background-position:center center;
background-repeat:no-repeat;
box-sizing:border-box;
}
jsfiddle: http://jsfiddle.net/PDL2U/