Placing Text Over The Top Of Graphics Using CSS

July 2, 2009, Posted by Christopher at 8:07 am

I had a deep desire to make some changes to the current template that you see on this page … mainly the header graphic.

If you look at the top of the page you will notice that the menu links in the header “float” over the header graphic. This template originally had that link list sitting below a thin header graphic. Once I uploaded the larger image I wanted to use the menu links squirted out to the right. The menu list was starting at the end of the graphic about 500px in from the left side. Not exactly what I had in mind. Obviously this template had not been coded to allow for text overlay. I was going to have to figure-out how to do this and a quick internet search brought me to my coding answer …

Essentially the browser was displaying the code as being only one layer deep and placing the links next to the image. What I needed to do was to let the browser know that this section of the webpage was actually two layers deep … the image was actually behind the text and not next to it. This can be done by adding the “relative” tag to the image wrap code (div) and the “absolute” tag to the div code that wrapped my menu links.

The original template code for the header IMAGE looked like this:

#logo { float:left; height:60px; margin-top:10px; background: url(http://www.lohmantrading.com/Fourced/graphics/Head_Inside_1.jpg) top left no-repeat; text-indent: -9999px;float:left;width:635px;height:135px; }

I added ” position:relative; ” to the code like this:

#logo { float:left; height:60px; margin-top:10px; position:relative; background: url(http://www.lohmantrading.com/Fourced/graphics/Head_Inside_1.jpg) top left no-repeat; text-indent: -9999px;float:left;width:635px;height:135px; }

To allow the menu links to float over the top of the graphic the following code was changed:

Original template code for the menu wrap:

#menu-wrap { margin: 0px auto 32px;width:955px; height:30px;} #menu-wrap ul{float:left;padding-top:32px;margin-left:130px} #menu-wrap ul li {display:inline;margin-right:20px;font-size:14px;} #menu-wrap ul li a {padding:1px;} #menu-wrap ul li a:hover {color:#7FD4FF;}

I added “position:absolute” to the code as follows:

#menu-wrap { margin: 0px auto 32px;width:955px; height:30px;} #menu-wrap ul{position:absolute;float:left;padding-top:32px;margin-left:130px} #menu-wrap ul li {display:inline;margin-right:20px;font-size:14px;} #menu-wrap ul li a {padding:1px;} #menu-wrap ul li a:hover {color:#7FD4FF;}

Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Comments and thoughts ALWAYS welcome !

Chris