jsFiddle
I've got a BG Image attached to a link with the class selectedlink
The Image shows, but as I position it down, it disappears outside the link's visual parameters. It's like the href is a window to the image.
Here's the code:
CSS:
div#intnavIcons a.selectedlink {
color: #900404;
font-size:11px;
font-weight:bold;
padding:#FFF;
text-decoration:underline;
background: url("/images/nav/bg-nav-current.png") no-repeat scroll center bottom transparent;
}
HTML:
<div id="intnavIcons">
<a class="selectedlink">This is selected</a>
<a>This is not selected</a>
<a>This is not selected</a>
<a>This is not selected</a>
</div>
Can anyone see if I'm missing something in my style for keeping the image above the href?
For moving it farther down, I'm just adding background-position: 0px 10px;
The background image is limited to the box of the element (the specific box depends on the background-clip style). If you're trying to move it down, it will start disappearing when it hits the bottom of the box.
You may want to try adding padding-bottom:10px.
I also notice you have padding:#FFF, which makes no sense. Did you mean background-color?
Related
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.
Live link here
http://soloveich.com/pr1-1/
For some reason, div hover changes only when mouse goes over the part, that's on top of the grey content background.
When it hovers on lower part- nothing changes
<li><a class="ml" href="http://soloveich.com/pr1-1/?page_id=66"><div class="tabs1"><div id="t1">
</div></div>
</a></li>
css code
#t1 {
height: 519px;
width: 271px;
background-image: url(images/t1.png);
background-repeat: no-repeat;
}
#t1:hover {
background-image: url(images/t1r.png);
}
didn't put all 4 of them here, since it's all the same
#cnt1 element is over the divs, and block the hover action.
You must play with z-index, and positioning... Two less reputation to make a comment, sry :).
UPDATE
Sorry, now I'm not sure about that. But You should try to run tFirefox, right click this div, run inspect element and then click the 3D view icon (top right). Then everything should be clarified.
OK I know
You must apply the hover effect to the first child of the whole thing. Div is inside a, a is inside li. So li:hover is an answer I think. The background should be also applied to the li element. Hope it helps.
I have three divs, one hidden:
Parent
Message (hidden)
Image
I need to display Message when Image is hovered. That's usually a simple job, but I think the problem arises at the positioning of the divs.
I have an image at the upper right corner, and a text message should appear right next to it (to it's left, actually) when the image is hovered. Parent is a 100% x 32px bar, with position: fixed, so the icon and the message float around the whole page.
I've already tried plenty answers at SO. The only one that worked was using #parent:hover > div, but that makes the message show anytime the cursor hovers Parent, which is bad as Parent is a big invisible bar on the top of the page (should work well with shrinkwrapping, though, but I couldn't do it).
Here is the js fiddle. If you have any alternative approach please tell me.
EDIT: This is a example image of how it should work. It should also float and scroll with the page.
Switch the position of elements as mentioned in your style.
This is because you are using Adjascent Sibling selector +. “adjacent” means “immediately following,”
Demo
css
#img:hover + #msg {
display: block;
}
#Html Snippet
<div id="img">
<a href="some link here">
<img src="http://j.mp/18xsrJQ"/>
</a>
</div>
<div id="msg">
This should appear if icon is hovered.
</div>
To illustrate this:-
Consider this simple example :- To make the p immediately following the h3 tag appear in gray color. If you put p before h3 it wont work. That is how the Adjacent sibling selector works.
<h3>Hey, an H3 element</h3>
<p>Here's a paragraph which is short</p>
h3 +p {
color: gray;
}
Hoping for some advice around a CSS issue - I have a layout where I'm absolutely positioning link text above a background image, but cannot get the link to expand to the height of the container (in IEx, works fine in Chrome)
<div>
<img />
<a />
</div>
The containing div has a background colour, and the image has its opacity reduced - on hovering the image, the opacity reduces further, leaking more of the background color. At the same time, the opacity of the link changes from 0 to 100. I'm using a few CSS transitions as well, just to prettify it.
I know that positioning the link absolutely removes it from the flow, so setting height to 100% won't work, but shouldn't I be able to set it explicitly? Doing so works in Chrome but not IE. Problem is related to the image, as the link behaves correctly if it is removed.
Example:http://jsfiddle.net/thSCJ/8/ (includes just enough detail to highlight my problem. In IE, hovering the top left of the image reveals the link. In Chrome, any hover on the image reveals the link).
Any suggestions?
You need to have the <a> tag wrapping the image and the text:
<a href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6kpJ562NTt7Vkya4ocQ3Aq7mVqNB04ccB9XNCr-b4mPdYU6Y5Yg" width=200 height=200/>
<span>Link text</span>
</a>
Here is the CSS:
a {
width:200px;
height:200px;
background:#cccccc;
}
a:hover > span {
display: inline;
}
span {
display: none;
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
color:red;
}
Fiddle: http://jsfiddle.net/thSCJ/12/
Instead of changing the opacity, simple change the font-size property and put the entire thing in the <a> tag.
See this JSFiddle.
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.