I have some images inside of an <li> that I am wanting to make a link. Only the bottom half of the image is clickable. I have tried different structures and looked into jquery solutions, but want to keep it pure css.
<div class="link">
<ul>
<li>
<a href="url">
<img src="image">
</a>
</li>
</ul>
</div>
.link {
white-space: nowrap;
text-align:center;
}
.link li {
max-width: 23.3%;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.link img {
max-width:100%;
}
Add display:inline-block to the a link and make it wrap around the images, with height:100% and width:100%.
I found a deeper problem. My header was overlapping that area.
Related
I have a bug in my CSS when it comes to a responsive page with images.
Demo: https://jsfiddle.net/xr4getom/
You'll notice on this example that a dark background (#222) appears at times when you resize the window. Is there a fix for this that would just force the image to take up this area - while keeping the ratio correct?
I have omitted the CSS from here as it goes over the character limit but if you click the demo link, you can see it.
<section class="news-bloc">
<div class="news-container">
<h1>Latest News</h1>
<ul class="news-list">
<li>
<a href='#' target='_blank'><img alt='' class='img-responsive photo-thumb image-link' src='https://scontent.cdninstagram.com/t51.2885-15/s320x320/e15/c157.0.406.406/14504934_1825657564379158_1219547695887155200_n.jpg?ig_cache_key=MTQwMDU3NTA0ODg3NjAyNTIxNA%3D%3D.2.c'>
<p>View Post</p></a>
</li>
</ul>
</div>
</section>
Set the image in the background of your <a> instead of using <img> tag. Like:
HTML:
<ul class="news-list">
<li>
<a href='#' target='_blank' style="background-image: url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e15/c157.0.406.406/14504934_1825657564379158_1219547695887155200_n.jpg?ig_cache_key=MTQwMDU3NTA0ODg3NjAyNTIxNA%3D%3D.2.c');">
<p>View Post</p>
</a>
</li>
</ul>
CSS:
.news-list li a {
display: flex;
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
}
Have a look at this jsFiddle Demo.
Hope this helps!
Your <li> element is having width more than that of image. Try setting your li width to auto -
ul.news-list li {
float: left;
width: auto; <-- Changed here
margin-right: 1.63934%;
float: left;
margin-bottom: 1.63934%;
background-color: #222
}
Found a solution! :-)
ul.news-list>li>a {
width: 100%;
}
you can use margin-bottom:-5px; in the css code
I have tried using float left/right, which puts them next to each other but I want them to be evenly spaced from left to right. I tried using padding/margin tags, but they don't work either. Any help would be appreciated!
Code:
<div class="options">
<ul style="list-style:none;">
<li>
<img src="magger.jpg" width="180" height="180"/><br> Do Stuff To His Dog
</li>
<p>
<li>
<img src="me.jpg" width="180" height="180"> <br>Examine His Checkered Past</p>
</li>
<p>
<li>
<img src="wife.jpg" width=180 height=180><br>Sexually Harass His Wife</p>
</li>
</ul>
CSS:
.options li {
float:right;
}
You're over complicating it:
HTML:
<div class="images">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>
CSS:
.images {
text-align : center;
}
.images img {
width : 75px;
height : 75x;
margin : 10px;
}
Demo: http://jsfiddle.net/6VrJR/
add this to your css-code:
ul{
width : 550px;
margin: auto;
}
here is a jsfiddle as well
Define width and auto margin for the UL. Also, give margin and text-align center for the text.
.options ul {
width:564px;
margin:auto;
padding:0;
}
.options li {
float:right;
text-align:center;
margin:0 4px;
}
Here is the jsfiddle: http://jsfiddle.net/EASFG/
Do not use floats:
Instead of using floats for your children elements, let them flow inside an anchor tag. Anchor tags have inline as default display behavior (add display: inline; if you need to use another tag instead).
The trick that centers the links is the container text-align: center; property.
This can be translated in code as follows:
Define your container class
.container {
width: 100%;
text-align: center;
display: block;
margin: auto;
}
Create your HTML structure:
<div class='container'>
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
</div>
Demo: http://codepen.io/manuelro/pen/Abgox
Regards,
M
I am having trouble creating a different image to appear when you place your curser over the original image. Heres my code without the rest of my listed buttons:
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
</ul>
</nav>
Css:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover {background: url(../img/Home_crack.PNG)}
Any suggestions?
EDIT: Okay great suggestions, however when I hover over the "home button" now the stuff in the float tweeks out. Heres the code with the full float properties:
HTML:
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
<li class="left">
<a href="www.google.com" class="menu">
<img src="img/Menu_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="about">
<img src="img/About_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="contact">
<img src="img/Contact_2.png"></a></li>
</ul>
</nav>
CSS:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover img{display:none}
.home:hover {background: url(../img/Home_crack.PNG);}
.right{float:right}
Basically i wanted to separate 4 buttons.... one in the left float and one in the right float, then on the hover, the buttons would change to a different image....With the new img{display:none} the left float rapidly flashes.
If you want a different img on :hover, you can add it via the :after psuedo element with a background-image.
This approach works well for dynamic img dimensions.
jsFiddle here - different img will be displayed on :hover of a.
a:hover:after {
content: "\A";
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
background: url('http://...');
top: 0px;
left: 0px;
}
You're changing the background of the <a> tag, which happens to be completely filled with the <img>. As such, the background is effectively invisible because the img is completely covering it. Try putting in a
.home:hover img { display: none }
rule as well to hide the img when you are hovered. That'll allow the background to "show".
Try adding the following line, this will hide the orriginal image when hovering the link:
.home:hover img {
display: none;
}
I think the other image is being showed, but the default image won't dissapear and is simply before the hover image.
Now, I do also recommend you to change the display style of the a element to block and give it a fixed size like so because the a element will get a size of 0 when hiding the image element:
.home {
display: block;
width: 100px;
height: 100px;
}
Finally I recommend you to have the default image as a background in the a element too, just to make sure it will appear exactly the same as the hover image. Now you are using an img element to show the default image, a different element to show the hover image. I recommend you to prevent this, and try to use one single element. Simply add this line to achieve this:
.home:hover {
background: url(../img/Home_2.png)
}
Hope this helps!
In addition to everyone else here saying to add this to the css:
.home:hover img { display: none }
You will also need to add a height and width to the a tag that you are putting a background on or the tag will have no content in it and it will not show at all.
.home:hover {
background: url(../img/Home_crack.PNG)
width: [enter the width of the bg image];
height: [enter the height of the bg image];
}
How do i create a link like this with HTML and CSS:
It does not respond as i hoped it would.
What i try to accomplish is create a navigation link that hold a image on the left, and 2 lines of text right next to the image and not below the image.
html:
<div id="nav">
<img src="http://www.werkenbijavl.nl/images/WerkenBijAVL/icon-email.png" heigh="24px" width="24px" alt=""> Line 1<br><span>Line 2</span>
</div>
css:
nav a {
background: grey;
padding: 10px;
text-align: center;
text-decoration: none;
line-height: 24px;
vertical-align: middle;
}
nav img {
padding-right: 10px;
}
nav span {
font-style: italic;
}
Inline-block should fix your issues: http://jsfiddle.net/sZnaR/
The HTML:
<a href="#">
<img src="blah" />
<span class="text">
Line 1<br/>
Line 2
</span>
</a>
The CSS:
a {
display: block;
text-decoration: none;
}
a img {
display: inline-block;
width: 30px;
height: 30px;
}
a span {
display: inline-block;
}
Your text elements render as inline elements, and because of that, wrap underneath the image.
You're better off putting the image as a background image on the link using CSS then using Padding to align the text to the image, making sure you've allowed enough padding for the text to clear the image on the left. Also, use the background position to position the image to the right or wherever if you need it there. It also makes the HTML a lot cleaner and easier to read.
edit if you need dynamic images for each link you can always use an inline style to specify the background-image url.
You can also do this by floating it to the left.
Like this
<span style="line-height:15px;float:left">Line 1<br>Line 2</span>
Working Fiddle
HTML:
<div id="nav">
<a href="#">
<img src="http://www.werkenbijavl.nl/images/WerkenBijAVL/icon-email.png" heigh="24px" width="24px">
<div>
Line 1<br>
Line 2
</div>
</a>
</div>
CSS:
#nav img, #nav div{
float: left
}
This will make "Line 1", "Line 2" - and whatever lines you put in their - be always to the right of the image.
If you want text to wrap around the image, change your CSS to be:
#nav img{
float: left
}
I need some help centering some images
HTML:
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<br>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
CSS:
ul.thumbs {
clear: both;
padding-left: 0px;
}
ul.thumbs li {
display: inline-block;
/*float: left;*/
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #DAA12F;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
height: 120px;
width: 120px;
margin: 0px auto;
}
I need the images be centered together so that they remained lined up. Ive tried using:
ul.thumbs {
text-align:center;
}
but since there are a different number of images on each row, they move out of alignment
Thanks for the help, this is driving me crazy
EDIT: I thought I found a solution using this as a guide: http://www.tightcss.com/centering/center_variable_width.htm but if the images go over more than row, they no longer center. Originally I put a br tag to break up the rows and that fixes the problem, but a JS library Im using doesnt play nice with br tags between list items. Any suggestions (you can see the issue here http://jsfiddle.net/HvZva/26/)
There is two solutions to this, one is if you want your images to be centered and the another is if your images should be aligned left, but centered on the page.
Center block, left align images
To do this you need to add the following to your css (or see: http://jsfiddle.net/HvZva/20/)
ul.thumbs{
margin:0 auto;
width:416px;
}
what I do is basicly to tell the browser that this un ordered list should have an equal margin to both sides. But since this object has an width of 100% as standard, we need to specifiy that aswell, and in this case it is 416px.
Center align images
If this is static content, one easy way to do this is to add a div with the class of center that wraps each line, and then adding "text-align:center;" to those divs, that will do the trick.
note: there is one new way to center the block, but aligning the images to the left. but that involves the box flex model and css 3, and it has not yet been implemented by browsers yet
Applying text-align: center; to .thumbs.noscript ul fixes it in the jsfiddle
You can give the parent element a width and apply margin-left: auto; margin-right: auto;
http://jsfiddle.net/HvZva/13/
ul.thumbs {
display:inline-block;
text-align:center;
}
Something like this? http://jsfiddle.net/HvZva/11/
I may have mis interpreded your issue but is it something like this you want?
http://jsfiddle.net/HvZva/12/