[Resolved] How to position a Widget at the bottom of page?
So I have an image that I want positioned at the bottom of the page. I tried inserting it into the footer, but it was cut off by the #contentwrapper of my theme (Amirra). I tried other sections and it didn’t fit right, so then I thought I could put the image in as a widget. It worked for width and look, but the widget is in the middle of the page.
Basically what I’m wondering is if there’s a way to move that particular widget to the bottom of the page, or if there’s a way to put an image at the bottom in the footer to overlap everything else?
I’m only just starting out with CSS and PHP, but any help would be greatly appreciated!
Do you mean the photo that’s at the top of the sidebar, under the Recent Figure Preview heading? If so, the simplest thing to do would be to copy and paste the source code and then drop it in the footer:
<h2 class="widgettitle">Recent Figure Preview: </h2> <div class="textwidget"><a href="http://www.animemaki.net/2010/04/figure-preview-marvel-bishoujo-phoenix/#more-99"><img src="http://www.animemaki.net/wp-content/uploads/2010/04/Phoenix.jpg" width="290" heigh="147"></a></div>
There’s also a loading issue on your site, which seems to be down to your ga.js (it’s taken almost 40 seconds to load!).
I appreciate the reply and I’ll try that out in a second.
I feel like a noob asking, but what’s a ga.js? The google analytics script? I just this second removed it if that’s what you were referring to. I’ve been using another tracking service anyway.
Hmmm, I tried your suggestion for moving the widget, but that’s not exactly doing what I want it to do. Here’s an example (quickly photoshopped jpg) of what I am trying to figure out:
basically I just want to put a character at the bottom of the sidebar in that space.
I believe this is doable with a combination of code and CSS placement.
- Modify functions.php to define an additional widget area
- Add the second widget area in the sidebar, beneath the existing widget area
- Use CSS ‘position:relative’ to place the second widget area at the ‘bottom’ of the sidebar
Just some thoughts …
Here is some additional reading that may help as well:
Yes, ga.js was the Google Analytics script. I just checked your site and it loaded in a flash, so that was definitely the culprit.
Cais’ solution might work, or a simpler option could be to set the character as a background image. You would need to create a new div directly inside the contentwrap div, and give it the character image as a background (positioned bottom right). Let me know if that works for you.
I appreciate the suggestions. I tried looking at a way to make Cais’ solution, but it’s beyond my abilities for coding. I’m not knowledgeable enough yet to create a div that actually works. 🙂 I get the general idea of it, but nothing I did actually provided results.
I also tried using the image as a background, but the #contentwrapper already lists a background image:
background: url(images/contentwrap.png) top left repeat-y;
Is it possible to do two? I tried that and it didn’t work.
Unfortunately, no, not at this stage. I’ll send you a message through your contact form so you can email me and I’ll help you get it set up.
Eric got me all fixed up. Thanks bro!
Problem = Resolved!
- The topic ‘[Resolved] How to position a Widget at the bottom of page?’ is closed to new replies.