DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
Old 02-24-2007, 03:26 PM   #1
jwoolf09
Member
 
Join Date: Oct 2005
Location: Manchester, NH
Posts: 65
Default Trying to center a graphic and text

Help needed with a weird CSS problem:

I'm trying to create a header for some webpages that includes text against a graphic background. The graphic in question has left-ear and right-ear images, then some text in an ornate font in the upper center and a blank area below it. This graphic was created in Photoshop Elements and saved as a PNG file. I want:

1) the graphic to be centered on the page
2) the page title to be centered on the page, overlying the graphic, and positioned so it falls into the blank area below the text-in-graphic.

I'm trying for a generic solution here, the same header method to be used on a bunch of pages with a bunch of different text titles, so anything that uses direct positioning is not a usable solution. After some experimenting, I found a sequence of style commands that looked like it should work. The HTML is:

----------------
<div class="centertext">
<div id="pageheader">
<h3 id="pagehdrtxt"><a href="index.html">Page Title</a></h3>
</div>
</div>
----------------

The corresponding CSS commands are:

----------------
.centertext {
text-align:center;
}

#pageheader {
width:500px;
height:136px;
text-align:center;
background: #F5F5DC url(png/pageheader.png) no-repeat;
}

#pagehdrtxt {
text-align:center;
margin-top:50px;
}
-----------------

This looks like it should work. It does work in my HTML editor's preview and in MSIE 6.0, placing the graphic nicely centered on the page, the title text nicely centered within the graphic, and moved down by the 50-pixel margin so it appears in the blank area of the graphic. However, the exact same code fails badly in Firefox 2 and Opera 9. The header graphic is left-justified, not centered. The title text is centered horizontally within the graphic, but has a zero top margin, so it overlies the ornate text that's part of the graphic. I've tried changing every aspect of both code and styles that I can think of, and nothing has worked.

What am I doing wrong here?
jwoolf09 is offline   Reply With Quote
 

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Need help with graphic Calamity Web Design 21 10-03-2006 01:50 PM
web graphic, now need print quality parana55 General Publishing Topics 24 09-17-2006 09:58 AM
New HP A1510N Media Center Computer dthomsen8 The Corner Pub 20 08-20-2006 07:41 AM
Extraneous Blank Line Before <CENTER> RJ Emery Web Site Building & Maintenance 7 05-31-2006 09:59 PM


All times are GMT -8. The time now is 06:26 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.