I am sorry if this is really a newbie question - or if it is very simple...
I am trying to make a very basic image tooltip based only on CSS ( no JS ).
Fiddle here :http://jsfiddle.net/ufs44/1/
My problem is how to distance the image from the link in order for it not to obscure the text.
I really would like to make it with only CSS (later I will add some transitions) But right now, the tooltip is always hiding the other links below.
Doing position:relative actually makes the whole page "jump" because it is changing from display:none to display:block and the space is missing for the element...
I would like to know how I can make the tooltip to appear ABOVE the link for example, or to the side...
You need to use position: relative; within the link itself, and then position the image tooltip absolutely.
Fiddle
how to distance the image from the link in order for it not to obscure
the text .
Elements with css position:absolute are positioned using css left , right, bottom, top
As the comment - http://jsfiddle.net/5W5bB/1 - using left
left:200px;
Related
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.
I have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors.
Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.
My trouble: Why is the text container not showing up on the first div?
Please see my fiddle on http://jsfiddle.net/pvvFR/
Thank you in advance for reading and if so...for answering
Is this something like that a solution
http://jsfiddle.net/pvvFR/7/
I've put a position absolute on you slider
and i've put your container div out of the slider
EDIT :
Look at this: http://jsfiddle.net/pvvFR/13/
everything is relative
And i've given a height to your slider, and position your container to a negative top
If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute), so the content could overlay it. Your problem is not in text, but in image.
try to have each container a unique class and replace with for example and put the image to div background like
background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');
http://jsfiddle.net/pvvFR/10/
Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.
Check this. http://jsfiddle.net/pvvFR/14/
Hi Guys i have applied Relative positioning to the image as the above screen cap . but what i required is to take this image to front of that gray menu bar . what should i apply for menu's CSS class to do that ?
for relative position of the image i used the following code
position: relative;
top: -Xpx;
z-index: 99;
z-index:999;
or some other really high number to force it above all other elements.
Relative position is given to an element when you want to anchor (contain) other positioned elements inside it. If you want that image to appear on top of everything else you need to position it absolute. This, of course, depends on what it is you are trying to achieve.
Without seeing the html and the full css this is my best guess: You need to set the gray bar to a position:whatever and then set the z-index on that one as well.
I think you are applying the css style before the styling of the gray bar.
So you should apply the css styles on the image after the gray bar style or code.
please see this example http://jsfiddle.net/7trcV/
what I'm trying to achieve is ability to put an arbitrary icon to the right of the text in a way that text width is limited. In the example I posted the problem with the second (short text) is - the icon is displayed detached from the text.
Any help is appreciated!
How's this? http://jsfiddle.net/7trcV/5/
I gave the .content a right padding and set the icon as it's background.
Ok, try this http://jsfiddle.net/7trcV/6/ it should have sorted out your underline issues. I'm not addressing the clickable icon because that's a completely different requirement from your original question.
Ok sorry i did not look at your code properly for the first time... problem here is absolutely positioned icon which need to be floated next to your spans like this: jsfiddle link
after you do this you must set max-width of that span to be width of container-width of icon... hope this will help
You could use javascript to find the width of the span, and have the icon positions right next to it.
Exmaple here: http://jsfiddle.net/peduarte/KCttp/
I have this code: jsfiddle
I want it to look like this, but I do not want the surrounding div. I want to have the form overlay ontop of an image tag, but to look like the second link.
So how can i make the login box over the image without having the image as a background
In order to do what you want you must position the login box absolutely and set a z-index so that it will display properly. Here is a link: link
Personally I prefer to use a container with a background for this sort of thing, as positioning some thing absolutely can be complicated in the rest of the layout. Either way, this link should do what you want.