| We hope you enjoy your visit. You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| Image Borders; A problem with #wrap(?) | |
|---|---|
| Tweet Topic Started: Jan 7 2012, 03:01 AM (1,201 Views) | |
| fladdermasken | Jan 7 2012, 03:01 AM Post #1 |
|
Member
![]() ![]() ![]()
|
Why, hello there. Coding and I get along about as well as earthworms with a steamroller. I'm just pleased I didn't mash everything together into one large geltanious mass, but I did come across a quirk yesterday-- well, moreso than the average quirk. I've been trying to implement full image borders (following this guide), and managed to get some pretty disturbing results. #footer isn't in line with #footer_l and #footer_r (refer to this). Here's the code I added. Spoiler: click to toggle And here's the theme layout. Spoiler: click to toggle If you visit my board and apply the undead theme, you'll see what I mean. I tried several hours to man the wrench and fix it, but everytime I do it's like taking a mallet to the face. So I turn to you guys; please man the wrench in my stead-- or you know, tell me how to use it properly. Thank you. Edited by fladdermasken, Jan 7 2012, 03:02 AM.
|
![]() |
|
| DaPizzaMan-ZNS | Jan 7 2012, 05:09 AM Post #2 |
|
Member
![]() ![]() ![]() ![]()
|
I may not be completely right when it comes to this, but if you change the height of `#footer` to height:58px; and you add repeat-x center bottom; after the background URL, then that should fix it. I tried 59px for the height since the left and right sides are 59px, but that made it look 1px off. |
![]() |
|
| fladdermasken | Jan 16 2012, 06:56 PM Post #3 |
|
Member
![]() ![]() ![]()
|
Thanks. I can see the logic in that, but it only worked to a certain extent. The footer isn't part of the wrap, thus the gap between the footer and the wrap inherits the forum bg (#000). At least that's what I deduced after a couple of beers and self-inflicted skull fractures from blunt force trauma. So here I am, asking if it's possible to add another <div id>-line (refer to this) for the area between #side_l and #footer_l (vice versa on the right side) and #side_l and #header (vice versa on the right side). I sort of figured if I split the corners into one piece matching the height of the header/footer and one piece to make the corner seem coherent, I might just solve this issue. Any other way of going about this is also appreciated, I reckon my method should be within arm's reach of dumb-dumb boulevard. |
![]() |
|
| fladdermasken | Jan 21 2012, 10:45 AM Post #4 |
|
Member
![]() ![]() ![]()
|
Anyone? |
![]() |
|
| Pete B | Jan 21 2012, 11:33 AM Post #5 |
|
Member
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
It looks like the way the images were cut? Was the actual content of the #footer image cut higher up than the corner pieces by one pixel creating a misalignment? I think there is a pure CSS solution to this rather than recutting the images though. The #footer, #footer_l and #footer_r do need their height increased to encompass the size of the border images. You can just add these snippets to the end of your CSS or if you want, merge it into your existing code.
|
![]() |
|
| fladdermasken | Jan 23 2012, 10:18 AM Post #6 |
|
Member
![]() ![]() ![]()
|
That aligned it alright, thanks a ton. One issue still stands though, the cornerpieces are almost twice the height of the footer (and the header). Which I'm assuming is what's to blame for the wrap not quite reaching the footer. Is there any way around this?
Could very well be, I'm not using any fancy tools to do the cutting. |
![]() |
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · ZetaBoards - Theme & Code Support · Next Topic » |





![]](http://z1.ifrm.com/static/1/pip_r.png)



3:38 PM Jul 11