Doing this for my friend for free while learning Dreamweaver.
My fixed elements refuse to stay on top of my scrolling elements. I have asked nicely.
I tried the z-index:100;
I could use a hint or 2.
I also can't get my page to center. Might thses troubles be related?
I'd appreciate it if you would have a look: http://h2o-test.businesscatalyst.com/Brenda_test.htm
No hair left to pull. I have tried the z-index to no avail.
Lot of things don't look right on that page.
Fix all of the things I've mentioned and run your site through http://validator.w3.org/ to check for errors and fix them too.
Do post back if you're puzzled about how you can fix the pointers I've given!
I had a look at the validation as Sudershan quite rightly suggested, but do not believe that they contribute to your problem.
Nancy's suggestion certainly does make a difference.
Have a look at the markup for the problem lines
<h2 class="h2">Guided Snorkel & Photo Tours</h2></div>
<!--div Style="position: fixed; top: 200px; left: 70px;"-->
and the corresponding style rules
font-family:Verdana, Geneva, sans-serif;
text-shadow: 0px 0px 30px #FFFFFF;
font-family:Tahoma, Geneva, sans-serif;
text-shadow: 2px 2px 20px #FFFFFF;
I suggest that you remove the highlighted style rules and position the elements using widths, floats and/or margins
Thanks everybody. I will evaluate all replies and learn from them. Last time I worked on a website, tables was the thing. I'm a dinosaur trying to learn CSS for the first time... the day before yesterday .
Using a hack and slash approach can get the job done... sometimes. I design circuit boards for a living.
The idea for my approach was to offload the heavy lifting to external CSS file(s) so that the owner can easily modify the text and not have to muck around sifting through the code trying to find the text to change.
Is it wrong thinking to offload so much in the CSS file to keep the HTML tidy? I also wanted to make the Title and Nav modular for every page to follow.
Your help is much appreciated!
I will use it greatfully.
If you need help with a circuit board design...
1) If I iliminate this "bad practice" can I still achieve the rounded corners on my images? My attempts failed. The corners of my images overflowed the bounds of the rounded corners.
2) I see. Seems the absolute positions as Nancy suggested are a great deal of the problem.
3) I examing the code Nancy suggested. I believ the clues to better positioningcan be found there.
4) Hacking and slashing to observe change. Sloppy .
5) Thank you for the critique... It helps!
I knew this was coming!
It's pretty simple. Add a class selector to your <img..> tag itself and define it in CSS:
<img class="round" src="images/TopR_fish.png">
Remove the background-image definition from the topr_image class.
I searched Google for the solution I used prior to my original post. This is much more elegant... A light shines on you!
That light filters through to me, thank you. CSS is very interesting stuff.