#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/
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 to have a nice looking box AND a nice looking logo in that box (logos are for example purpose only).
BUT I don't know how to do that.
I have my image tag look like this
<img class="col-sm-12 pull-right" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />
If I include the width="200" height="200" in the <img> tag, my view will look like this.
I got a nice looking box, but ugly logo(stretch).
Else if I include the width="200" only in the <img> tag, my view will look like this.
I got a nice looking logo, but ugly box(doesn't line up).
Either way, I chose will screw up my view. :(
You could put your image in a 200x200 div and center your image (but not stretch it) inside it like this:
.imgbox{
border:solid 4px grey;
border-radius:5px;
width:200px;
height:200px;
display: table-cell; vertical-align: middle
}
<div class="imgbox">
<img src="http://img3.wikia.nocookie.net/__cb20100520131746/logopedia/images/5/5c/Google_logo.png">
</div>
Using the background-size property is the simplest way.
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
* { margin:0; padding:0 }
figure.logo {
width: 200px;
height: 200px;
background-image: url('http://i.imgur.com/F0RRqFy.jpg');
background-size: cover;
}
<figure class="logo"></figure>
Editable Demo: http://jsbin.com/gituzu/2/edit?html,css,output
you can center the images horizontal and vertical to the parent width and height by using position: absolute;:
HTML:
<div class="img_wrap">
<img src="https://pbs.twimg.com/profile_images/453545705622106112/6ERHbJBN.jpeg" />
</div>
<div class="img_wrap">
<img src="http://wottageek.com/wp-content/uploads/2014/10/Dropbox-Logo.png" />
</div>
<div class="img_wrap">
<img src="https://longren.io/wp-content/uploads/2014/04/do.png" />
</div>
CSS:
.img_wrap
{
width: 200px;
height: 200px;
position: relative;
float: left;
margin-right: 10px;
border: 5px solid #ccc;
}
.img_wrap img
{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
example: http://jsfiddle.net/82bhzxfe/
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;
I have a div and an image inside it as a background:
<div id="background">
<img src="background.png" class="stretch" alt="" />
<div class="header">
<span>header</span>
</div>
<div class="picture">
<img src="pic" alt="" />
</div>
</div>
And the following css:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
.header {
position: absolute;
left: 12px;
top: 18px;
font-family: Arial;
font-size: 14pt;
color: #3A4549;
margin-bottom:
}
here's a fiddle: http://jsfiddle.net/3j7vk/
How can I add the image right under the header without specifying an absolute position?
Right now it goes under the background image. Thanks!
Is this what you're after?
http://jsfiddle.net/3j7vk/1/
Is there any reason you're not just adding the image as a background to the div?
#background {
background: url(background.png) no-repeat;
background-size: cover;
/*other rules*/
}
If the image is just a background, it shouldn't appear in the markup at all.
See this page on the background-size property.
It's odd that you're not using CSS's background-image property, but to answer your question, you can give elements z-index to specify their order and make them appear on top of each other. It only works when the position property is specified, but rather than making it absolute, make it relative:
.stretch {
width:100%;
height:100%;
position: relative;
z-index: 1;
}
Then give your .header a z-index of it's own:
z-index: 2;
But to be honest, using CSS's background properties would be the better option in my opinion.
Ok, if you want to use an img as your background you can do it like so:
<div id="background">
<img src="http://placekitten.com/g/600/600/" class="stretch" alt="" />
<div id="container">
<div class="header">
<span>header</span>
</div>
<div class="pic">
<img src="http://lorempixel.com/200/200/" alt="" />
</div>
</div>
</div>
css:
#container {
position:absolute;
top:0;
left:0;
}
#background, .stretch, #container {
width: 100%;
height: 100%;
}
.header {
font-family: Arial;
font-size: 14pt;
color: #3A4549;
margin-bottom:
}
.pic
{
height: 114px;
}
fiddle: http://jsfiddle.net/JKirchartz/SrvyD/
That way everything in your container flows like a plain html document and you don't have to position everything.
Should look like this:
[img] text text
text text
How is this accomplished?
Seems straight forward, but I'm struggling.
You can use display:inline-block;
img{
display:inline-block;
width:75px;
height:100px;
border:1px solid red;
vertical-align:top;
margin-right:10px;
}
div{
display:inline-block;
width:200px;
}
Example: http://jsfiddle.net/jasongennaro/SK9ad/
To make inline-block; work with IE7, add the following to each rule:
zoom: 1;
*display:inline;
Since you know the dimensions of the image:
HTML:
<div style="position: relative;">
<img id="theimg" ... />
<div id="besidetheimg">
</div>
</div>
CSS:
#theimg{
position: absolute;
top: 50%;
margin-top: -50px; // Half the width of the image
width: 100px;
height: 100px;
}
#besidetheimg{
margin-left: 100px; // width of image
}
It's a bit of a weird way to do it. I'm not sure if there is a better way though, and it works: http://jsfiddle.net/dvLqC/