Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Adding a link within CSS

Featured Replies

I'm sorry but why you are doing coding like this? You can do same thing with the use of LighBox Plugin. Just check it

http://lokeshdhakar.com/projects/lightbox2/

 

According to my point of view, Your coding style is not valid.

Edit: Sorry read it wrongly. Just realised what you meant. I'll have a quick look.

 

Lyndsey.

Edited by Lyndsey

  • Author

Thanks Hem, I didn't write, just found some nice style online.

 

You can edit this information from within the CSS file (content.css). For example:

 


.slideshow .t1:focus ~ .oneBox .frame div:after {



content: "\A Need to add a link \A This can be on as many lines as you like.";
}

 

Just modify the text to your needs.

 

Lyndsey.

 

Thank you Lyndsay, I wish it was so simple, I can add a text there, but adding a link doesn't work for some reason,

For example I added a link in place you suggested now (Mountain photo - top left), the result - I see no link or text :-(

http://www.focuswild...aster/index.htm

Edited by shalamaev

This css gallery is interesting as an experiment, but all the content that is added with the technique used on that code is completely non-existent on the html (Google doesn't see it, for instance). The right way to do something like this is with javascript. There are tons of jQuery plugins that do this with much more flexibility and without sacrificing the content.

Edited by ocorreiododiogo

I think you'd be better off using a jQuery lightbox plugin, which will make your life so much easier. You cannot generate HTML using the CSS content property (which is what your gallery is doing). There's probably a way of generating the inner HTML of the element through jQuery and adding the link that way, but I'm not sure how that is done.

 

Here is a useful link: http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

 

Lynsey.

Exactly because it's client side code. This means that that code is shown only after being interpreted by the browser. Google doesn't have a browser to interpreter the css (it reads css files, but not with the intention of finding content), so it ignores this content. Same happens with javascript, but if the plugin is well written, it will apply the principle of unobtrusive javascript, meaning that all the content will be in the html code.

  • Author

Thanks again Lyndsay!

 

Exactly because it's client side code. This means that that code is shown only after being interpreted by the browser. Google doesn't have a browser to interpreter the css (it reads css files, but not with the intention of finding content), so it ignores this content. Same happens with javascript, but if the plugin is well written, it will apply the principle of unobtrusive javascript, meaning that all the content will be in the html code.

 

Thank you, that's a good point, the main reason for me to add links it to get more exposure on Google.

Theoretically I can move all css content in to <head> section of HTML, still it won't be seen by Google?

Theoretically I can move all css content in to <head> section of HTML, still it won't be seen by Google?

 

You would be doing it the wrong way. The best way to get exposure on Google is by doing things the right way. In the head you should put meta information, and everything else should go on the body. Make good use of headings, document your links with the "title" attribute and images with the "alt" attribute. Some jQuery plugins will even force you to do this. You will have proper code only by following their instructions. Want some examples?

 

 

http://www.jacklmoore.com/colorbox

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

http://www.photoswipe.com/

http://lokeshdhakar.com/projects/lightbox2/

http://fancyapps.com/fancybox/

How about pre-loading the links / text into a several hidden divs then slide them into position and reveal on focus the same way you do for the larger images?

Edited by Sogo7

  • Author

You would be doing it the wrong way. The best way to get exposure on Google is by doing things the right way. In the head you should put meta information, and everything else should go on the body. Make good use of headings, document your links with the "title" attribute and images with the "alt" attribute. Some jQuery plugins will even force you to do this. You will have proper code only by following their instructions. Want some examples?

 

 

http://www.jacklmoore.com/colorbox

http://www.no-margin...lightbox-clone/

http://www.photoswipe.com/

http://lokeshdhakar....ects/lightbox2/

http://fancyapps.com/fancybox/

 

Really nice looking examples, esspecialy the last one.

How can I be sure the data/links I add to the images (using this JQuery scripts) will be seen by Google?

There is some online tool for that?

Tell me please, in the next Flash gallery example, the data within each image will be indexed by google?

http://www.naturephoto.co.il/Downloads/Flash/index.html

Thanks a lot

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.