I’ve got some markup that doesn’t have much flexibility. It contains a simple link with an image inside of it. I’m trying to use CSS to get the image to display below the text. However, the only way I can do this is with absolute positioning. I thought there was another way to do this without having to resort to that. Any ideas? Also, I’m trying to get the image to display to the right of the text. I can do this by floating the image to the right, but the image appears all the way to the right of the container. Does anyone know how I can get the image to appear right next to the text? I don't really have the flexibility of adding a span tag around the link text.
a img{ position: absolute; top:30px }
<a href="#">
<img src="http://placehold.it/350x150”>
Enter Header
</a>
Not using position as you mentioned in your question, and keeping the same HTML you can put image right sided to text:
see the snippet below:
a {
display: inline-block;
width: auto;
}
a img {
float: right;
margin-left: 10px;
}
<a href="#">
<img src="http://placehold.it/150x100" />Enter Header
</a>
UPDATE Based on OP question in comment here is how to put text above image.
Thanks, what about the instance when I want the text above the image?
and after a discussion with OP, it was possible to use position after all.
a {
position: relative;
}
a img {
position: absolute;
top: 25px
}
<a href="#">
<img src="http://placehold.it/150x100" />Enter Header
</a>
Try setting the a as block, and relative:
a { display: block; position: relative }
this should work:
a img {
display:inline-block;
vertical-align:middle;
float:right;
}
a {
display:inline-block;
line-height:150px; (or any height of the image)
}
fiddle: http://jsfiddle.net/Monteduro/nt44h5r5/14/
Try using CSS display block.
http://jsfiddle.net/nt44h5r5/15/
a img {
}
To use float properly, you need to have a container (DIV) at a set width. I believe this is what you're looking for (jsfidd link).
Related
JSFiddle link -Code
I have wasted an hour on this stupid problem. I have made projects and it worked. I deleted that code in rage.
I wanted to center an image but there was a heading above the image. So, i wrapped them in a div and gave them a id[x].
What i tried #x - margin:0 auto width:50%; margin:auto; width:50%; margin: 0 auto; width:50%; margin-left:auto; margin-right:auto; and changing positions to relative.
What worked [not wrapped in a div] -
img {
display:block;
height: 200px;
width: 200px;
margin: auto;
}
h1 {
color:blue;
text-align:center;
}
But this code had a problem as the image is clickable, the whole width of where the image was became clickable, i don't know why.
You cannot have a block element inside an inline element. The anchor that the image would be wrapped in is an inline element. When you turn the child into a block element it will make the anchor take the entire width of the line, because you don't have a width setting on the anchor.
To fix this issue, display:block; should be display:inline-block;
Use text-align: center to center the image.
#test {
text-align: center;
}
img {
display: inline-block;
height: 200px;
width: 200px;
}
h1 {
color:blue;
}
<div id="test">
<h1>Hi, I am guy!</h1>
<a href="#">
<img src="//lorempixel.com/200/200">
</a>
</div>
if I understand your problem you want to both center the header and image that are wrapped in a div. You do not want the entire area of the div clickable just the image. Below is a fiddle.
If the above is correct it seems you just need to add the a tag around the img tag and not the div itself.
<div>
<h1>Header</h1>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" />
</div>
https://jsfiddle.net/gward90/7s45osxa/
UPDATE:
display: block will take up the width of the parent element everytime, as others have said use inline-block.
Only apply size to the img tag, and apply display to the a tag. The wrapper class with text-align: center is actually taking care of centering the img as well.
Here is the updated fiddle:
https://jsfiddle.net/gward90/7s45osxa/3/
Here is also your fiddle updated with my suggestions
https://jsfiddle.net/gward90/aLxecdk6/5/
For the life of me I can't figure out why my image isn't accepting the display: table-footer-group property. It seems to work when I have a div wrapped inside of an image but just an image itself isn't working. The problem is I can't wrap the image within a div and have to use the following mark-up but have the image placed below the text. All I'm trying to do is place the image below the text but for the life of me can't get this to work. Any ideas?
JS Fiddle with div wrapper: http://jsfiddle.net/kSsAB/4/
JS Fiddle with just image: http://jsfiddle.net/ro5cprzz/1/
HTML:
<div class="label-below">
<img alt="Some Text" src="http://placehold.it/350x150">
<span> Some Text </span>
</div>
CSS:
.label-below{
display: table;
}
img{
display: table-footer-group;
}
span{
display: table-row-group;
}
With the following caveats:
Without a little more detail on what you are trying to do,
Why you have the restrictions you do,
Whether or not your image is a known size, and
How it needs to interact with the parent elements / the rest of the page.
You could accomplish this with absolute / relative positioning: http://jsfiddle.net/v4ek6crn/
HTML
<div class="label-below">
<img alt="Some Text" src="http://placehold.it/350x150">
<span> Some Text </span>
</div>
CSS
.label-below{
position: relative;
}
img{
position: absolute;
top: 0;
right 0;
}
span{
position: absolute;
top: 150px;
right 0;
}
I have a div which has a background-img and and img element that is inside this div. I want the background-img to be shown on top of the img. Both images are positioned relative. I know this sounds a little weird, I mean this is a "background" image, but if there is any way for doing this that would really help me
This is my code in a simple way:
<div id="sample_div">
<img src="path of the image">
</div>
<style>
#sample_div{
position: relative;
background-img= url(another path);
}
#sample_div img{
position:relative;
}
</style>
More info about these images:
The background image is a floor with the 1800*150 dimension and I want to show 2 characters standing on top of it. I want to align these 2 images in a way that they stand on top of this floor image and their feet go a little under the top surface of the floor. Thought this might help to figure out what I reallt want to do
z-index: 100;
Z-Index, will always reposition of things, whether you want things in front or the back. And of course, to make things go back, make it a negative number. It dont have to be 100, I always just use larger numbers. Hope this helps
You can use pseudo elements for this case:
Demo: http://jsfiddle.net/GCu2D/364/
HMTL:
<div id="sample_div">
<img src="http://www.lorempixel.com/400/200/sports/2" />
</div>
CSS:
#sample_div {
position: relative;
}
#sample_div:after {
position:absolute;
content:url(http://www.lorempixel.com/400/200/sports/1);
top:0;
bottom:0;
right:0;
left:0;
z-index:1;
}
#sample_div img {
position:relative;
}
Don't need to move it anywhere, just hide the child image when you need to:
.hide-inner-contents {
background-image:url(src);
}
.hide-inner-contents > img{
display:none;
}
<div class="hide-inner-contents"><img/></div>
I could find a work around for this if I wanted but it seems wrong and am trying to learn to code in a neater way.
Basically I have a div with 3 images in it, the div is 700px, and each image is 220px,
So thats 660px with two 20px gaps left and right of the centre image, and the outside images going all the way to their end of the div.
Is there a quicker way of doing this without setting up seperate ids for each image?
.contentpictureblock { float:left; }
.contentpictureblock img {
margin-right:20px;
}
<div class="contentpictureblock">
<img src="http://...">
<img src="http://...">
<img src="http://...">
</div>
Doing the above^ pushes the third image to the next line, which is understandable. I know I could always make seperate divs for each image, and adjust the margins for each one but Im just wondering is there a quicker one off overflow type command that I could apply to the above? It would mean the right margin would be on all the images but would have no effect on its positioning in the last image.
Thanks for the help.
Use last-child selector:
.contentpictureblock img {
margin-right: 20px;
}
.contentpictureblock img:last-child {
margin-right: 0;
}
Modify the last image with an additional class:
<img src="..." class="last">
CSS rule:
.contentpictureblock img.last {
margin-right: 0;
}
Negative margins on the div.contentpictureblock will also do it. If there's a possibility that you will have more than 3 images, then this is what you will want to do.
div.contentpictureblock { margin-left: -20px; overflow: hidden }
I want to do something like this:
.even {
float: left;
text-align: left;
}
.even img {
float: right;
}
It's not working though. I'm hoping my problem is just a syntax one, but I can't see to figure out how to do this. I've dug around google, but I'm having trouble finding the right set of keywords.
The associated html I'd like to use should look something like ths:
<div class="linkBlock even">
<img class="linkThumbnail" src="graphics/links/thumbnail_oilcan.jpg" width="267" height="200"/>
<h2>oilcan press</h2>
<p>
oilcan press is a purveyor of handmade books & word-related artefacts.
if you'd like to commission work of a particular size or shape or theme let him
know via etsy or email: oilcanpress [!at] gmail.com
they will gladly make custom boxes as per your general requests of colors/concepts.
if you are desirous of sevral items a bundle can be arranged at reduced prices.
</p>
<p>
you can view much of his work on flickr.
</p>
</div>
I'd like for the text of that block to float and align left, and the image to float right. With the code I have written above, the image is being centered in the page above the text; it's not floating, it looks like it's still using the static layout.
I'm only a CSS dabbler but I think this should work:
div.even>img {
float: right;
}
This matches child img elements inside a div with class even.
<img> & <p> are both block-level elements and so they line-break unless other wise specified. You need to position the <img> & <p> inside the parent div, instead of trying to position the text on the parent div. You also need to specify a width for the parent div and the <p> tag. This is probably why you are seeing the text appear below the image, because it is defaulting to the width of the parent div and cannot fit side by side with the image even though it is floated. You probably want something like this:
.even {
width: 400px;
display: block; /*or inline-block*/
padding: 10px; /*just for a little visual spacing*/
}
.even img {
position: relative;
display: inline-block;
float: right;
margin-right: 25px;
}
.even p {
display: inline-block;
position: relative;
width: 250px;
float: right;
}
You should also move your <img> tag below your h2 tag as it might interfere with the float. (I'm assuming you want this to appear above the thumbnail and the text.)
Maybe you have a clear attribute defined for the paragraph or some other style sheets? Your code works fine for me.
Use Firebug to debug your css.