Ok, I have a problem that I really can not solve. I'm trying to make a template for joomla, and I want to have background image that's changing randomly, but I also want it to be centered on the page when resizing a browser. Is there a way for a background image to be aligned the same way as a table. I've done something just for an illustration: http://handicap-international.co.ba/handi_active/index.php?option=com_content&task=view&id=12&Itemid=1 what I'd like to do is make the table start by the end of left part of the background image. I know that it's not very smart of me to use tables, but I don't know css and I'm trying to find a way for this to work. also if anyone knows some simple solution that might work better I'd appreciate it.
I'm not so sure I understand what you are trying to do. Do you think you could clarify it a bit, or post a link to an example that is already working?
I know nothing of php but Js I know at least can change stuff in the CSS file (if you had one). You can also do inline styling which is icky but does the job until you learn CSS : ) I hate this, but you can have <body style="background: url(whereverwhateverimageis) center center no-repeat;"> That sets a background on the body. No space between url and the ( and inside the () you need the path name to the image and the name (../images/foo.jpg). The center center is positioning of the background... should change with viewport size. I dunno if this is for the center of the image though or the left and top sides. No-repeat prevents tiling. When you get your own CSS sheet, it'd be like this: body { background: url(images/foo.jpg) center center no-repeat; } or body { background: url(/home/somewhere/foo/images/foo.gif) 50% 50% no-repeat; } You can use left, right, top, bottom and center, and also numbers (percents, px, em's...) but don't mix the two. words with words, numbers with numbers. Unless I misunderstand. And Js can change the css sheet (not sure exactly how but it can).
Hey, guys, I completely forgot about this post, so I experimented with some other template. I know I'm confusing. sorry for that, and thank you for your answers. I really think I'll be dropping this thing off, since the background image is too heavy for loading. but if someone knows a way to speed up loading without messing up the image then he shall be my yoda. Stomme poes, thank you for your reply, are you sure that solution can work with randomly changing backgrounds? I have seen this CSS solution before it's just that it didn't work with random background specified in body. I'm sorry if I'm not clear it's just that there is a lot of problems that need to be combined. together. I've set this template again so if someone saw that other one please forgive me.
the simplest solution for this problem would be, to specify in CSS the page background that's randomly changing and is centered, and not repeating I should really learn to post a question. thank you for your understanding.
He, he. the solution was to change the look I wanted completely and to use more flash. you see, when using that big image for background (since I wanted background on two sides of the page-surrounding the content) I had to downsample it a lot, so the site looked crappy. now I simply decided to use crisp, smaller images with less compression which give the site more expensive look. it's on the same link: http://handicap-international.co.ba/handi_active/ Right now I have only the banner designed, but I think It's starting to look better. I'm experimenting with some borders and angles, but I'm far from a elegant solution for now. and about that CSS. I see they're always spitting down on tables and brag about CSS, well, I'm just too old to learn CSS- but you know what... It just crossed my mind. there must be some tables to CSS converter... aaaand... voila- http://www.table2css.com/ now we just have to wait a while for someone to build open source version. those are my solutions for today
CSS and tables are really two different things, except that many people used to use tables for positioning on a page. I can almost (as I haven't used it) guarentee that taking a table layout and using a machine to change that to divs and css will be lots more code than written semantically in the first place : ) If you're more comfortable using tables because you don't want to learn css, then leave it as a table. Esp since, someday in the future, you'll want to make some small change and you won't easily figure out how. The new site looks better. Just be careful with Flash. Use it only for pretties-- Don't be tempted to use it for menus and content and other things on the site. People without Flash and any googlie bots you hope to visit will see nothing (there is a way around that but it's difficult). about my solution above: Javascript is I think one of the most comonly used ways to randomly show images. There are many Javascript Random Image Slides out there. What it would have to do for a background image is change the css (where it says body {background: url(blahblahblah.jpg) center center no-repeat;}, the Js would have to change the part after url ). The reason I know Js can affect CSS is because there are Js files used to help IE6 with its retard problems esp. with hover attributes. The whatever:hover .htc file is an IE-only Js which changes the CSS, substituting various elements with classes which do the same thing as the :hover is doing with all the other browsers in the world. I just can't help any further than that as I don't write Js myself.
thank you very much stomme poes. yea, I know about flash-search-engine problems, but the guys that ordered the site wish to have a lot of cool flash on the site, so I said that we will use flash for all non-searchable things and for content and the other well use html. That's basically what you said I should do, right? thanks for that advice, on css bacground. it doesn't sound complicated just looking at it, but I just know I'd spend days arranging those lines to do the right thing. the problem is (I'm just guessing) to synchronize CSS and that Javascript part. But I think I solved my technical problems and now it leaves me just with aesthetics to worry about. I have only banner for now, and I really don't want to make a simple square site. I'd like it to have some rounded forms. I just don't have an idea.
You could check out the CSS Zen Garden for some neat design ideas that break out of the boxi-ness. It's the same HTML for every design, only the CSS is different. There are pure CSS and Javascript ways of rounding corners, but the easiest is usually images. For rounded tops, bottoms, and buttons, you can read the articles on "Sliding Doors" and "Sliding Doors with CSS Sprites" at A List Apart. Just google those terms. A great way to have rounded edges without a hundred gazillion images. For the Javascript-changing-css, you'd have to know your Js I guess. Setting the image (or, the spot and conditions for the image) via css is the easy part. If you're interested in learning CSS, there's a nice book out called HTML Utopia: Designing Without Tables Using CSS. It's a book written for people who already know HTML but don't know how to use CSS for making whole pages or layouts. It walks you through a few popular layout-styles and is pretty easy to read, lots of tips and some info on a few IE bugs. The appendix in the back is also very nice.
thank you for that sliding door link. I can almost see the possibilities it opens, but I'm already fed up with learning new stuff. ok maybe I'm exaggerating just a bit. maybe I'm a little tired on Monday, and maybe since tomorrow is a new day, I'll be able to see all the new opportunities behind the slide door. but for now, I think I'll stick with the simple static background image.
hey, I'd just like to say I finished large part of my work, and now found some time to try and translate the template from tables to CSS. I found some cool site on the subject http://www.javascript-page.com/css/step1.shtml it's for total beginners and is easy to understand, and I can tell you, except the fact that CSS is really simple and logical- it's very interesting. I enjoy playing with it just like a little kid. I'm still far away from perfection, or even usable code, but I'll at least be able to incorporate some of the ready solutions into the design and edit them slightly. thanks everyone.