Position that text

@SetinKhanFeb 29.2008

Here is something that I need to do, and for the life of me I thought it would be easy but everything I have tried didn’t work. I’m just putting in the basics to keep it simple. This is for the email for this company that I have designed the site for. So they want a bunch of email text for gears and stuff then their name
blah
logo (link to home page)
blah
blah
blah
blah

<html>
<head>
<style>
Body {
font-family: Arial;
font-size: 10pt;
color: 000000;
background-opsition: bottom left;
background-repeat: no-repeat;
}
</style>
</head>
<body background=”cwlogocopy.gif”
</body>
</html>

Now you have probably figured this out but I want to put two lines of text above the logo and 4 lines of text under the logo and I need the logo to be a link to the home page. I have tried so much and I’ve never had anything like this before. I’ve read a bunch of CSS and Email articles, but they mostly just talk about how different clients handle email.

to post a comment

CSS

4 Comments(s) _↴

@yamaharussFeb 29.2008 — #I don't see what email has to do with this. From what you've described this is pretty much just a design/positioning issue, correct?

You will need to put both sets of text (over and under) in a separate div and position them absolutely based on the placement and size of your logo.

@WebJoelMar 01.2008 — #I do not understand the layout your cited: nothing can exist 'above' "<html>". Maybe that is not what you intended to say.

And "e-mail" makes no sence at all. ? -Do you mean "hyperlinks"? ("anchors")?

Anyway, my interpretation of your design is this:<[B]!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[/B]>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; /*for compliant browsers*/

font:x-small Arial, Verdana, sans-serif;voice-family: ""}"";voice-family:inherit;font-size:small;/*for IE 5.5 */

font-size:100%; line-height:1.125em;}

body {padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so padding-bottom instead*/

background-color:yellow;}

#wrapper p {color:black; background-color:transparent;}

/*non-content: e.g., -navigation lists, etc. Slightly smaller than content text {font-size:0.75em;} */

ul li {float: left; /* cure IE5.x "whitespace in lists" problem */width: 100%;}

ul li a {height: 1%; /* make links honour display: block; properly */}

#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/

* html #wrapper {height:100%;}/* and feed IE what it needs */

html, body, p, th, td, li, dd, dt { font:0.875em Arial, Helvetica, verdana sans-serif;}

h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, 'times new roman', sans-serif; margin:7px 0 7px 4px;}

h1 { font-size: 2.0em;}

h2 { font-size: 1.5em;}

h3 { font-size: 1.2em;}

h4 { font-size: 1.0em;}

h5 { font-size: 0.9em;}

h6 { font-size: 0.8em;}/* Defined default Header sizes*/

a:link, a:visited, a:focus, a:hover, a:active {background-color:none;}/*s.508 Accessibility*/

a:link {color: #00f;}

a:visited {color: #009;}

a:focus, a:hover {color: #06f;}/* a:focus for non-mouse pointers: e.g. "hotkeys", etc. s.508*/

a:active {color: #0cf;}

[B]#navs {width:200px; position:absolute; left:20px; top:140px;}

#navs li {margin:10px 0 10px 0; padding-bottom:6px; list-style-type:none;}

#navs li a {text-decoration:none; font-size:15px; color:black}

#navs li a:hover{border-bottom:2px solid red; padding-left:3px; color:red;}[/B]

</style>

<script type="text/javascript">

</script>

<link rel="shortcut icon" href="favicon.ico" />

</head>

[B]<body>

<div id="wrapper">

<div style="position:relative; width:90%; height:auto; background-color:#e6e100; padding:20px; margin:20px auto;">

<p title="Some text can go here, etc. A little blurb about the Company, what it is, what it does, etc.">Some text can go here, etc. A little blurb about the Company, what it is, what it does, etc.

<img src="#" alt="company logo here" style="width:300px; height:74px; border:1px solid blue; margin:10px 0 10px 20px; background-color:silver; float:left;" /></p>

<div style="clear:both;"></div>

<ul id="navs">

<li><a title="Link One Here" href="#">Link One Here</a></li>

<li><a title="Link Two Here" href="#">Link Two Here</a></li>

<li><a title="Link Three Here" href="#">Link Three Here</a></li>

<li><a title="Link Four Here" href="#">Link Four Here</a></li>

[/B][B]<li><a title="Link Five Here" href="#">Link Five Here</a></li>

</ul>

<div style="width:auto; margin:10px 30px 30px 200px;">

<h1 title="1rst Header">First</h1>

<p>Your text goes here, under this header. Just any text will do, your content and descriptions of products, and so forth. You can write about whatever you want to, -this is your page. Any text will do. cha-cha-cha and etc.</p>

<h2 title="2nd Header">Second</h2>

<p>Your text goes here, under this header. Just any text will do, your content and descriptions of products, and so forth. You can write about whatever you want to, -this is your page. Any text will do. cha-cha-cha and etc.</p>

<h3 title="3rd Header">Third</h3>

[/B][B]<p>Your text goes here, under this header. Just any text will do, your content and descriptions of products, and so forth. You can write about whatever you want to, -this is your page. Any text will do. cha-cha-cha and etc.</p>

<h4 title="4th Header">Fourth</h4>

<p>Your text goes here, under this header. Just any text will do, your content and descriptions of products, and so forth. You can write about whatever you want to, -this is your page. Any text will do. cha-cha-cha and etc.</p>

<h5 title="5th Header">Fifth</h5>

<p>Your text goes here, under this header. Just any text will do, your content and descriptions of products, and so forth. You can write about whatever you want to, -this is your page. Any text will do. cha-cha-cha and etc.</p>

<h6 title="6th Header">Sixth</h6>

<p>Your text goes here, under this header. Just any text will do, your content and descriptions of products, and so forth. You can write about whatever you want to, -this is your page. Any text will do. cha-cha-cha and etc.</p>

[/B][B]</div>

</div>

</div>

</body>[/B][/QUOTE]
</html>

@SetinKhanauthorMar 01.2008 — #Thanks Joel for the help, and I'm still going through some of it. I know that nothing can exist above html. I have a lot of code that deals with drop down menus for replying to the email. The company wants to send html email because they work a lot with scientists’ that uses gears for making drilling machines. All that I have worked out and it works great. The problem I have is when you fill up the space with email the logo needs to move down, which it does, due to it having the body tag. But what doesn't move down is the text. position absolute and the text will not move. I need for the text to move down, because more and more email fills the space with it going to and from two people numerous times. I can get the logo to go down, but not the text. I said I kept it simple, and I hope it clears something up.

@WebJoelMar 01.2008 — #Why does the text need to be "position:absolute;"? This not only 'fixes' the spacial location to the parent element, it lifts the text/content out of the document flow and thus, it exerts no 'pressure' against it's container or other elements thus, any element that 'expands' will do so to the detriment of the absolute-positioned content. It will ride over-top of~. This is why "position:absolute;" is used sparingly, -used for elements that [I]need[/I] to be overlapped and/or z-indexed. I know that DW uses alot of 'position:absolute;" on it's so-called "layers", -DW is part of the proplem. :o

Maybe you cannot since it's a company site, but seeing more of the code might shed some light..

Also in #CSS _↴

bullet points not working!What's causing this gap?[RESOLVED] <div> boxes

Success!

Help @SetinKhan spread the word by sharing this article on Twitter...

Tweet This

Position that text

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Position that text

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