on this page:
http://www.geovino.net/wheeler/index.html
How to add text to upper right corner of the header?
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?
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;}
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.
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
it's a very large style
it's a very large style sheet. what is the best way to send it?
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.
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;}
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.
Thank you.
Thank you.
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:
Attachment | Size |
---|---|
eWheeler.JPG | 100.12 KB |
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.
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.
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:ewheeler@ewheeler.org">ewheeler@ewheeler.org</a> </div>
And put this in its place:
<p>503-330-4277<br /><a href="mailto:[email protected]">xxxx@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
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
#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@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
Thank you
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: