Solved

Need help

Posted on 2014-01-13
9
229 Views
Last Modified: 2014-01-15
Can any one please help me in that. Its not a frame. I have images but dont know how to make these 4 boxes. Left side in each box is a picture and on the right side its a text.

Thanks.
Page1.jpg
0
Comment
Question by:mustish1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 

Author Comment

by:mustish1
ID: 39778546
Do i need to create a table and inside each row should i create frames?
0
 
LVL 6

Assisted Solution

by:Mahesh Bhutkar
Mahesh Bhutkar earned 50 total points
ID: 39778551
You can easily do this using <table> <tr> <td> tag of html.

For images you have to fix the width & height.

you may required to use the following properties as well
width,height,rowspan
0
 

Author Comment

by:mustish1
ID: 39778559
ok its a table. I thought its some thing new in html5
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mustish1
ID: 39778571
Can you please show one box with left side image and right side text. I will follow the rest with that code

<html>
<head>
<ttle></title>
<body>
<table border = "1" align = "center">
</table>
</body>
</html>
0
 
LVL 33

Accepted Solution

by:
Big Monty earned 450 total points
ID: 39780345
i wouldn't use tables, but rather DIVS and a little CSS. I recently did something similar, have a go at this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .image-container {
            margin: 20px 20px 0 0;  
            overflow: auto;
        }
        .image-thumb {
            float: left
        }
        .image-thumb img {
            display: block
        }
        .image-content {
            margin-left: 210px
        }
        .image-title {
            font-weight: bold;
            font-size: 200%
        }  
        
        #team {        
            margin-left: auto; margin-right: auto; width: 70%; font-family: Arial;
        }
    </style>
</head>
<body>
        <div id="team">
            <div class="image-container">
                <div class="image-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
                <div class="image-content">
                      content goes here
                </div>
            </div>

            <div class="image-container">
                <div class="image-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
                <div class="image-content">
                    more content would go here
                </div>
            </div>
           
        </div>
</body>
</html>

Open in new window

0
 

Author Comment

by:mustish1
ID: 39780557
Thanks. But in the image it looks like little different. Its like one big long box and there is 4 rows in it
0
 
LVL 33

Expert Comment

by:Big Monty
ID: 39780980
its just a starting point to where you're going. you'll need to style the image-content, probably add another div in there to hold the actual text so you can style the image-content to have a gray background
0
 

Author Comment

by:mustish1
ID: 39782360
I've requested that this question be closed as follows:

Accepted answer: 450 points for The_Big_Daddy's comment #a39780345
Assisted answer: 50 points for bonzermahesh's comment #a39778551
Assisted answer: 0 points for mustish1's comment #a39778571

for the following reason:

Thanks
0
 
LVL 33

Expert Comment

by:Big Monty
ID: 39782345
this is NOT an objection, just a tip for the OP:

Instead of requesting the question to be closed, you may just hit the "Accept Multiple Solutions" link under any of the answers and divvy up the points that way. It's the same as what you did, except instantaneous
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question