Solved

Need help

Posted on 2014-01-13
9
221 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
  • 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 32

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 32

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 32

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now