News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Custom template using CSS absolute positioning

Started by ComputerLady, September 21, 2005, 08:04:58 PM

Previous topic - Next topic

ComputerLady

I'm trying to create a custom template for the forum installed here:
http://www.cebug.org/forum/

Rather than use tables, I've learned how to do sliced image layout using CSS and absolute positioning. You can get an idea of the code I'm using by looking at the main site here:
http://cebug.org/

I was able to create a new theme set, and alter the included template file and CSS so the new header graphics show up like they should. The problem is everything in the forum itself wants to float up over the bottom edge of those graphics & links! I thought there was something in the CSS file somewhere that I need to change so the margin setting at the top is set for the 130px space I need. But, I can't figure out what settings control that.

Did change settings inside SMF to allow users to choose their own theme, in case anyone wants to look at what I'm struggling with. The theme is called 'cebug'

Any suggestions would be greatly apprecated!

(No, I havn't had time to get the default graphics and stuff changed. That's next on the agenda!)

The Computer Lady!
Design Works Internet - CEBUG
Custom Web Design & Programming, Video Tutorials

bloc

Try changing the "position: absolute" in the cebug specific styles...they really tell the things to lay on top of everything ( not pushing it downwards at all), thats why the forum seem to flow over your graphics. Only you also need a "z-index: 4;" (or higher) to actually get those shown above the forum, instead of under it...

So changing "absolute" to "relative" might do the trick.

ComputerLady

Quote from: Bloc on September 21, 2005, 08:48:53 PM
Try changing the "position: absolute" in the cebug specific styles...they really tell the things to lay on top of everything ( not pushing it downwards at all), thats why the forum seem to flow over your graphics. Only you also need a "z-index: 4;" (or higher) to actually get those shown above the forum, instead of under it...

So changing "absolute" to "relative" might do the trick.

Hummm... Can do that with the outer 'wrapper' DIV.... Change that one to relative. Also thought I could insert yet another new, empty DIV under those and set that to use the 'clear: all;' attribute. That should make everything else move on down the page too. Okay, 2 ideas to try then. Crossing fingers one of them is going to work!

I just hate the idea of going back to using tables for sliced images after I've finally mastered how to do that using CSS.  Seems like I'd be going backwards, rather than forwards!

Back later with a followup...
The Computer Lady!
Design Works Internet - CEBUG
Custom Web Design & Programming, Video Tutorials

bloc

Yeah..css is great, but it just doesn't "fit" with everything..still. Or is it just that we need to learn more about it.. :P ;D

Advertisement: