Mon, 2010-08-16 21:06
Hi Folks!
So I just finished creating my first wordpress theme, applied it to the site and is all good save for one thing, in the footer I put some small copyright text and I need it to position itself on the right side of the line, so I'm using a SPAN tag to do that, but when I used the following code, the text goes all the way to the right of the browser window, instead of staying in the fixed width page wrap DIV, Code pasted below:
I tried this first:
span.right { position: absolute; right: 0; }
but since it spilled out of the page wrap div, I now am using this:
span.left { position: relative; left: 355px; }
Only problem with the above is that it works in chrome and safari, and to some extent in firefox, but in opera it gets misaligned.
Here's the code for my footer.php:
<div id="footer"> Tel 604.253.1451 <a href="mailto:wendyd@wendyd.ca">wendyd@wendyd.ca</a> <span class="left"><small>All content is © <?php print(date(Y)); ?> by <a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name'); ?></a>. All rights reserved.</small></span> </div> <div class="clear"></div> </div> <!-- END main-content --> </div> <!-- END page-wrap --> </body> </html>
And lastly, the live website: http://www.wendyd.ca/
What am I doing wrong?
Tue, 2010-08-17 01:45
#1
Did you edit your HTML? I
Did you edit your HTML? I don't see a span.right.
Tue, 2010-08-17 01:58
#2
Thanks for the response,
Thanks for the response, that is what I was using first, but it was making the copyright show up on the extreme left, touching the edge of the browser, and not inside the 616px wide div page wrap that I've set.
Tue, 2010-08-17 03:33
#3
So... is there still a
So... is there still a problem or are you all good now?
Tue, 2010-08-17 04:16
#4
Sorry, I haven't been really
Sorry, I haven't been really clear.
My question in the end is, if I use the following code to make the copyright text appear on the right, why does it not stay inside the 944px wide box created by the DIV page wrapper? It goes all the way to the edge of the browser window, on the right.
span.right { position: absolute; right: 0; }
Here is what it looks like: 
Tue, 2010-08-17 04:24
#5
The HTML posted above doesn't
The HTML posted above doesn't have anything in it with a class of 'right'...
Tue, 2010-08-17 04:36
#6
Deuce wrote: The HTML posted
The HTML posted above doesn't have anything in it with a class of 'right'...
Correct, that is because I am not using that code, it messes up like the image I posted in my previous response, so instead I had to use this:
span.left { position: relative; left: 355px; }
The problem with the above code is that every browser interprets 355px differently, it works fine in Chrome and Safari but sticks out with opera and lands short in Firefox.
Tue, 2010-08-17 06:18
#7
Add position: relative to
Add position: relative to #footer to establish a new positioning context (i.e. positioned elements take their coordinates from #footer and not from the window).
Tue, 2010-08-17 07:13
#8
Woohoo
That did it! Thank you so much Tyssen!
Cheers 