Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: css and sNews enhanced  (Read 5147 times)

Simple

  • Newbie
  • *
  • Karma: 2
  • Posts: 40
    • Simple webDesign
css and sNews enhanced
« on: November 20, 2007, 01:10:18 pm »

I'm having a little problem when implementing a design i made to the super cool sNews Enhanced. The problem is with my footer and with a "page curl" image. The thing is that they don't stay on the bottom of the page as they should be (or as I want it) maybe because the way the comments form are opened.
This is the css for the page curl
Code: [Select]
.pagina {
position: absolute;
z-index: 50;
left: 0px;
width: 160px;
height: 85px;
bottom: -80px;
}
The image should stay in the bottom left corner of the site, no matter what. The footer in the bottom center. But they don't. Do you have any ideas or solutions?

Thank you in advance and by the way, the page can be found at cane.ro if I didn't manage to transmit my problem.
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: css and sNews enhanced
« Reply #1 on: November 20, 2007, 01:24:16 pm »

Hello
maybe:
Code: [Select]
display: block;
position:relative;
width:160px;
height:85px;
z-index:auto;
bottom: -80px;
left: 0px;
and it seems to work in IE too.
« Last Edit: November 20, 2007, 01:29:30 pm by Sven »
Logged

Simple

  • Newbie
  • *
  • Karma: 2
  • Posts: 40
    • Simple webDesign
Re: css and sNews enhanced
« Reply #2 on: November 20, 2007, 01:26:17 pm »

The page is at the bottom of the previous post :). It's www.cane.ro
« Last Edit: November 20, 2007, 02:17:39 pm by Simple »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: css and sNews enhanced
« Reply #3 on: November 20, 2007, 01:30:21 pm »

cross-posting, Simple.

Take the above code: it rocks.  ;)

Simple

  • Newbie
  • *
  • Karma: 2
  • Posts: 40
    • Simple webDesign
Re: css and sNews enhanced
« Reply #4 on: November 20, 2007, 02:18:44 pm »

Thank you, but for now it's the same. I'll se a little bit later at home on IE (now i'm on linux)...
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: css and sNews enhanced
« Reply #5 on: November 20, 2007, 04:41:16 pm »

Thank you, but for now it's the same. I'll se a little bit later at home on IE (now i'm on linux)...
I just checked using this online service. In any case your curled image is at the right place. ???

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Re: css and sNews enhanced
« Reply #6 on: November 20, 2007, 06:28:20 pm »

@ Simple... I think the trick is... you need to add the image as a background image in the css declarations for your pagina division, and remove it from your index.php (template file) if that is where it is now. You also need to position that division "absolutely" so that it stays at the bottom-left corner of the viewing screen. Try this in your stylesheet and see what happens... I use the same method to position a fixed footer that stays at the bottom of the viewing screen while the rest of the page content scrolls.

Quote
#pagina {
  background: #fff url(images/fara_pisici.jpg) no-repeat;
  position:absolute;   /* Using this allows IE to interpret positioning correctly */
  bottom:0;      /* positions footer at bottom of browser window */
  left:0;      /* positions footer to left of browser window */
  width:100%;
  height:85px;   /* fixed height of bottom-right footer image*/
  overflow:auto;   /* adds scroll bar(s) if content overflows the division - remove it not required. */
}

And... if you have this division at the bottom of your index.php file... replace the image-string with   so it looks like this:

Quote
<div class="pagina">&nbsp;</div>
« Last Edit: November 20, 2007, 06:31:05 pm by Keyrocks »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Simple

  • Newbie
  • *
  • Karma: 2
  • Posts: 40
    • Simple webDesign
Re: css and sNews enhanced
« Reply #7 on: November 21, 2007, 09:05:23 am »

Thank you Keyrocks. The thing is that on IE everything is ok now. But in firefox, the problem persist. At the beginning, the place of the page curl is ok. But if i have to scroll, the page remains in the same position. The same is with the footer image. Try for example to ad a comment and you'll see that the footer image will overflow the comment filds and will stay at the same place. This is for Firefox only. It's ok that in IE it's all fine, but it would be great if on Firefox will be the same :).

Thank you again.

P.S. I don't what the page curl to stay always at the bottom of the screen. I want it at the bottom of the page :)
« Last Edit: November 21, 2007, 09:15:46 am by Simple »
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: css and sNews enhanced
« Reply #8 on: November 21, 2007, 12:07:38 pm »

Quote from: Simple
I don't what the page curl to stay always at the bottom of the screen. I want it at the bottom of the page

There's a cute trick that Ryan Fait came up with a while back that would put the footer at the bottom of the page, always (and at the bottom of the screen when the page is shorter than one full screen). Have a look at http://ryanfait.com/sticky-footer/. It's actually quite cool, although it takes some testing back and forth to get it to work right, at least in complex layouts. The trick should work in just about any fairly recent browser AFAIK, even IE6. ;)
Logged

Simple

  • Newbie
  • *
  • Karma: 2
  • Posts: 40
    • Simple webDesign
Re: css and sNews enhanced
« Reply #9 on: November 21, 2007, 02:12:43 pm »

Ok, i manage to fix some stuff and now, on linux and on firefox all seems fine. When I'll get home I'll see how are things on IE and Windows. Thank you all for your help.

P.S. I used also some help from here: http://qrayg.com/learn/footerstick
Logged