Adding text to header

Place the text you want inside the header div tag and give it it's own div tag and style name. In the style sheet position:absolute; then left:??px; top:??px;

Understand how to do that?

So I should make it a class style? Something like this?

.uppertext {position: absolute; margin: 0 0 0 0;}

I made this style:
.uppertext {position: absolute; float: right; margin: 10px 50px 10px 450px;}

but I still can't seem to get it more over to the right edge. what am I missing? when I add more px to the left margin it breaks into two lines.

http://www.geovino.net/wheeler/index.php

Posting the rest of your CSS may help... I can tell you that the code for (at) @ is @ - http://www.ascii.cl/htmlcodes.htm

it's a very large style sheet. what is the best way to send it?

dont use absolute positioning. Place your text in a

inside of your #header. Float the

to the right like so

DIV#header p (float:right; width: 5em;}

you mean add to this style here:

/* Header */

#header {position:relative; width:770px; height:100px; margin:0; padding:0; background:#233C9B url("../design/header.jpg") 0 0 no-repeat; color:#FFF;}

where do I add this?
p (float:right; width: 5em;}

put this code under your #header css.

DIV#header p (float:right; width: 5em;}

You must use the code as I have here. if you use just p {;}, the styles will apply to all your

Thank you.

I do not know which browser you use, but just an FYI it shows up different in IE7 and FireFox...

EDIT: Bah, nevermind... It looks like you still have not updated your code yet :blushing:

Firefox.
the site is now at this address:
http://ewheeler.org

I had a chance to view it in IE7 and I see that the upper text is on line beyond the edge of the header.

How do I correct this, I guess the second solution will work better?

Here's the #header style that I added your p style to:

#header {position:relative; width:770px; height:100px; margin:0; padding:0; background:#233C9B url("../design/header.jpg") 0 0 no-repeat; color:#FFF; p float:right; width: 5em;}

Is this correct? The p {;} didn't bold (in Bluefish editor) so I didn't know if it would work.

Shouldn't the p {;} in the .uppertext style? That is where the phone number and email are listed.

I just checked http://ewheeler.org in IE8 on my laptop w/ Vista and it looks great! I never use IE much but it's good to know in the future IE8 will render better, more like Firefox.

This is what I would do...

CSS on your external style sheet:

#header {
     position: relative; 
     width: 770px; 
     height: 100px; 
     margin: 0; 
     padding: 0; 
     background: #233C9B url("../design/header.jpg") 0 0 no-repeat; 
     color: #FFF;
}
 
#header p {
     float: right; 
     width: 5em;
}

HTML on your site:

Get rid of all this:

<div class="uppertext">503-330-4277
<a href="mailto:&#101;&#119;&#104;&#101;&#101;&#108;&#101;&#114;&#64;&#101;w&#104;&#101;e&#108;&#101;&#114;&#46;&#111;&#114;&#103;">&#101;&#119;&#104;&#101;&#101;&#108;&#101;&#114;&#64;&#101;&#119;&#104;&#101;&#101;&#108;&#101;&#114;.&#111;&#114;&#103;</a>
</div>

And put this in its place:
<p>503-330-4277<br /><a href="mailto:[email protected]">xxxx&#64;xxewheeler.org</a></p>

I think that is the right "br" code for XHTML, but I am sure if you validate everything it will let you know:
- http://jigsaw.w3.org/css-validator/
- http://validator.w3.org/

Thanks, but will this only handle the upper right text in the header? Will it effect the text under the lower left under eWheeler Inc. ?

#header p { ... } will affect everything in a

...

tag in between the

section...

If you have other

s in that section, then you might try adding a

... In that case you would do this...

CSS on your external style sheet:

#header {
     position: relative; 
     width: 770px; 
     height: 100px; 
     margin: 0; 
     padding: 0; 
     background: #233C9B url("../design/header.jpg") 0 0 no-repeat; 
     color: #FFF;
}
 
#uppertext {
     float: right; 
     width: 5em;
}

HTML on your site:
<p id="uppertext">503-330-4277<br /><a href="mailto:[email protected]">xxxxx&#64;xxewheeler.org</a></p>

P.S. - This is testing the limits of my CSS/HTML knowledge, so if you have any more questions they will have to be answered by someone else

Thank you

I just checked your site and saw that you updated the code... It looks right in both IE7 and FF :thumbsup: