Floating Layers

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

Flex -> Floating Layers (1/26/2004 9:17:37)
Good Morning: I'm looking for the code to have my navigation buttons float up and down the page. I've done some searching on the net and still looking for the solution. If anyone has any suggestions, I would greatly appreciate it.

c1sissy -> RE: Floating Layers (1/26/2004 9:56:22)
Hi Flex, how are you today. I have a link for you to check out. I just found this and am not sure if this will help you out or not. If not, let me know and I'll see if I can find something for you. http://css.maxdesign.com.au/index.htm This site has wonderful tutorials listed on it. I'm not sure if this is what you want or not, but I hope that it helps you out[;)]

Flex -> RE: Floating Layers (1/26/2004 13:52:25)
c2Kissy: That is an AWESOME site. I looked at the instructions for the css:float and it takes you step by step. I'll try it out tonight and respond back with the results. thanks & God's blessings to you and your family,

c1sissy -> RE: Floating Layers (1/26/2004 14:51:00)
Hi flex, I'm glad that the link was helpful for you. I also am still in the learning process, lol. So If I can help, it helps me. Even if I have to do a search to answer, it helps me out.[;)]

bobby -> RE: Floating Layers (1/26/2004 15:23:21)
I love float for images in the body of a page... where I want the text to wrap it. I usually build two classes, a rightfloat and leftfloat... give them a little margin or padding or both... set the size to the same as the thumbnail and voila! <img class="rightfloat" src="images/name.jpg" /> Suddenly inserting a picture into a paragraph becomes childs play... and I can alternate left and right by changing the class... [:)]

c1sissy -> RE: Floating Layers/bobby (1/26/2004 16:54:49)
quote: ORIGINAL: bobby I love float for images in the body of a page... where I want the text to wrap it. I usually build two classes, a rightfloat and leftfloat... give them a little margin or padding or both... set the size to the same as the thumbnail and voila! <img class="rightfloat" src="images/name.jpg" /> Suddenly inserting a picture into a paragraph becomes childs play... and I can alternate left and right by changing the class... [:)] Hey Bobby, I have a link for you, I found this one as well yesterday, I haven't played with it yet, but I plan on it. http://www.realworldstyle.com/thumb_float.html Check this one out and let me know how you like it[;)]

Flex -> RE: Floating Layers (1/27/2004 2:36:59)
Just by using floating css with right nav made my site a lot cleaner. However, I'm trying to have my navbar float down the page as the reader scrolls down with mouse. This may require some javascript or some other sort of programming. "In all your getting, get an understanding"

c1sissy -> RE: Floating Layers (1/27/2004 7:09:06)
quote: ORIGINAL: Flex Just by using floating css with right nav made my site a lot cleaner. However, I'm trying to have my navbar float down the page as the reader scrolls down with mouse. This may require some javascript or some other sort of programming. "In all your getting, get an understanding" I think you might be correct on the javascript to get that to work. Have you tried just searching css on google and looking at others sites? I have a program called instant source, this enables me to see the source that someone has on their page without downloading it to the computer. So if someone has javascript on their page, it shows the file for it. As well as anything such as asp, css etc... I had the trial and loved it so much that I purchased it so that I have it. You might want to give it a try just to see how someone might have this set up, and go from there. Here is the link in case you wish to check it out. I'm not familar with javascript at all, so I can't help you out with this part [;)] Also do a search for free javascript code, you just migh find what you are looking for.

Flex -> RE: Floating Layers (1/28/2004 2:35:39)
c2Kisssy: I found a java script code for the floating layer. I used the 2 column css then added the java code which was very easy to do. Here's the site that I went to: www.javascript-fx.com. Look for menus and there are several different types of javascripts for menus. When my site is up, I'll post it for your viewing. By the way, do you set-up all sites with css formating first, then plug in the text and pictures? thanks again, Flex

c1sissy -> RE: Floating Layers (1/28/2004 9:18:31)
quote: ORIGINAL: Flex c2Kisssy: I found a java script code for the floating layer. I used the 2 column css then added the java code which was very easy to do. Here's the site that I went to: www.javascript-fx.com. Look for menus and there are several different types of javascripts for menus. When my site is up, I'll post it for your viewing. By the way, do you set-up all sites with css formating first, then plug in the text and pictures? thanks again, Flex Hi Flex. LOL. I'm going to try this again, my first reply got lost in cyberspace! Would you believe that I have done no legal sites? I have done homework and play sites. I'm in learning mode, and self teaching to top it off. So it takes a bit longer due to not having a teacher to help out. But outfront comes in as being as close to a teacher as you can find! Anyhow back to your question regarding set up of the sites. If you are starting from scratch, what you do is your content first. Sure it looks boring, but then you come along with your styles. A good suggestion is to embed them first and then move them to an external stylesheet. This makes viewing your changes easier, Now if you are taking a site that is already done and giving it the css treatment, what you do is remove all styling from your code. Good way is to take it to xhtml as well. This works out better with css. Then do your styles. Decide how you are going to lay it out. Two columns etc... Also if you validate your content first, it makes it easier to get the css to work correctly as well as validate that correctly as well. Sometimes validating can be so frustrating, but it is a great way of learning what mistakes you are making, and teaches you not to make them. I'll also be thrilled to see your site when done. Don't be surprised if it does not validate with the javascript. You might run into some problems with this. If you do, someone here might be able to help you with that as I am not familar with javascript.

