I need to create a simple page with the following requirement:
1. Mock up this page:
http://www.xiexianhui.com/baxjoomla15/index0.html
2. The image's size could be adjustable automatically based on the browser/screen's size
3. The table will ALWAYS stick in the MIDDLE of the SCREEN
4. Remove the wider space between the two rows in the sample page
5. Make the page also work for mobile device, which means the images get auto re-sized
If you would like to help me, please use whatever images to create the sample page and make it working somewhere on the web that I can access it.
I heard people telling me:
1. I have to use javascript to make it stick in the middle of screen
2. I should use css based tech to write the code to generate the table instead of the traditional table
I have little HTML/CSS experience, I tried to post the question on forums like StackOverflow (how suck a forum is, cost me half an hour to get my question posted, always rejected my post for nonsence reason that I never saw in any other forum), no luck so far.
I wish I can get help from this forum, this is my VERY FIRST POST in this forum.
Thank you so much in advance.
1) The CSS files are missing, as all IMG files. So, I can't see what you tried so far.
2) Look into "responsive images".
3) You don't need javascript for that, use CSS. But you don't need absolute positioning, like you did in the CSS at the top of the page. See http://css-discuss.incutio.com/wiki/Centering_Block_Element
4) I don't see that. Or do you mean the space between the top row and the bottom row? Surely, they have to do with default margins/padding of HTML elements, in this case TABLES. Personally, I always use Eric Meyer's reset.css, see http://meyerweb.com/eric/tools/css/reset/ or http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/ and reply margins and padding to my needs. I wonder if you need (nested) tables, which might complicate things.
5. Again look into "responsive images" and media queries. A good resource, with links to articles all over the web, is http://www.d.umn.edu/itss/training/online/webdesign/ (particularly in CSS and Misc sections).
Thank you for the css recommendation to remove the space between rows, it works
Of course I didn't see your localhost files, that's why they were missing. Apparently, you now have left out these CSS files, using only the little bit of CSS at the top of the page.
In my Safari/Mac, the elements are not centered on the page as in Firefox, but pushed to the right, caused by the positioning.
Get rid of the position: absolute and top, left en right declarations and add a margin-top (use e.g. margin: 392px auto 0; instead of the margin: auto; you have currently), it then will look the same in Safari.
I also suggest you validate the markup and fix the errors found:
http://validator.w3.org/check?uri=http%3A//www.xiexianhui.com/baxjoomla15/index0.html
As for the CSS, get rid of cellspacing="0" for td.spaceUnder > td, which is a CSS error.
Thank you my friend, I made some corrections, there is no any space between images, I want 1 px in between every images, I tried to add cellspacing="1"; or border: 1; in css, doesn't seem to work.
As you can see, it really takes HTML newbie like me to get this done efficiently and correctly, could you please kindly help me to re-create the page? it is not a complex page, give me your donation page I can certainly offer some tip (please don't be feeling bad, I just want to get this done), all I need is like what I said in the original post, that's all.
Thank you very much in advance, please..........
You are making things complicated with nested tables. Simply two DIV's inside a containing DIV, would be enough.
A sample page you can to tweak:
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)