I'm very new to web design and I'm practicing designing a website at my internship for this summer. I'm trying to make a table for a table on the right side and the bottom the classes are named "BroadCastSchedule" and "RightSearchBar" in the code.
I can't post the picture because this is my first post to stack overflow but if you run the code you can see the two sections of the table are very far apart and I can't get them to be together.
<!DOCTYPE html>
<html>
<head>
<title>Channel 14 Schedule</title>
<div class="img">
<img src="images/logo.png">
</div>
</head>
<style type="text/css">
#navBar {
height: auto;
position: relative;
bottom: 75px;
left: 200px;
}
#menuli {
margin: 0px;
max-width: 450px;
}
li {
display: inline-block;
padding: 0.5em;
font-family: sans-serif;
color: gray;
}
h1,
h2 {
color: gray;
font-size: 75%;
}
.searchBar {
top: 200px;
}
.titleBox {
position: relative;
left: 400px;
bottom: 75px;
}
.img {
position: relative;
left: 250px;
}
.RecentlyWatchedBar {
position: relative;
bottom: 575px;
left: 200px;
}
.searchTool {
position: relative;
right: 200px;
}
.videoLink {
/*Change size where the video is linked*/
position: relative;
left: 250px;
}
.RightSearchTable {
position: relative;
right: 75px;
top: 100px;
}
.Calender {
position: relative;
margin-top: -75px;
right: 75px;
}
.BroadcastSchedule {
display: table-header-group;
position: relative;
table-layout: fixed;
right: 350px;
margin-right: -200px;
padding-right: -200px
}
#h1FontSize {
font-size: 150%;
left: 700px;
}
#h2Location {
position: relative;
bottom: 20px;
}
input {
position: relative;
left: 1000px;
bottom: 25px;
}
table,
td {
border: 1px solid black;
position: relative;
left: 1000px;
bottom: 500px;
}
</style>
<body background="images/bg.png">
<div class="mainItemsDiv">
<div class="titleBox">
<h1 id="h1FontSize">Channel 14 Schedule</h1>
<h2 id="h2Location"><i>Local Government And Sports</i></h2>
</div>
<div id="navBar">
<ul id="menuli">
<li><strong>Main</strong></li>
<li><strong>About</strong></li>
<li><strong>Schedule</strong></li>
<li><strong>Podcasts</li>
<li>Search</li>
</ul>
<div class="searchTool">
<input type="text" placeholder="search">
<input type="button" value="Search">
</div>
</div>
<div>
<div class="videoLink">
<iframe style="margin-top: -80px"width="657" height="400" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="RightSearchTable">
<table width="225"; height="580">
<tr>
<th>Show Search
<p>Roseville High School Concerts</p>
<p>St. Anthony Football</p>
</th>
</tr>
</table>
</div>
<div class="RecentlyWatchedBar">
<p style= "color: #707070; text-indent: 50px">Recently Watched</p>
<p>
<ul>
<li><iframe style="margin-top: 0px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
<li><iframe style="margin-top: -80px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
<li><iframe style="margin-top: -80px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
<li><iframe style="margin-top: -80px"width="150" height="110" src="https://www.youtube.com/embed/XxqcwGI6dOY" frameborder="0" allowfullscreen></iframe></li>
</ul>
</p>
</div>
<div class= "Calender">
<table width="225"; height="225">
<th>
<p>Calender tool will go here</p>
</th>
</table>
</div>
<div class="BroadcastSchedule">
<table width="250"; height="100">
<tr>
<th>Date</th>
<th>Location</th>
<th>Start Time</th>
</tr>
<tr>
<td>Date Data</td>
<td>Location Data</td>
<td>Start Time Data</td>
</tr>
</table>
<!--
<table style="width:650px; height: 100px;">
<tr><td>Firstname</td>Eve</tr>
</th>
<th>Lastname</th>
<td>Eve</td>
<th>Points</th>
<td>Eve</td>
<tr>
<th>Eve</th>
<th>Jackson</th>
<th>94</th>
</tr>
</table>
-->
</div>
</div>
</body>
</html>
You are editing table data instead of table row. Change this line in your css:
table, td{
//Do something
}
To this:
table, tr{
//Do something
}
Related
I have been trying to figure out what causes this issue but couldn't. This image gallery is responsive but when I hover my mouse pointer on the thumbnails the image is shown on the left side main gallery but the thumbnail set disappears. Tried everything I know. I think my mind got fed up and gave up :-(. Any help in fixing it will be much appreciated. Thanks much in advance.
<style>
#gallery_container {
position: relative;
margin-bottom: 16px;
}
#gallery_mobile_container {
position: relative;
}
.gallery_main {
position: absolute;
visibility: hidden;
opacity: 0;
top: 0px;
left: 0px;
transition: visibility 0s, opacity 0.5s;
text-align: left; /*changing image appears on the left*/
background-color: #ffffff;
}
.gallery_large_img_table .gallery_main {
visibility: visible;
opacity: 1;
position: relative;
}
.gallery_thumbnail:hover > .gallery_main {
visibility: visible;
opacity: 1;
}
.gallery_thumbnail {
padding:2px;
cursor: pointer;
text-align: center;
}
.gallery_thumbnail_img {
transition: opacity 0.5s;
max-width: 100%;
max-height: 230px;
}
.gallery_thumbnail_img:hover {
opacity: 0.5;
}
</style>
<style>
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
</style>
<div style="display: table-cell; width: 90%; height: auto; text-align: center; vertical-align: top; padding: 7px; border: 1px solid #202020; border-radius: 12px;">
<div id="desc" name="desc">
<div id="gallery_container">
<table class="hide_product_photo">
<tbody>
<tr>
<td style="width: 80%; vertical-align: top;"> <!--width: 80% of the total Gallery is taken by main image-->
<!---css code here--->
<table class="gallery_large_img_table">
<tbody>
<tr>
<td>
<div class="gallery_main">
<img src="https://i.imgur.com/6h1GdR5.jpg"> <!--non-grid standalone image-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%; vertical-align: top;"> <!--width: 20% of the total Gallery is taken by thumbnails-->
<table>
<tbody>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ZDUmji7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ZDUmji7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/ByPVSkn.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/ByPVSkn.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/dXQjDR7.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/dXQjDR7.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/5SR520h.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/5SR520h.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/3uJiUDq.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/3uJiUDq.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/2dWjFD0.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/2dWjFD0.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/LUCcLCL.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/LUCcLCL.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/q0Y4Cdb.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/q0Y4Cdb.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 50%;">
<div class="gallery_thumbnail">
<img class="gallery_thumbnail_img" style="width: 100%; text-align: center;" src="https://i.imgur.com/8VJF5pE.jpg">
<div class="gallery_main">
<img src="https://i.imgur.com/8VJF5pE.jpg">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
If I got the question right: Actually the thumbnail will not disappear, it will hide under the hovered image because you set hovered image width and height to 100% and it will cover all of the space is available to showing itself!
on this section: (inside the second <style> tag)
#gallery_container .gallery_large_img_table {
width: 100%;
}
#gallery_container .gallery_main {
width: 100%;
height: 100%;
}
#gallery_container .gallery_main img {
max-width: 100%;
max-height: 100%;
}
there are no rooms for other thumbnail images!
so if you change these two attribute to something fewer than 100% you can see them as well but be sure to change the main image width and height too.
you can replace the above section with these styles to solve your issue:
#gallery_container .gallery_large_img_table {
width: 80%;
}
#gallery_container .gallery_main {
width: 80%;
height: 80%;
}
#gallery_container .gallery_main img {
max-width: 80%;
max-height: 80%;
}
I have the requirement as per below image
I tried to this with table, but still no success in aligning the side images.
testTable.html
<style>
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 10%;
overflow: hidden;
}
.center-image{
width: 80%;
}
</style>
<table class="container">
<tr>
<td class="left-image">
<img src="img1.png" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="img2.jpg" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="img3.png" alt="Snow" style="width:100%">
</td>
</tr>
</table>
My requirement:
I want to have center active image, with left and right images blur. side images should look like they are behind the center image
Maybe you can try this code but to make it slide through slides you need to add jQuery to code. Working example here
If you need further help with that blur to side images contact me through email faceree123#gmail.com :)
<div class="slider-wrapper">
<div class="slider-btns">
<button class="slider-btn btn-1 active"></button>
<button class="slider-btn btn-2"></button>
<button class="slider-btn btn-3"></button>
</div>
<div class="slider">
<div class="slide">
<img class="slide-img" src="your-1st-image.src">
<!-- This is not necessary --><p>Slide 1</p>
</div>
<div class="slide">
<img class="slide-img" src="your-2nd-image.src">
<!-- This is not necessary --><p>Slide 2</p>
</div>
<div class="slide">
<img class="slide-img" src="your-3rd-image.src">
<!-- This is not necessary --><p>Slide 3</p>
</div>
</div>
</div>
<style>
*{
margin: 0; padding: 0;
}
.slider-wrapper{
overflow: hidden;
position: relative;
width: 100%; height: 300px; /* You can choose your own width and height */
background: grey; /* This is not necessary */
}
.slider-wrapper > .slider{
position: relative;
width: 300%; height: 100%;
left: 0%;
transition: 1s;
}
.slider-wrapper > .slider-btns{
z-index: 999;
position: absolute;
left: 50%; transform: translateX(-50%);
top: 90%;
}
.slider-wrapper > .slider-btns > button.active{
width: 20px; height: 20px;
border-radius: 50px;
border: none;
}
.slider-wrapper > .slider-btns > .slider-btn{
width: 15px; height: 15px;
border-radius: 50px;
border: none;
}
.slider-wrapper > .slider > .slide{
text-align: center; /* This is not necessary */
float: left;
margin: 0 20px;
width: calc((70% / 3) - 40px); height: 100%;
background: purple; /* This is not necessary */
}
.slider-wrapper > .slider > .slide > .slide-img{
width: 100%; height: auto;
display: none; /* When you use this code delete this line */
}
p{
font-family: Arial; font-size: 40px;
line-height: 300px;
} /* This style is not necessary */
</style>
Your query still not clear to me but I tried my best to understand and answer it.
<table class="container">
<tr>
<td class="left-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://dummyimage.com/600x400/000/fff" alt="Snow" style="width:100%">
</td>
</tr>
</table>
and here is the CSS
.container{
width: 100%;
height: 400px;
}
.left-image, .right-image{
width: 33.33%;
overflow: hidden;
}
.center-image{
width: 33.33%;
}
Below is the result and Fiddle
https://jsfiddle.net/u97oewqy/
Maybe this snippet helps.
border-collapse: collapse; on the .container
set padding: 0; the images.
<style>
.container{
width: 100%;
height: 200px;
border-collapse: collapse;
}
.left-image, .right-image, .center-image {
padding: 0
}
.left-image, .right-image{
width: 10%;
overflow: hidden;
}
.center-image{
width: 80%;
}
</style>
<table class="container">
<tr>
<td class="left-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="center-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
<td class="right-image">
<img src="https://picsum.photos/100/200" alt="Snow" style="width:100%">
</td>
</tr>
</table>
I'm crap with css.
I began building a page with the body set to absolute, and build all elements around this.
When the browser zoom changes, the positioning goes & nothing looks correct (only correct # 100% ).
I changed the body to be relative and re-structed so the main divs that build up the page are running off of the body.
However, it seems I've truly funked this one.
nearly all elelments hide away when updating the body to be relative, even though I understand absolute & relative to work together (parent/child).
ScreenShots:
(Should Look like this (all position absolute))
(The issue I'm trying to resolve. zooming in/out causes the tabs to move up/down (above & below))
(This is when I set body to relative, yes, that's the whole page shot.(below))
css:
body{
position: relative;
margin: 0;
width: 100%;
height: 100%;
//font-family: Arial;
zoom: 100%;
}
#invoiceOptions{
position: absolute;
background-color: #f9dede;
top: 11.9%;
left: 10%;
width: 80%;
height: 33.5%;
border-radius: 10px;
font-size: 15pt;
}
#referals{
position: absolute;
//background-color: #C93939;
top: 11.9%; //11
left: 10%;
width: 80%;
height: 33.5%;
font-size: 15pt;
border-radius: 1%;
}
#orders{
position: absolute;
//background-color: #C93939;
//background-image: url('background.png');
background-repeat: no-repeat;
top:11.9%;
left:10%;
width: 80%;
height: 75%;
border-radius: 1%;
font-size: 15pt;
overflow: scroll;
overflow-x: hidden;
overflow-y: hidden;
}
#orders:hover{
overflow-y: visible;
}
#toolbar{
position: absolute;
background-color: white;
width: 80%;
left: 8%;
height: 20%;
border-radius: 5px;
}
#border1{
position: absolute;
width: 10%;
height: 100%;
background-color: black;
//same for border2, but on right.
}
.tab-links{
position: absolute;
width: 40%;
top: 28.5%;
left: 3%;
background: no-repeat;
border-radius: 20px 20px 0px 0px;
background-color: #dbdbdb;
box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
}
html.
<body>
<div id="toolbar">
<div style="">
<h4 style="position: absolute; top: 5%; left: 15%;">Welcome <?php echo $User[0]; ?>!</h4>
<ul class="tab-links">
<li class="active">Orders <div id='orderCount' style='display: inline;'></div></li>
<li>Referrals <div id='referralCount' style='display: inline;'></div></li>
<li>Options</li>
</ul>
<div style="">
<a href="https://XXXXXXXX.com/mysagepay/" target="_blank">
<IMG style="position: absolute; border-radius: 5%; left: 60%;" border=0 alt=SagePay src="https://live.sagepay.com/mysagepay/images/sagepay_logo.png" width=136 height=50>
</a>
<A href="https://www.businessexpress-uk.com/" target="_blank">
<IMG style="position: absolute; border-radius: 5%; left: 70%;" border=0 alt=SagePay src="https://XXXX.com/Content/images/logo.png" width=140 height=50>
</A>
<A href="http://XXXXX.co.uk/support/staff/" target="_blank">
<IMG style="position: absolute; border-radius: 5%; left: 80%;" border=0 alt=Fusion src="http://XXXXX.co.uk/support/__swift/themes/__cp/images/fusion.gif" width=200 height=50>
</A>
</div>
</div>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="orders">
<div class="CSSTableGenerator">
<table width="100%" class='table'>
<thead>
<tr>
<td><b>Customer</b></td>
<td><b>Company</b></td>
<td>User ID</td>
<td><b>Time</b>
</tr>
</thead>
<tbody id="orderBody">
</tbody>
</table>
<div id="orderHolder"></div>
</div>
</div>
<div id="print">
<img src="print.png" title="Print All Invoices"/>
</div>
</div>
<div id="tab2" class="tab">
<div id="referals">
<div class="CSSTableGenerator">
<table width='100%' class='table'>
<thead>
<tr>
<td><b>Account</b></td>
<td><b>Customer</b></td>
<td><b>Referral ID</b></td>
<td><b>UUID</b></td>
<td><b>Time</b></td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div id="hold"></div>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div id="invoiceOptions">
<div id="DisplayOptions">
<fieldset style="width: 100%;">
</fieldset>
</div>
</div>
</div>
</div>
<div id='border1'></div>
<div id='border2'></div>
</body>
Notes.
I'm using ajax to populate a web-gen table. I've excluded the table css for now, however comment if required & I will include
update.
I've included tab-links into the css. this is the css for the holder of the tab buttons (grey). The tab buttons themselves are floated left.
the table contents, is a styleless div contaings the 3 tab option contents (referral, order & options).
I'm trying to layout some content (an icon on the left, heading and text on the right) on top of an image which sits within an expanding div. I'm mainly doing this to see if it can be done but would be nice if I can make it functional. I stitched the functionality together from a couple of tutorials but can't find anything online on how to finish it off.
I'm struggling to layout the div on top of the wave image.
kind of see it working here
I've laid it out in a table so you can see roughly how I need it, I'm guessing I need to float to lay the divs out but can't get it to work. any help would be most appreciated.
<style type="text/css">
#container {
position: absolute;
bottom: 0;
left: 0;
}
.grow {
height: 200px;
width: 499px;
float: left;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
background-image: url(images/passmembers/test/sunset.jpg);
}
.grow:hover {
height: 300px;
}
</style>
<body>
<div class="grow" );>
<div id="container">
<img src="images/passmembers/test/wave.png">
<div style="position: absolute; bottom: 0; left: 0; margin: 0px; text-align: center; color: #FFF; font-family: Arial, Helvetica, sans-serif;">
<table width="499px">
<tr>
<td width="239" align="left" valign="bottom">
<img src="images/passmembers/test/icon.png" width="75" height="75">
</td>
<td width="248">
<p><strong>Hot Deals</strong></p>
<p>Hot Deals, Hot DealsHot Deals, Hot DealsHot Deals, Hot Deals</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="clear: left;"></div>
</body>
I guess you solved the problem by your own.
Here's the JSFiddle: http://jsfiddle.net/D4J9H/7/
When using the JSFiddle, there's a textfield for the HTML content, a textfield for the CSS and a textfield for the Javascript code. You wrote everything in the CSS textfield, that's why the result wasn't what you expected.
HTML:
<div class="grow" style="position:relative;">
<div id="container">
<img src="http://i128.photobucket.com/albums/p195/R3DG3CKO/wave.png">
<div style="position: absolute; bottom: 0; left: 0; margin: 0px; text-align: center; color: #FFF; font-family: Arial, Helvetica, sans-serif;">
<table width="499px">
<tr>
<td width="239" align="left" valign="bottom">
<img src="http://i128.photobucket.com/albums/p195/R3DG3CKO/icon.png" width="75" height="75">
</td>
<td width="248">
<p><strong>Hot Deals</strong>
</p>
<p>Hot Deals, Hot DealsHot Deals, Hot DealsHot Deals, Hot Deals</p>
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="clear: left;"></div>
CSS:
#container {
position: absolute;
bottom: 0;
left: 0;
}
.grow {
height: 200px;
width: 499px;
float: left;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
background-image: url(http://i128.photobucket.com/albums/p195/R3DG3CKO/sunset.jpg);
}
.grow:hover {
height: 300px;
}
So I just want to say sorry for messy code, I have tried vigorously with this. Basically I want there to be 3 images side by side which I will later make clickable, and a gray background behind them. Then I want to be able to include text below the images. Any help?
HTML
Premium Store
<table id="table1" >
<tr id="imgs">
<div id="tablet">
<table border="0";>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/></td>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/></td>
<td><img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro-> </icons8-metro->style/128/Business-Shop-icon.png"/></td>
</div>
</tr>
<td>
Contact a representative!
</td>
<td>
Deliver to your house!
</td>
<td>
Locate a store!
</td>
</table>
CSS
#backgroundH
{
width: 100%;
height: 50px;
background-color: #dddddd;
position: absolute;
}
#header
{
top: -50px;
color: black;
font-family: "Courier New";
text-align: center;
}
body
{
background-color: #cccccc;
}
#table1
{
width: 500px;
height: 200px;
background-color: #d9d9d9;
position: fixed;
margin-left: -250px;
margin-top: -100px;
top:50%;
left:50%;
}
td
{
width: 10px;
height: 450px;
position: relative;
margin-left: -5px;
margin-top: -225px;
top: 35%;
left: 3%;
}
Also please include what I did wrong! I am having a hard time understanding positioning, in-specific how to add a neat setup. (If somebody could skype with me I have some questions.. :P skype-ikorey1)
Thank you all for the help and reading. I really do appreciate all the feedback.
<html lang="en">
<head>
<style type="text/css">
.img-with-text { float: left; text-align: center}
</style>
</head>
<body>
<div class="container">
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email Carl Call </p>
</div>
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email Sjon Gentry</p>
</div>
<div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
<p>Anup<br />9096969903<br />Email John Mabery </p>
</div>
</div>
<!-- End of your code -->
<p style="clear: both">Something more here </p>
There is a special way of making that type of arrangement (image with caption).
And this would be my way of doing what you need:
HTML
<div id="container">
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
<figure>
<img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro-> </icons8-metro->style/128/Business-Shop-icon.png"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
</div>
CSS
#container{
background:#ccc;
}
#container figure{
float:left
}
How about this..
<table id="table1">
<tr id="imgs">
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" />
<p class="content">
Contact a representative!
</p>
</td>
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" />
<p class="content">
Deliver to your house!
</p>
</td>
<td>
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Shop-icon.png" />
<p class="content">
Locate a store!
</p>
</td>
</tr>
</table>
and css
body {
background-color: #cccccc;
}
#table1 {
width: 500px;
height: 200px;
background-color: #d9d9d9;
position: fixed;
margin-left: -250px;
margin-top: -100px;
top: 50%;
left: 50%;
}
tr {
width: 10px;
height: 450px;
position: relative;
margin-left: -5px;
margin-top: -225px;
top: 35%;
left: 3%;
}
td.content {
position: absolute;
}
and for position details are explained clearly in w3schools
which will helps us alot.