Flex -> RE: Floating Layers (1/29/2004 23:30:29)
c2Kissy: Actually I had no conflicts with the javascript and the css. The site is a lot cleaner and I plan on posted it by this weekend. You will be the first to know. Did you check out the site in my last posting? I have to get more involved in css. It makes changes so much better. I'll probably use a lot from the site you suggested me to check out. Thanks for all your help, Flex

c1sissy -> RE: Floating Layers (1/30/2004 6:42:10)
quote: ORIGINAL: Flex c2Kissy: Actually I had no conflicts with the javascript and the css. The site is a lot cleaner and I plan on posted it by this weekend. You will be the first to know. Did you check out the site in my last posting? I have to get more involved in css. It makes changes so much better. I'll probably use a lot from the site you suggested me to check out. Thanks for all your help, Flex Flex, no problem, I'm just glad that I could help you out. The site that you posted looks like it is a tad more updated then the one I used for my christmas card. It was a snow script, and not ready for css. I failed validation and could not use the xhtml transitional with it as it would not work. As long as I stayed with html 4.0 it worked. I am happy to hear that it didn't cause any conflicts for you. During my search for scripts this site that you posted didn't come up. CSS is great, and it is easy to learn. I still have a very long way to go. Right now I am working on learning how to do a horizontal navigation. I found a few sites with some things in regards to this so it is a matter of playing with them to see how it works out. I would be honored to see your site, and am looking forward to viewing it!

NEWUSER101 -> RE: Floating Layers (11/21/2005 14:29:18)
I know an old thread, but i did not want to start a new one since its related.. I tried the code as per recommended site above (which by the way is kick-ass), to float a layer up-and-down a page when you scroll; the thing is, im using several JS in my-site .dwt file and when i try to add this feature (i use FP03) it does not work, esp. that i find when i add the code it does not create a layer (which its suppose to), but rather a table.. So i could not use it, and tried several others, similar results.. I found a script on CodeLifter which allows you to float an Email This Link layer; I decided to use it but not for this feature, just for the scrolling part; when i add this script, im able to see a LAYER and i got it to work in Firefox and IE; only issue here in IE it will not move up and down but rather when the page-loads it scrolls quickly to the end of the page and stays at bottom; in Firefox it works exactly as it should; moving with the page-scroll. The layer im talking about contains my Links to Amazon.com for Books; its on right-hand side of the screen; you can check the page http://www.islamicarchitecture.org/art/islamic-calligraphy.html Any ideas on how i can make it work in IE; by any chance does it function different on your browser? Please let me know if you try and if you have a solution.. Thank you.

NEWUSER101 -> RE: Floating Layers (11/22/2005 17:28:01)
Please can anyone check my page and tell me if it scroll up and down in IE? Thank you.

Kitka -> RE: Floating Layers (11/22/2005 18:07:23)
It doesn't scroll in IE for me, but does in Firefox.

NEWUSER101 -> RE: Floating Layers (11/22/2005 19:23:32)
Thank you for checking [:D] I worked on it again but as you mentioned, cant get it to move on IE, but works fine in FF. I now think it's due to my other JS. Its really a great sript, if you ever need something like that you can find it at http://www.codelifter.com/main/javascript/float_emailthislink.shtml I tried to actually run it as-is, but the Email-form and my site-search-form kept over-ride one another..

c1sissy -> RE: Floating Layers (11/24/2005 9:44:02)

A:link	{color:#DF9700; font-weight: bold; text-decoration: none;}
A:hover	{color:#DF9700; font-weight: bold; text-decoration: none;}
A:visited {text-decoration: none; font-weight: bold; color: #DF9700;}
A: (text-decoration: none;)

This is incorrect, It should read:

A:link	{color:#DF9700; font-weight: bold; text-decoration: none;}
A:visited {text-decoration: none; font-weight: bold; color: #DF9700;}
A:hover	{color:#DF9700; font-weight: bold; text-decoration: none;}
A: (text-decoration: none;)

When you are having a problem with code, it could be anywhere in the styles that is causing the problem. It could be above or below the area of the difficulty that you are experiencing.

I dont' have time to really go over your styles, but change the above and report back what it does for your page.

NEWUSER101 -> RE: Floating Layers (11/24/2005 13:10:19)
Ok i will check and post back.

c1sissy -> RE: Floating Layers (11/24/2005 14:24:43)
Sounds good, have a great day.[;)]

Page: [1]

0.15625