The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Can anyone help me on this page please? Thanks., create a simple html page
mdivk
post Jun 20 2012, 09:29 PM
Post #1





Group: Members
Posts: 4
Joined: 20-June 12
Member No.: 17,298



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 21 2012, 02:48 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 4,281
Joined: 23-August 06
From: Europe
Member No.: 9



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


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mdivk
post Jun 21 2012, 06:00 AM
Post #3





Group: Members
Posts: 4
Joined: 20-June 12
Member No.: 17,298



QUOTE(Frederiek @ Jun 21 2012, 03:48 AM) *

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


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


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mdivk
post Jun 21 2012, 06:07 AM
Post #4





Group: Members
Posts: 4
Joined: 20-June 12
Member No.: 17,298



Thank you for the css recommendation to remove the space between rows, it works
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 21 2012, 06:51 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 4,281
Joined: 23-August 06
From: Europe
Member No.: 9



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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mdivk
post Jun 21 2012, 08:11 AM
Post #6





Group: Members
Posts: 4
Joined: 20-June 12
Member No.: 17,298



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..........
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 22 2012, 03:01 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 4,281
Joined: 23-August 06
From: Europe
Member No.: 9



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?


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th July 2014 - 09:34 PM