The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> z-index and positioning help
julchak
post Jul 8 2011, 12:08 PM
Post #1





Group: Members
Posts: 3
Joined: 6-July 11
Member No.: 14,888
Hey guys,
I'm new to html and am having a slight problem with a code I'm working on.

It's for an email template for this client management program (the program sends out emails automatically).

I have 3 layers using <div> and z-index on each, all of them work perfect when i use absolute positioning. The only problem is that this program automatically adds a footer to my email...this footer keeps getting positioned behind my 3 layers. When I put negative values for my z-indexes it fixes this problem, however the footer then appears ON TOP of my layers, and not positioned below my template (as in the footer is correct in the z-index, but instead of being on the bottom of the page it's just right on the top, where all my objects are).

I've tried using relative, fixed, and static positions on the lowest layer, this sometimes fixes the footer problem, but then messes up the alignment of the other layers...

Here is the beginning part of my code currently which defines this part:

QUOTE
<html>
<head>
<meta content="text/html; charset=utf-8" />
<style type="text/css">
#apDiv1 {
position:absolute;
width:583px;
height:744px;
z-index:1;
left: 0px;
top: 0px;
}
#apDiv2 {
position:absolute;
width:450px;
height:200px;
z-index:2;
left: 66px;
top: 17px;
}
#apDiv3 {
position:absolute;
width:401px;
height:456px;
z-index:3;
left: 90px;
top: 253px;
}
#apDiv3 {
font-family: &quot;Arial&quot;;
}
</style>
</head>


Any ideas how I can fix this?

Thanks in advance,
Jeff
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 8 2011, 01:27 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Looks too complicated for an HTML emails. Email clients aren't browsers. The general advice I've read is to keep it as simple and basic as possible, use inline CSS and so on. I would avoid positioning, but maybe I'm not updated about that.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
julchak
post Jul 8 2011, 02:01 PM
Post #3





Group: Members
Posts: 3
Joined: 6-July 11
Member No.: 14,888
QUOTE(pandy @ Jul 8 2011, 02:27 PM) *

Looks too complicated for an HTML emails. Email clients aren't browsers. The general advice I've read is to keep it as simple and basic as possible, use inline CSS and so on. I would avoid positioning, but maybe I'm not updated about that.

Yeah, it doesn't come through right in gmail or yahoo; in outlook and comcast's online client it works fine though (tested those 4). Thanks for the tip!

If I have time I'll read up on inline CSS and try to modify this to straighten it out a bit.

In the meantime, though, is there any positioning fix that would make all my layers take their assigned positions and layers, and force the footer to go to the bottom of the page?

-Jeff
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 9 2011, 05:13 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Start by reading this Sitepoint article: http://www.sitepoint.com/code-html-email-newsletters/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 09:15 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC