Can anyone help me on this page please? Thanks., create a simple html page Options

[mdivk]

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.

[Frederiek]

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/...eset-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).

[mdivk]

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/...eset-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).

Hi Fred,

I am so so so sorry for this and thank you so so so much for letting me know the missing files, it was written as "localhost", I have no problem viewing the "localhost" files so I didn't even notice anyone else on the Internet is impossible to see my "localhost"' files.


I have updated the file so you will see the images for sure, as to the css, it was from another helper's post, I removed them and it is still working, so I assume it is not used.

Please check the page again, thank you. I have also attached a full screenshot for your reference.

This post has been edited by mdivk: Jun 21 2012, 06:01 AM

[mdivk]

Thank you for the css recommendation to remove the space between rows, it works

[Frederiek]

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/...a15/index0.html

As for the CSS, get rid of cellspacing="0" for td.spaceUnder > td, which is a CSS error.

[mdivk]

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..........

[Frederiek]

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:

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <style type="text/css">
        .container {
            width: 922px;
            margin: 337px auto 0;
        }
        img {
            margin-right: 1px;
        }
        .last {
            margin-right: 0px;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        <img src="1930.png" alt="" width="301" height="132">
        <img src="1931.png" alt="" width="150" height="132">
        <img src="1930.png" alt="" width="150" height="132">
        <img src="1651.png" alt="" width="301" height="132" class="last">
    </div>
    <div>
        <img src="1931.png" alt="" width="150" height="132">
        <img src="1931.png" alt="" width="150" height="132">
        <img src="1930.png" alt="" width="301" height="132">
        <img src="1931.png" alt="" width="150" height="132">
        <img src="1931.png" alt="" width="150" height="132" class="last">
    </div>
</div>
</body>
</html>

That's a lot easier, isn't it?