Take for example this code.
So, instead of the <a> tag I want to use an empty div because using text-indent:-9999px is not good for SEO.
To be more clear, I want to achieve something similar with this effect but only with css.
Take a look again on my code to see exactly my approach to achieve this effect.
Also is it possible to add a smooth fade in effect on hover only with CSS?
I don't think that using text-indent has a negative impact on SEO, unless you are wearing a black hat anyway. http://www.google.com/support/webmasters/bin/answer.py?answer=66353
To answer your second question (don't understand the first one), I think for browser compatibility, it's much better to use js (maybe flash) to have a fade in effect. I personally use jQuery, which makes life really easy.
Otherwise, there's the CSS3 property transition-property that one can use http://www.w3.org/TR/css3-transitions/.
EDIT
If I understand the first question correctly, to achieve the effect with the example you gave purely in CSS is hard, at least for now. You're better off using a js library like jQuery for effects like bounce and fade-ins.
Instead of text-indent, you can also use padding.
Basically, set either the height or width (but only one!) of the element to zero and use a padding-top or padding-left to achieve the desired dimensions. Note that overflow: hidden is needed to push out all the content from view and create the "invisible" effect.
Example: http://jsfiddle.net/N8qah/16/
Fancier example with transitions: http://jsfiddle.net/N8qah/18/
Another alternative is to set a line-height on the hidden text that is at least twice the height of the element. But if you have a nested element with text as you do here, you will need to reset the line-height in that nested element. Example of this: http://jsfiddle.net/N8qah/19/
Related
I've built out a standard drop down menu (nothing fancy), however, in order to expand it I have to set a fixed width. Can I just leave out the width and have it expand based on the amount of content I add?
Short answer: yes.
Long answer: it depends quite a bit on how you've constructed the markup, what your CSS looks like, and whether you use something like jQuery for animating the dropdown. The CSS I used to use for dropdowns was a variation of Suckerfish and didn't need a fixed width, so it is possible. If you can post a simple example of what you're doing someone can likely make suggestions on how to eliminate the need for fixed widths.
my question is a bit tricky and I'm not really sure if it is possible, but I think I have a memory of doing it before or seeing it somewhere.
So, I am making a horisontal menu. I have a div block of size 980x36px. It has a background image:
Inside I have links text) which I made block elements (display: block;) and floated left. So now it would look more like this:
Now I want all active links and all links that are mouse-overed to have a different background, like this:
The problem here is that my background image (on hover) is again 980x36 px and is different in the different horisontal positions just like the first background, blue on the left and red on the right:
So, now when I hover on a link I must set the background position some negative horisontal value, for example for the third link I should set something like background-position: -233px 0px; so the colors of the two backgrounds would fit.
My question is how can this be acomplished automaticaly? Here is the tricky part: I don't know the width of all links since they are text and should support multi-language (so they obviously cannot be pre-made images). I don't want to use PNG (I could easily make a semi-transparent 'glass' which would overlay with the first background and create the same effect) - because of.. guess who, yes IE6. And finally I want this to be done with a nice, clean and widely supported technique, so JavaScript is out of the question (I know it's easy, I can make it, I just don't want to use it).
The thing that is familiar in this situation is the background-attachment: fixed; method. In this case it would be great if I could fix the position of the background of each link to the position of the container div. That would be perfect! Just what I need! Each link will be on it's place, but the background would render as if it was on the container div! Well, that's the problem, if anyone knows a good solution.. If not I should consider the less pain, which in my opinion, currently is to try the PNG way with some IE fixer maybe?
You should just use a .png as you described in your question.
To fix IE6, you should use one of the many available JavaScript-based .png fixes, such as:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It's just not worth crippling yourself by pandering to the minuscule percentage of users that are using IE6 and have JavaScript disabled.
(yes, I realise the question is old, and you've probably already created your menu)
The quickest solution that comes to my mind is using jQuery to position the background accordingly (you can check each element's position and just change its CSS background position).
ok i need to make a whole background image so that it resizes with the window and keeps the same proportions
i need to do this only using css
does anybody know how i have looked but cannot find a working solution.
i tried some suggestions on here too but does not seem to work for me either
thankyou
You might want to read the article "Supersize that Background, Please!" on A List Apart. It presents "old" as well as modern techniques.
In order to do it in vanilla CSS, you cannot settle for less than CSS3 since both Background and Borders and Media Queries modules are required.
What you are asking for is not possible. Not with standard CSS2.0 and XHTML.
You can make an image tile, but not scale to fit your page.
The link you provided does just that, it repeats the image in a tile fashion. Background images do this by default.
Sorry, CSS can't stretch images. Only an <img> tag can do that. So you'll have to put one of those in the background.
Maybe you can do that with CSS3, I don't know, but even then browser support is not very good yet.
Here is an example of using a div (100% width + height) containing an img tag to use as the background, might be worth a look.
Try this technique: http://css-tricks.com/perfect-full-page-background-image/
What is the most elegant way to achieve something like that with divs for IE7 and above and the other browsers(chrome,firefox,...)?
Thank you
My personal favorite is the jQuery UI.Layout plugin. It mimics the very flexible Java 'border layout'. Though there are pure css methods, I find they take a lot of tweaking, and have side effects on other layout elements. Whereas with the javascript plugin I was able to get it working in minutes.
Example
Take a look at this, look at the source, it will show you what's involved in a fixed / fluid layout.
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
You're probably looking for a sticky footer. Similar to faux columns, it looks like your desired result, but "cheats" in some sense. Other than that and tables, you won't be able to achieve that with CSS due to how height works (it can't inherit relative values, i.e. elements can't be set to 100% height if the parent has its height set to auto or a percentage value).
Does anybody know of a way to use {text-overflow: ellipsis;} on a piece of text that's wrapping to a second line?
Adding:
{whitespace: nowrap;}
makes text-overflow work, but I need the text to wrap so I really can't use that.
If you know the content is going to wrap to two lines every time this solution will work. Use ::after and content: '...'; and then position it over the bottom right corner of your type (which should be a block level element). This will only work if you are working against a solid background color as you need to set the background of the ::after to match.
The only downfall is the limited parameters this can be successful in and the fact that it will cut a character in half if things don't line up right (which they probably won't).
I am fairly sure that what you are trying to do is impossible in a pure CSS solution. However there is a way of hacking together a similar result. Here is what I did:
http://cce.usyd.edu.au/courses/Business+%26+Management/Business+Communication
See the fade on the block of text introducing each course? That was done by firstly restricting the overflow in the usual way and then placing another div over the top of the last line and implementing the fade in CSS. Instead of a fade you could also insert an ellipsis or some other visual clue.
So, not exactly solving it the way you want, but achieving a similar UI result to ensure the user is aware that content is truncated. Personally I think it is quite pretty :-)