I am putting together a simple website to catalog my DIY projects. I have a logo that I would like to have sit alone on the front page. Clicking this image would then link you to a home screen. I have the link working properly, and the image is centered nicely on the cover page (about 800px wide). The problem I am facing is that the clickable area for the link seems to extend past the right and left edges of my home screen.
Currently, the code for the image is as follows:
img.cent_img
{
margin: 0 auto;
display: block;
border: solid 3px #9966bb;
}
img.cent_img:hover
{
margin: 0 auto;
display: block;
border: solid 3px #997777;
}
<a href="home.html"><img src="../images/logo.png" class="cent_img" alt="XXX"
TITLE="YYY" width="800" height="330"/></a>
Does anyone know why the link is clickable beyond the edges of the image?
N.B. it is only clickable to the left/right. Above and below the image it functions as expected.
It happens because you center the image, not the link. The image creates margins on left and right side, which are within the <a> tag, making that area clickable.
Put your code into a <div>, and then center that <div>.
Example:
http://jsfiddle.net/eW9V9/
#logo {
width: 200px;
height: 100px;
margin: 0 auto;
display: block;
}
#logo img
{
border: solid 3px #9966bb;
}
#logo img:hover
{
border: solid 3px #997777;
}
<div id="logo">
<a href="home.html">
<img src="http://www.google.com/images/srpr/logo11w.png" class="cent_img" alt="XXX"
TITLE="YYY" width="200" height="100"/>
</a>
</div>
Related
Is there a possibility to align an image within its <img> tag?
Just to be clear, I do not want to align the <img> tag but the image inside that tag.
Example:
I have an image:
<img id="image" src="image.png" alt=""/>
And define a specific size for the tag:
#image {
width: 300px;
height: 200px;
}
Though image.png is just 200 x 100 pixels big. How to align it at the top left corner of the <img> tag?
I've tried it via CSS using text-align: left; vertical-align: top; and display: flex; justify-content: start; align-items: start; and via HTML using align="top left".
I found a hacky way via box-sizing: border-box; padding: 0 0 100px 100px;, though that requires to calculate the exact amount of pixels needed to move the image to a side or a corner.
Just posted the question, already found the answer. You need to use the CSS properties object-fit and object-position.
Explanation: Images are replaced elements and those to properties allow to influence the sizing and position of replaced elements.
So positioning the image at the top left corner works like this:
#image {
width: 300px;
height: 200px;
border: 1px solid black;
object-fit: none;
object-position: top left;
}
<img id="image" src="https://via.placeholder.com/200x100" alt=""/>
What u are expecting is not possible, <img> in one tag, which holds your image, there is nothing inside it.
If i am not wrong you are expecting some thing similar to the below working snippet, which is symantically correct
figure {
width: 300px;
height: 200px;
border: 1px solid #000;
}
<figure>
<img src="https://via.placeholder.com/100.png/369/fff" alt="Image" width="100" height="100">
</figure>
[OR]
you can use background-image within a img tag as shown below, hope it helps :)
#image {
width: 300px;
height: 200px;
display: block;
border: 1px solid #000;
background: url("https://via.placeholder.com/100.png/369/fff") no-repeat 0 0;
}
<img id="image" src="" alt=""/>
I have shop on Prestashop 1.6. I created a third view in product list. With one thing, I can't handle by myself. When You move cursor over image (in third view), it display next to it with large size and this is ok. How can I move this image a little bit more to right. If I use margin-left or padding-left, image is flashes. I hope You know what I mean.
<div class="left image">
<a href="#">
<img class="replace-2x img-responsive" src="/1-home_default/faded-short-sleeve-tshirts.jpg" width="250" height="250"></a></div>
.left {
float: left;
margin-left: 10px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.image{
width:32px;
height:32px;
}
.image a:hover img{
display: block;
position: absolute;
z-index: 999;
}
Thanks for help.
Kind regards
Try using an invisible border on the image that loads.
border-left: 10px transparent;
This should give you the space you need, and stop the flashing that occurs when using margin. However the image will still show when hovering this border. It really depends what outcome you desire.
I am trying to center some text within a banner (classic question I know). This banner is split into 12 columns, and there is a cross icon for closing the window in the left-most column. The text is centering in the available space between the cross icon and the end of the banner, rather than centering within the whole banner width. From the way the code is written I cannot see why it would be doing this. Here's the HTML:
<div class='col-xs-12 banner'>
<a class="navbar-brand cross-link" href="" ng-click="close()">
<img class="cross" src="/components/cross.png" alt="close">
</a>
<h1>{{title}}</h1>
</div>
with CSS:
.banner {
height: 70px;
background-color: red;
h1 {
color: white;
text-align: center;
}
.navbar-brand {
&.cross-link {
padding: 0px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 29px 28px 27px 28px;
}
}
}
When I inspect this on Chrome, the h1 is quite happily sitting within a full-width container as expected, but the image appears to be shifting it across so that it doesn't center properly. Can you see how to resolve this?
Thanks
You could set the .cross-link to absolute position. Remember to set the container position property to a value different from "static":
.container{ position: relative; }
.cross-link{ position: absolute; left: xxxx; top: xxxx; }
What you are missing is a closing } at the end of your .banner block OR at the end of the css you shared.
What I am trying to do is position a list element over an inline image rather than a background image.
I found that by trying to use a background image it wouldn't scale on a desktop browser like the other images and it made it very hard to test.
The image itself is a white box which will contain some flag buttons in it and at the moment the list is appearing underneath the image, not inside it.
Before, I did almost have it but I was using absolute positioning on the list and percentages for top and left values and on some devices it looked ok whereas on others it was a mess so I am just looking for a method that should be consistent in appearance across mobile devices.
HTML
<div id="wrapper">
<div id="top_header"><img alt="top banner" src="/img/banner_home_page.png" /></div>
<div id="international">
<span id="flag-container">
<img src="../img/flag-home.png" />
<span class="flag_buttons_container">
<ul class="flag_buttons">
<li><img src='./img/buttons/flag_uk.png'/></li>
<li><img src='./img/buttons/flag_ie.png' /></li>
<li><a href="http://www.us-site.us" ><img src='./img/buttons/flag_us.png' /></a></li>
<li><a href="http://www.german-site.de" ><img src='./img/buttons/flag_de.png' /> </a></li>
</ul>
</span>
</span>
</div>
</div>
CSS
#international{float: left; width: 100%; height: auto; margin: 0px; padding: 10px 5px 10px 5px;}
#international img{width: 92%;}
#flag-container {
position: relative;
top: 5px;
left: 5px;
}
.flag_button_span {
position: absolute;
margin:0;
padding: 0px 0;
}
.flag_buttons li {
list-style-type: none;
position: relative;
display: block;
margin-left: 12%;
width: 85%;
overflow:auto;
}
.flag_buttons img {
float: left;
}
Image Dimensions
The banner image is 480 px x 108px
The 'background' image is 400px x 456px
Each flag button is 164px x 30 px and there are 7 of them, I have only shown a few in the markup above.
I was reading online that to have an element on top of an image it had to be in a span which is why the markup is the way it is but feel free to change it to whatever works.
Any help appreciated.
Thanks.
Using CSS3 for your background image should work as you want with scaling without this hassle of hovering over an inline image. Check out these links:
http://www.css3.info/preview/background-size/
http://css-tricks.com/perfect-full-page-background-image/
Here's some HTML:
<div class="float">
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
And that is all aligned along the side of the page using this CSS:
div.float
{
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask
{
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left
{
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px; /* for modern browsers */
height: auto !important; /* for modern browsers */
height: 200px; /* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40);
}
img.left:hover
{
opacity: 1;
}
Basically, what this does is put a column of pictures on the left side of the page. No big deal. However, I need each of those pictures, which are album covers, to have album titles. The way these album titles look are as such: an orange rectangle with white text. This is then vertically centered over the img. The problem is that each image has a different height, so I need to align these titles specific to the img.
Also, as an add-on, I have created a gradient that causes the top of the first image to fade into white and the bottom of the last image to fade into white. When you hover over the fade, the images will begin to scroll using jquery. The problem here is that I can not get these gradients to stay in their fixed locations and cut off the bottoms and tops of images when the page is resized. I will attach images of how it looks.
Yet another issue, the albumTitle should be at 90% opacity. The image should be at 40% opacity. Hovering over the image should change the image to 100% opacity and the albumTitle to 30% opacity. Hovering over the albumTitle should have the same effect. I do not know how to fix this either.
For the first part: you can center the titles dynamically using jQuery.
http://jsfiddle.net/p7GzB/6/
Without jQuery you would probably have to use container divs, and a cross-browser solution for the vertically centered titles.