[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 238
  • Last Modified:

Need help

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
mustish1
Asked:
mustish1
  • 5
  • 3
2 Solutions
 
mustish1Author Commented:
Do i need to create a table and inside each row should i create frames?
0
 
Mahesh BhutkarCommented:
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
 
mustish1Author Commented:
ok its a table. I thought its some thing new in html5
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
mustish1Author Commented:
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
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
 
mustish1Author Commented:
Thanks. But in the image it looks like little different. Its like one big long box and there is 4 rows in it
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
 
mustish1Author Commented:
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
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now