Can anyone help me on this page please? Thanks., create a simple html page |
Can anyone help me on this page please? Thanks., create a simple html page |
mdivk |
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. |
Frederiek |
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? |
Lo-Fi Version | Time is now: 29th March 2024 - 10:07 AM |