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

Reply
 
Thread Tools Display Modes
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
Old 02-24-2007, 05:39 PM   #2
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Can you provide a link to your page? That might help.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 02-24-2007, 06:01 PM   #3
jwoolf09
Member
 
Join Date: Oct 2005
Location: Manchester, NH
Posts: 65
Default

Kathleen,

The full page is still very much under development, so I'd rather not show it. But I can give you a stripped-down page with just the header. It's enough to demonstrate the problem. Take a look at http://www.jwoolfden.com/header_test.htm, first in MSIE, then in Firefox or Opera. The way it looks in MSIE is the way I want it to look in all three browsers.

-- Jon W.
jwoolf09 is offline   Reply With Quote
Old 02-25-2007, 04:18 AM   #4
Barrie Greed
Member
 
Join Date: May 2006
Location: Stringston, Somerset,UK
Posts: 111
Default

Try for #pageheader change the margin line to:

margin: auto;

and for #pagehdrtxt

delete margin and reeplace it with

padding-top: 50px;

This should show you the effect you want.

Like you I'm still baffled why
margin-top: 50px
puts the margin between #pageheader and body rather than between #pagehdrtxt and '#pageheader

Barrie Greed
Barrie Greed is offline   Reply With Quote
Old 02-25-2007, 04:58 AM   #5
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Well, you focus on one of my favorite topics, the wolf.

But I have no way to view it in MSIE6 so guess I don’t know how you want it to look. On the other hand, you should be able to make it work in all browsers. I’ll reread your requirements and take another look but with Firefox and Safari.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 02-25-2007, 04:58 AM   #6
jwoolf09
Member
 
Join Date: Oct 2005
Location: Manchester, NH
Posts: 65
Default

Barrie,

Tried it, it worked. In both Firefox and Opera. Header centered, text centered, just the way I wanted.

Thanks much!

-- Jon W.
jwoolf09 is offline   Reply With Quote
Old 02-25-2007, 05:04 AM   #7
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by jwoolf09 View Post
Barrie,

Tried it, it worked. In both Firefox and Opera. Header centered, text centered, just the way I wanted.

Thanks much!

-- Jon W.
That’s great. Whew!

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 02-25-2007, 10:36 AM   #8
jwoolf09
Member
 
Join Date: Oct 2005
Location: Manchester, NH
Posts: 65
Default

Kathleen,

As a follow-up: I'm having some trouble understanding just how centering works with CSS. I thought it worked like this: if a block element such as <div> or <p> has the text-align property set to "center," then everything in the block gets centered relative to the parent element. Then if some child block element contained a different text-align value, such as "left", the contents of that element would be aligned left within the centering. That is, if I do this:

<div style="text-align:center;">
<p style="width:75%;text-align:left;">
a paragraph of text goes here
</p>
</div>

then the result should be a block of text that is left-justified within a larger centered block, which automatically adjusts itself to match the size of the screen. In other words, it should look like an ordinary paragraph of text with large left and right margins. The same as if I had entered this:

<table align="center" width="75%">
<tr>
<td>
a paragraph of text goes here
</td>
</tr>
</table>

But that isn't what I actually get. The centered-using-tables version works as I expect. The centered-using-CSS code works as I expect in Explorer, but in Firefox it left-aligns the paragraph with the page lefthand margin, as if the outer centered element wasn't there at all.

I suppose I could use percentage left and right margins to achieve the same result, but that's ugly and inelegant and defeats half my purpose, which is to learn how to write HTML/CSS code the way I used to write program code: short and sweet and simple, so anyone who looks at it can understand right away what it does and how.

So, how does centering really work? To what extent can you nest text alignment, and what's the right sequence of CSS styles to do it? Or am I better off using the ugly "percentage margins" approach?
jwoolf09 is offline   Reply With Quote
Old 02-25-2007, 01:47 PM   #9
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by jwoolf09 View Post
So, how does centering really work? To what extent can you nest text alignment, and what's the right sequence of CSS styles to do it? Or am I better off using the ugly "percentage margins" approach?
I use margin-left: auto; margin-right: auto to center an image.

And I think the title text will have to be positioned to work.

I just made your header my way. The CSS is internal to the HTML source. Does this do what you want?

I snagged your wolfie but made up the rest.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 02-25-2007, 02:15 PM   #10
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Not in IE6 or Foxpro 1.5.10

Quote:
Originally Posted by ktinkel View Post
Does this do what you want?

I snagged your wolfie but made up the rest.
Not in Foxpro (1st attachment) or IE6 (2nd attachment).
Attached Thumbnails
Click image for larger version

Name:	kt001.jpg
Views:	76
Size:	17.1 KB
ID:	860   Click image for larger version

Name:	kt002.jpg
Views:	69
Size:	15.7 KB
ID:	861  
dthomsen8 is offline   Reply With Quote
Reply

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:35 AM.


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