17 replies [Last post]
davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

on this page:
http://www.geovino.net/wheeler/index.html

How to add text to upper right corner of the header?

psjw12
Offline
Regular
Kingston, UK
Last seen: 12 years 20 weeks ago
Kingston, UK
Joined: 2008-07-10
Posts: 12
Points: 0

Place the text you want

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?

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

So I should make it a class

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

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

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

I made this

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

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

Posting the rest of your CSS

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

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

it's a very large style

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

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 3 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

dont use absolute

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;}

Use margins to place it exactly where you want it.

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

you mean add to this style

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;}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 3 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

put this code under your

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

tags. Doing the way I have illustrated above will onnly style

tags that are inside your #header. You may need to adjust the width and add margins in order to position it exactly where you want it.

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Thank you.

Thank you. Smile

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

I do not know which browser

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:

AttachmentSize
eWheeler.JPG 100.12 KB
davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Firefox. the site is now at

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.

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

I just checked

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. Smile

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

This is what I would

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/

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Thanks, but will this only

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. ?

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

#header p { ... } will

#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 Wink

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 44 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Thank you

Thank you Smile

TheBMRR
TheBMRR's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2009-02-25
Posts: 60
Points: 0

I just checked your site and

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