li surrounding <a><img></a> is also clickable..why? - css

I have this code:
<ul>
<li><img src="foobar.jpg" /></li>
<li><img src="foobar.jpg" /></li>
</ul>
li {
width: 100px;
height: 100px;
background: red;
width: 500px;
}
img {
margin: 0 auto;
display: block;
}
As you can see here, on both sides of the images I can click also..why? I just want to be clickable the images.

As I noted in my comment, because you set the display to block on your image it therefore takes up the full width of its parent. That's what block elements do. One way around that is to remove the rules you set on the image tag, and add a text-align:center rule to your list item rules.
jsFiddle example

Your img tag is displayed block. Turn that off to prevent the entire li from being clickable.

This happens because you are displaying the images as blocks and width will default to the width of the li

On your img, you set the display to block. This means that it will take up the whole line, and nothing else may appear on that line. Because you didn't set a width, this means that the img container will take up the whole line. You wrapped the a around that, so the whole line will be clickable. Either set a width on your img, or take out display:block

The anchor tag fills the list item element from left to right. So it is not the list element you click, but it's content, the anchor. Just as normal...

Related

Centering a Row of Inline Images

I have four icons I've set to display inline and I'm now trying to center the list they're contained in within a div.
Here's the HTML:
<div id="social_media">
<ul>
<li><img src="../images/social_media_icons/facebook_icon.png"></li>
<li><img src="../images/social_media_icons/wikia_icon.png"></li>
<li><img src="../images/social_media_icons/rss_icon.png"></li>
<li><img src="../images/social_media_icons/mail_icon.png"></li>
</ul>
</div>
And the CSS:
#social_media
{
width:220px;
margin:10px auto;
padding:0 2px;
}
#social_media ul li
{
display:inline;
margin:0 3px;
list-style-type:none;
}
The four icons are 48px square for a total of 192px wide, and each have horizontal margins of 3px for another 24px wide, adding to the whole list being 216px wide. The div they're contained in (social_media) is 220px wide with 2px of horizontal padding for 216px of space in which the list, in theory, should fit perfectly.
However, when I actually do this, the fourth icon gets bumped down to the next row, directly under the first. When I change 3px to auto, they all fit on the same row, but are too close together. And regardless of what I do, the list is aligned to the left instead of the center where it's supposed to be.
Help?
Given the CSS you posted, you may have forgotten about the default padding on the ul element. In most browsers, it is 40px. Resetting this value, however, doesn't solve the entire issue, as the real issue lies in the fact that inline elements respect the whitespace in the markup and generate ~2px spaces when present. This is the root of the issue; i'd therefore suggest taking a look at this answer, which addresses this issue specifically.
Given that there isn't any text involved, you could set font-size:0 on the parent ul element, thus removing this space. Assuming there actually is text, you would simply specify a new font-size on the child elements affected.
EXAMPLE HERE
#social_media ul {
padding:0;
font-size:0;
}
Alternatively, the best approach would be to actually remove the whitespace from the markup. Take a look at the markup in this example.
Try
#social_media ul li img {
padding: 3px;
}

Text next to a link image

I know how to put a text next to an image by applying float:left to the img tag, but when I give it a link e.g href="#" the text won't stand stick to the image, it falls down. To give more info about the project, my <a> tags in the <p> tags are display: inline-block; and the css I applied to the img tags is:
float:left;
margin-right: 15px;
border:0px;
So why is this happening? I want my image to stand just as it does when I don't put it between <a> tags.
The float: left; means the element is floated to the left of the content within the same parent. Since you are wrapping the image inside of an <a></a> tag, the image is being floated to the left of the content within the <a>.
If you apply the float to the a instead of the img, then the a will be floated to the left of the content in its parent, as desired.

Shrinking image by 57% and centering inside css structure

Hy, i'm really stuck. I'll go step by step and hope to make it short.
This is the html structure:
<li class="FAVwithimage">
<a href="">
<img src="pics/Joshua.png">
<span class="name">Joshua</span>
<span class="comment">Developer</span>
<span class="arrow"></span>
</a>
</li>
Before i paste the css classes, some info about the exact goal to accomplish:
Resize the picture (img) by 57%. If it cannot be done with css, then jquery/javascript solution. For example: Original pic is 240x240px, i need to resize it by 57%. That means that a pic of 400x400 would be bigger after resizing.
After resizing, the picture needs to be centered
vertical&horizontal inside a: 68x90
boundaries. So you have an LI element,
wich has an A element, and inside A we
have IMG, IMG is resized by 57% and
centered where the maximum width can
be of course 68px and maximum height
90px. No for that to work i was adding
a SPAN element arround the IMG.
This is what i was thinking:
<li class="FAVwithimage">
<a href="">
<span class="picHolder"><img src="pics/Joshua.png"></span>
<span class="name">Joshua</span>
<span class="comment">Developer</span>
<span class="arrow"></span>
</a>
</li>
Then i would give the span element: display:block and w=68px, h=90px. But unforunatelly that didn't work.
I know it's a long post but i'v did my best to describe it very simple. Beneath are the css classes and a picture to see what i need.
li.FAVwithimage {
height: 90px!important;
}
li.FAVwithimage a, li.FAVwithimage:hover a {
height: 81px!important;
}
That's it what's relevant. I have not included the classes for: name,comment,arrow
And now the classes that are incomplete and refer to IMG.
li.FAVwithimage a span.picHolder{
/*put the picHolder to the beginning
of the LI element*/
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 90px;
diplay:block;
border:1px solid #F00;
}
Border is used just temporary to show the actuall picHolder. It is now on the beginning of LI, width and height is set.
li.FAVwithimage span.picHolder img
{
max-width:68px!important;
max-height:90px!important;
}
This is the class wich should shrink the pic by 57% and center inside picHolder
Here I have a drawing describing what i need:
alt text http://lookpic.com/i/169/2U12JC16.jpeg
I don't know what you're talking about with the 57% - from your example, you want to scale to fit within 68x90, not 57% specifically. As far as I can tell, using max-width and max-height works for that (though won't work in IE6, and I don't think there's a non-JS workaround for that). But why do you expect it to be centered?
The easiest way to center an image you don't know the size of, when you do know the size of the parent, is to set on the parent:
text-align: center;
line-height: 90px; /* height of parent */
vertical-align: middle;
One problem with this though, is that if the user increases the font size, the line-height increases along with it, making the image(s) not centered vertically anymore.
For the absolute positioning, I assume you have position: relative on the li? Also, you could probably use float: left; instead (but of course you'd need an element with clear: left; at the end of the li then).
As far I can remember (out of the web dev world for a while), a is an inline element and you can't set its height. You could try adding a display:block to a elements.

Centering Text and images within a DIV, and more

So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)

Background color stretches accross entire width of ul

I have a simple list I am using for a horizontal menu:
<ul>
<h1>Menu</h1>
<li>
Home
</li>
<li>
Forum
</li>
</ul>
When I add a background color to the selected class, only the text gets the color, I want it to stretch the entire distance of the section.
Hope this makes sense.
The a element is an inline element, meaning it only applies to the text it encloses. If you want the background color to stretch across horizontally, apply the selected class to a block level element. Applying the class to the li element should work fine.
Alternatively, you could add this to the selected class' CSS:
display: block;
Which will make the a element display like a block element.
Everyone is correct that your problem is that anchors are inline elements, but I thought it is also worth mentioning that you have an H1 inside of your list as well. The H1 isn't allowed there and should be pulled out of the UL or placed into an LI tag.
Would something like this work?
.selected {
display: block;
width: 100%;
background: #BEBEBE;
}
Put the selected class on the <li> and not the <a>
<a> elements are inline by default. This means that they don't establish their own block, they are just part of the text. You want them to establish their own block, so you should use a { display: block; } with an appropriate context. This also enables you to add padding to the <a> elements rather than the <li> elements, making their clickable area larger, and thus easier to use.

Resources