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.
~ Scott
I can't see your page.
But the simplest way is to put image in the background of your div with CSS.
#divName {
background: url(your_image.jpg) center no-repeat;
min-height: xxxpx; /**height of image**/
width: xxxpx; /**width of image**/
}
HTML:
<div id="divName"><h3>Your text goes here...</h3></div>
Nancy O.
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?
~ Scott
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?
Nancy O.
Here is my test page posted http://straightline-advisors.com/Test/
Change your relevant HTML to this and change CSS padding (in green) to suit your needs.
<div id="BackImage">
<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>
</div>
Nancy O.
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?
~ Scott
Copy & Paste this code into a new, blank HTML page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Straightline Advisors</title>
<meta name ="description" content="Focused firm which targets limited number of engagements in the company's areas of specialty -real estate development advisory services & asset management for hotels, condo hotels, resorts, spas, casinos, and shared ownership projects." />
<meta name ="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #000;
background: #000 url(http://straightline-advisors.com/Test/images/Home3.jpg) center no-repeat;
color:#FFF;
min-height: 655px;
width: 700px;
margin:0 auto; /**with width, this is centered**/
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 100%;
/**text shadows**/
-webkit-text-shadow: 0px 0px 8px #000;
-moz-text-shadow: 0px 0px 8px #000;
text-shadow: 0px 0px 8px #000;
}
h1 {text-indent: -9999em; margin-top:0; margin-bottom:0}
h2 {padding-top:90px; font-size: 18px; font-style:italic;}
h3 {margin-top:0; font-size: 20px;}
h2, h3 {padding-right: 25px; padding-left: 155px;}
</style>
</head>
<body>
<h1>Straighltine Advisors</h1
<h2>Our Core Philosophy:</h2>
<h3>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.</h3>
</div>
<!--google tacking code-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29266726-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
PS. I removed all the useless meta keywords because search engines ignore them. Title, description and actual content are all they pay attention to.
Nancy O.
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?
~ Scott
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.
~ Scott
North America
Europe, Middle East and Africa
Asia Pacific