I am trying to put actual text over a picture on a website. I know that I need to use CSS but am unsure of how to structure this to work. The current site is at http://straightline-advisors.com/ I need to replace the quote on the middle of the page with text that can be indexed when crawled. Does anyone have an idea of how to do this? Thanks in advance.
I can't see your page.
But the simplest way is to put image in the background of your div with CSS.
background: url(your_image.jpg) center no-repeat;
min-height: xxxpx; /**height of image**/
width: xxxpx; /**width of image**/
<div id="divName"><h3>Your text goes here...</h3></div>
Ok, I tried to structure the image like you suggested above but I cannot see the image when I preview in Dreamweaver. The text shows up along the top. Do you have any idea why the image would not show up? Do I need it on the web or can I just point it to the image folder on my drive before uploading?
Did you define a local site folder in Dreamweaver before you began this project?
Did you save your image for the web as an optimized jpg, png or gif?
Did you save that image to your DW Local Site folder?
Can you upload your test page and image to your remote server and post the URL?
Change your relevant HTML to this and change CSS padding (in green) to suit your needs.
<h3 style="padding:165px 55px">Our Core Philosophy:</h3>
<h4>At STRAIGHTLINE, we are real estate development consultants exclusively focused on hotels, resorts, and related hospitality property types. Our typical clients are developers or attorneys who seek to better understand the financial, operational and market underpinnings of this complex business. They select us because we have a proven record of success derived from authentic career experiences.</h4>
Hey Nancy, that seemed to do the trick. The only help I need is with formatting. I am not trying to do the type exactly like here, but close. I also need to center the image if possible.
Are you aware of any way to do the shadowing to follow the text?
Copy & Paste this code into a new, blank HTML page.
PS. I removed all the useless meta keywords because search engines ignore them. Title, description and actual content are all they pay attention to.
Thank you Nancy for all of your help. I am not sure why CSS is so hard for me, probably because I do not do enough of it on a consistent basis. Since I am now using the image as a background is there another way to link the bottom area? I used an image map before but it does not seem to be working now that the image is in the background. Do you have any suggestions?
As John said you can't use background-images for links. As a workaround, you could insert a clearpixel GIF under your text and use that as the anchor for your link.
<a href="#"><img src="Images/clearpixel.gif" width="700" height="200" /></a>
Well I tried to convert the link text at the bottom to actual text and then link it. The only problem is that it is turning blue and underlining. I tried changing the properties to make links white and remove the underline but it seems that something is overriding what I am doing.
The only problem I seem to still be having is after turning the "Please Click Here" text into actual text that it moves up or down depending on what browser I am using. Safari and Chrome look perfect but Explorer and Firefox move the text up or down a space. Any ideas why?
Europe, Middle East and Africa