How can I insert two images in css, center them ?
I would like to have something like that: link
My actual css look like this, with one image centered :
position: absolute;
top: 0;
bottom:0;
left: 0;
right:0;
margin: auto;
u can use margin-top or right and set position:absolute for img element in css
Live DEMO
CSS:
img{
position:absolute;
margin-top:100px;
right:25%;
width:50%;
}
#leftdiv{
position:relative;
float:left;
background: #e7e7e7;
height:500px;
width:50%;
}
#rightdiv{
position:relative;
float:right;
height:500px;
width:50%;
background: green;
}
HTML:
<div id='leftdiv'>
<img src='http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg'/>
</div>
<div id='rightdiv'>
<img src='http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg'/>
</div>
modifying the answer of this example : link
check that demo
css
.image_container {
width: 50%;
height: 300px;
line-height: 300px;
background: #eee;
text-align: center;
float:left;
}
.image_container img {
vertical-align: middle;
}
Html
<div class="image_container">
<image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>
<div class="image_container">
<image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>
,also you can check that page
Set width for image container.
Set margin : 0 auto;
Related
I need to positionate several dots on one image with css.(see example)
I'm using the code below (for dot number 1):
<div id="photo1">
<div class="dot" style="left:calc(50px - 20px); top:calc(553px - 20px);">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>
and css :
#photo1 {position:relative; width:100%;}
.dot {position:absolute; width:40px; height:40px; background:#000; font-size:24px;line-height:40px; text-align:center; border-radius:50%; color:#fff; z-index:90;}
I don't have any problem still my picture width is 100% (e.g 580px). My coordinates x and y are calculted for that.
But, if I reduce my screen width (smartphone or tablet), the current image width is less than 100%.
If I supposing that the image width is 60%, how can I write something like this :
style="left:calc((60% * 50px) - 20px);top:calc((60% * 553px) - 20px);
to adjust position of my first dot regarding the current image width.
Do you have any ideas ?
Thanks a lot for all replies or suggestions.
Here is an example using percentage positioning:
https://codepen.io/lokase/pen/MWaxgjq
HTML:
<div class="con">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</div>
CSS:
.con {
max-width: 600px;
position: relative;
}
.dot {
background: red;
border-radius: 50%;
height: 20px;
position: absolute;
width: 20px;
}
.dot1 {
top: 10%;
left: 10%;
}
.dot2 {
top: 30%;
right: 20%;
}
.dot3 {
bottom: 40%;
left: 50%;
}
img {
width: 100%;
}
try positioning the elements using %. That would alter the width as the element's width changes.
Try something like this.
I have made it fixed to bottom.
For left I have given 10%, but you can change that to your requirements (580/30=19.33%).
#photo1 {position:relative; width:100%;}
.dot {position:fixed; width:40px; height:40px; background:#000; font-size:24px;line-height:40px; text-align:center; border-radius:50%; color:#fff; z-index:90;}
<div id="photo1">
<div class="dot" style="left:10%; bottom:0px;">1</div>
<img id="big" src="/img/art/big32695-1.jpg" alt="example" title="example" />
</div>
I want 100% wide divs containing images to go down my page.
On top of these divs, I want one 1210px wide div where I can put my content.
Example:
http://mudchallenger.com/a-responsivee.html
Question:
How can I get the blue box to touch the green box, while red box stays above the two?
Thank you!
I currently have this:
}
#green{
position: absolute;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: green;
}
#blue{
position: relative;
float:center;
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
background-color: blue;
}
#red{
position: relative;
float:center;
height: 800px;
width: 1210px;
margin: 0 auto;
z-index:2;
background-color: red;
}
Use background-images to accomplish what you want. Just stack your divs and it should work just fine. If you want your content to span two containers with background images, that's a different story, but the example you cite doesn't do that.
Here's a fiddle giving close to an implementation of what you want. Just replace the container background-colors with background-images and you'd have what you want.
http://jsfiddle.net/CfZu4/
HTML:
<div class="container">
<div class="content">
Blah
</div>
</div>
<div class="container red">
<div class="content">
Blah
</div>
</div>
CSS:
.container{
background-color:#00f;
height:200px;
clear:both;
}
.content{
float:right;
width:40%;
height:150px;
margin-top:20px;
background-color:#0f0;
}
.red{
background-color:#f00;
}
EDIT: Scaled down version for fiddle:
http://jsfiddle.net/dc2bar/asy8Y/2/
HTML:
<div class="background-banner green">
<div class="main-content red">
<!-- content -->
</div>
</div>
<div class="background-banner blue">
</div>
CSS:
.background-banner {
height: 500px;
width: 100%;
margin: 0 auto;
z-index:1;
}
.main-content {
position: relative;
height: 800px;
width: 70%;
margin: 0 auto;
z-index:2;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
EDIT yet again: removed invalid css rule.
My HTML structure is basically this -
<div id="header">
<div class="container">
</div>
</div>
<div id="content">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
Ignore any elements except <div id="header">
I want to align <div class="container"> inside <div id="header"> at exactly bottom center. I'm using the following CSS code-
#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }
There are height differences between the parent (#header) and child (#header .container) DIVs. Removing position:absolute; from the child centers it but it sticks to the parent's top instead of bottom. Keeping position:absolute; sticks it at the bottom but aligns it to the left.
How do I align it both center AND bottom at the same time?
I tried all the solution above but it didn't work when you resize the browser window. This solution is mostly to be applied when you don't know the element's width. Or if the width is changed on resize.
After making some research I tried the following and it worked perfectly on all screen sizes.
#somelement {
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
I shared this for anyone still facing this issue.
try in this way:
#header .container{
width: 940px;
height: 262px;
background-color: #220000;
position: absolute;
bottom: 0 ;
left: 50%;
margin-left: -470px;
}
try this
#header .container {
width: 940px;
height: 262px;
background-color: #220000;
margin: 0px auto;
position: absolute;
bottom: 0px;
left: 61px;
}
use this:
#header{
width:1062px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}
#header .container{
width:940px;
height:262px;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here the jsfiddle
UPDATE:
As DenisVuyka said in comment, i should add that the above sample was as answer to this particular question with fixed height for DIV.
If you want that height of DIV don't break up things then for example you should use padding-top:10%; in the #header and height:100% in #header .container CSS.
#header{
width:462px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;
}
#header .container{
width:300px;
height:100%;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here is a demo: http://jsfiddle.net/d6ct6/ .
I was trying to get this to work in my project as well. I've edited this jsfiddle:
http://jsfiddle.net/d6ct6/
<div id="header">
<div class="container">
</div>
</div>
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#header .container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
left:calc((100% - 300px)/2);
}
But I've found this only works when the width of .container is fixed.
If the width of .container is not fixed you would need javascript to find it's width and then change that width in the calc.
When the widths are responsive, use this:
HTML
<div id="header">
<div id="container">
</div>
</div>
CSS
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
}
JS
$(document).ready(function () {
var parentWidth = $('#header').width();
var trapWidth = $('#container').width();
var deadCenter = (parentWidth - trapWidth);
var deadHalf = Number( deadCenter / 2 );
$('#container').css("right", deadHalf);
});
In case you care more about having the inside div aligned in the center and can manually set the vertical alignment.
DEMO Height I used was first div height - second div height.
#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
I would take advantage of CSS table display properties and do the following:
#header {
width:1062px;
height:326px;
background-color:#110000;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
#header .container {
width:900px;
height:262px;
background-color:#cccccc;
color: white;
display: inline-block;
}
Set the #header block to display: table-cell and set vertical-align: bottom to align the child's bottom edge to the bottom edge of the parent.
The child .container element had display: inline-block and this will allow it to respond the text-align: center property of the parent.
This will work regardless of the width of the child .container.
Demo fiddle: http://jsfiddle.net/audetwebdesign/p9CxE/
This same problem was bedevilling me for an hour or so, until I realised I could add an intermediary div; this separated the vertical alignment issue from the centering.
.dparent {
border: 1px solid red;
width: 300px;
height: 300px;
position: absolute;
}
.dchild {
border: 1px solid blue;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 100px;
bottom: 0px;
position: relative;
}
.dmid {
border: 1px solid green;
width: 100%;
position: absolute;
bottom: 0;
<div class="dparent">
<div class="dmid">
<div class="dchild"></div>
</div>
</div>
Do the vertical alignment first, with an absolute position and the 0 bottom. Then do the centering with margin-left and margin-right set to auto.
You might try this solution for any concerned width:
width:100%;
position:absolute;
bottom: 5px;
left:50%;
margin-left:-50%;
Good luck!
I want to move a div to the bottom but it doesnt move if i write in percentage,but in pixels it works.
Here's the css:
<style type="text/css">
html
{
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:auto;
}
div#container
{
position:relative;
width: 100%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
#g_image3
{
width: 100%;
}
body {text-align:center;margin:0}
</style>`
Here's the html:
<body bgColor="#000000">
<div id="container">
<div id="g_image3" style="position:absolute; overflow:hidden; left:0px; top:0px; z-
index:1"><img src="images/top_bg.jpg" alt="" title="" border=0 width="100%"
heigth="100%"></div>
<div id="g_image4" style="position:absolute; overflow:hidden; left:0px; top: 10%;
width:265px; height:400px; z-index:1"><img src="images/content1.png" alt="" title=""
border=0 width=265 height=400></div>
</div>
</body>
Here is a link with the picture of a page
I want to move g_image4 in the bottom, but it keeps remain
clinging of the g_image3 if i write it in percentage.In pixels it works but i need it in percentage nto in pixels.
Where do i mistake?I dont get it why it dont move....
You have set a height: 100% on the html element but neglected to do so on the body and #container elements. This results in the body and #container elements having a height of 0, as there is no static or relative-positioned content in them to give them a height.
#col{
width:200px;
float:left;
overflow:visible;
position:relative;
z-index:2;
}
<div id="col">
<img style="margin-left:-6px; z-index:999; position:relative;" src="img.jpg" />
</div>
I want the image to stick out to the left by 6px but it is being cut off.
Also do I have to put 4 spaces in font of every line of code this is very slow!
your image is being cutt-off, because you are using overflow on your parent div#col
<div id="col">
<img src="img.jpg" alt="some info">
</div>
CSS
#col{
width:200px;
float:left;
position:relative;
/*overflow: visible;*// remove
/*z-index:2;*// no need to do that
}
#col img {
position: absolute;
top: 0;
left: -6px;
width: width of image in px;
height: height of image in px;
}
Is this what you're looking for?
http://jsfiddle.net/qPhba/