The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
Reply to this topicStart new topic
Replies
Frederiek
post Jun 22 2012, 03:01 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


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: 29th March 2024 - 10:07 AM