Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need help

Posted on 2014-01-13
9
Medium Priority
?
232 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 200 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.

688 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