I have an image that is also a link using
<img src="img.png" id="cloud"></img>
And I centered it (and resized it) using
#cloud
{
display: block;
margin-left:auto;
margin-right:auto;
height:45%;
}
The problem is, the clickable area for the link extends across the entire web page, rather than just across the image. How would I fix this?
You could always use absolute positioning.
HTML:
<a href="link.html" >
<img id="centerimage" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" />
</a>
CSS:
#centerimage {
position: absolute;
left: 0;
right: 0;
top:0;
margin: auto;
}
JS Fiddle: http://jsfiddle.net/SinisterSystems/3TbVv/3/
If you needed to place the element within the range of your document structure, you could apply a wrapper with a CSS class of relative.
HTML
<div class="wrapper">
<a href="link.html" >
<img id="centerimage" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" />
</a>
</div>
CSS
.wrapper {
position:relative;
margin-top:25px;
}
#centerimage {
position: absolute;
left: 0;
right: 0;
top:0;
margin: auto;
}
JS Fiddle: http://jsfiddle.net/SinisterSystems/3TbVv/4/
Expansion: The reason why it was showing your link across the entire page is because you were using display:block; and there was no wrapper or any sort of containment for it. display:block; is inherently a 100% width element.
Furthermore, display:inline; wouldn't have worked either, as it would fix the problem, but just adjust it to the left edge of the screen. If it doesn't have a 100% width to go off of, it can't set margins.
Easiest solution would be to just wrapper it in, and style the wrapper element while you set some sort of absolute position with your img. That will ensure it will stay within the wrapper, and you can position the wrapper accordingly in your document by normal means, hence the relative style.
Not sure if this will work but try doing
<img src="img.png" id="centerimage" href = "link.html"/>
if this does not work try useing javascript or jquery
<img src="img.png" id="centerimage" onClick = "click" href = "link.html"/>
<script>
function click() {
window.location.href = "link.html";
}
</script>
then add this to the css
cursor: pointer;
Related
I am trying to understand why a div with display:block will not sit under another div with display:block
My mark-up is this:
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: absolute;
top:0;
left:0;
}
.container .text-left{
position: absolute;
top:35rem;
left:35rem
}
.container .text-right{
position: absolute;
top:35rem;
right:35rem
}
<div class="container" >
<img src="/image1.jpg" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="/image2.jpg" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
I am trying all sorts of stuff to make this work - overflows etc - but can't seem to get the second display block div to sit under the first.
EDIT: It seems that if you put position:absolute element/s inside a position:relative element - that may have height due to that element being an image - the absolute element/s removes this height. So you need to add it back in as height: X.
But why??
Is this due legacy mark up - using absolutes in ways not designed for?
Why would the browser not take into consideration the image height as default. And we could override this if needed.
Can anyone please enlighten me?
thanks
The reason you have lost height is because position:absolute; removes element from the flow, therefore your parent container won't be able to use it to work out its height. It's not legacy markup, it's part of the scope.
A quick excerpt from CSS-Tricks
The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.
If for whatever reason you are required to have that specific element as position:absolute; your next best bet would be to adjust the parent container using JavaScript/jQuery, however that might be a bulky fix.
My suggestion would be to try and achieve your preferred layout without using the absolute positioning, and then if you get stuck, post another question here explaining your desired layout and current code trying to achieve it.
EDIT
That being said, if the mentioned JavaScript/jQuery solution does not sound to bulky to you, you could try the following:
$('.container').each(function(){
$(this).css({
'padding-top': $(this).find('img').height()+'px'
});
});
This will add padding-top to the container based on the image size. Alternative, you could add an empty div below the image and adjust its height based on the image size.
To make it work just make the img and test_* position to relative instead of absolute. Why ? Position absolute removes element from the flow, that means that because all your container's childrens are absolute, it is like your container has no content, that's why it collapse.
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: relative;
top:0;
left:0;
}
.container .text_left{
position: absolute;
top:90%;
left:5%;
color: #fff;
}
.container .text_right{
position: absolute;
top:90%;
right:5%;
color: #fff;
}
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
I want to position an image (basically a logo) at the bottom right side of my page. I am trying to do it using TOP and LEFT. However, that doesn't have any effect. Moreover, I don't want to do absolute positioning but a relative positioning.
P.S: I know you can align towards the right by using align=right. But, is there also something to align to the bottom right?
<body style="height: 100vh; width: 100vw" background="images/background.jpg">
.........
<img src="images/logo.png" alt="logo" style="TOP:235px;LEFT:270px;">
</body>
Relative positioning will only move the element in relation to it's current position as defined by the current layout.
To fix it in relation to the viewport use fixed positioning
#ImSticky {
position: fixed;
bottom: 0;
right: 0;
}
<img id="ImSticky" src="http://www.fillmurray.com/140/100" />
Note:
This element will stay where it is regardless of the amount of content on the page. It won't move up or down when you scroll. Accordingly, this may not be precisely what you actually require.
Note 2:
Positioning is a very poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out LearnLayout.com
Hey try this, it has worked for me it will display your logo at right
bottom
<style type="text/css">
.log
{
position:absolute;
right:0;bottom:0;
}
</style>
<div class="log">
<img alt="mylogo" src="c1.png">
</div>
You can use position: fixed that will place an element relative to the viewport.
body {
height: 100vh;
width: 100vh;
margin: 0;
}
.logo {
position: fixed;
bottom: 0;
right: 0;
}
<body>
<img class="logo" src="images/logo.png" alt="logo">
</body>
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).
HTML:
<div>
<img src="Comp.png" id="comp"><iframe width="700"
height="526"src="http" frameborder="0" allowfullscreen>
</iframe>
</div>
CSS:
#comp {
display: block;
height:700px;
width: 800px;
margin-left: auto;
margin-right: auto;
}
iframe {
display: block;
height: 385px;
width: 752px;
padding-bottom: 5%;
}
Currently the iframe isnt showing up. previously I had used margin positioning to get it within the computer image, but when the browser window resizes it completely throws everything off. Can anyone offer any input? Help is appreciated. Thanks
JSfiddle: http://jsfiddle.net/bKPKh/
I wrapped the image and the iframe within a div with relative position. Also I have wrapped the iframe in a div with absolute postion and fix it above the image with left and top.
Here is an example of my code :
<div class="container">
<img src="http://i.imgur.com/Et22afT.png" height="200" width="200" />
<div class="frame">
<iframe src="http://www.bbc.co.uk" height="120" width="181"></iframe>
</div>
.container {
position:relative;
}
.frame {
position:absolute;
left:9px;
top:15px;
}
http://jsfiddle.net/7Beaa/
OP, have you considered a wrapper with relative positioning, and using absolute positioning on the children?
Relative positioning positions it as normal, but shifted by some number of pixels along both axis (and those numbers may be 0). On the other hand Absolute positioning takes an element out of the normal positioning entirely (kind of like putting something on a new layer in Photoshop) and positions it relative to the most recent ancestor with anything other than static positioning (which is the default), or the document as a whole if there is none.
Confusing, I know! The point is that the wrapper with position:relative; top:0px; left:0px; will work exactly like normal (...mostly), but then you can use absolute positioning to put the child elements wherever you want inside it. You'll need to manually set the height and width of the wrapper, because the absolute-positioned children are, as I said, on another "layer", so they can't affect anything on the main "layer".
I am trying to add the word "Invitations" to the top right of the page aligned with the "back to photos" link. However, when I add a new <div> then start a <p> the paragraph does not align to the page properly at all once I apply CSS.
I have uploaded the page where I am having trouble: http://ashliamabile.com/invitations.html
This worked for me:
HTML:
<div id="backtophotos">
<img src="images/backprint.png" border="0">
<p class="title">invitations</p>
</div>
CSS:
/*Drop the width property and set div to position:relative */
#backtophotos {
height: 20px; /* removed width */
background-repeat: no-repeat;
margin: 0 0 0 100px;
position: relative; /* set positon to relative */
}
/* Set title p to position absolute and remove margins: */
.title {
position: absolute;
right: 0;
top: 0;
margin: 0;
}
The above works because the div width is already "set" by the outer div, so you only need to worry about where the top right corner actually is if you change the layout. Otherwise, float-free right-aligned header.
Also, the only reason I explicitly set my margins to 0 for the .title is because p elements have their top and bottom margins set (and I think line-height). If you changed the p to a div (your choice, and a p has some value of being more explicitly meant for text), then your .title rule would just be:
.title {
position: absolute;
right: 0;
top: 0;
}
which is exactly what you are looking for without any additional tricks or tweaks (which is the name of my halloween rap album).
Personally, I would actually go with something more like:
<div id="backtophotos">
<h2>back to print<h2>
<h2 class="title">invitations</h2>
</div>
And deal with clearing all of the default browser css, as the above would be most semantic. I would also advise not using the image for your "back to print" text and explore one of the many CIR methods out there, as a screen reader won't be able to read the image aloud.
<div id="backtophotos">
<img src="images/backprint.png" border="0">
<p>invitations</p>
</div>
CSS
#backtophotos p{
float:right;
}
#backtophotos a{
float:left;
}
#backtophotos{ /*Clear float : any one of this method - micro clearfix, clearfix, overflow method, float, clear both */
overflow:hidden;
width:100%;
}