I have set up a simple table on my website - I used HTML code for the table - but I cannot figure out why the padding isn't working - I am using CSS and JS for the modal (I am a beginner). I even set the padding to 1000 and it doesn't do anything - the images stay right next to eachother. Here is my code:
<table width="500" border="0" cellpadding="5">
<tr>
<td align="center" valign="center">
<img id="myImg" src="table/first time home buyer.jpg" alt="First Time Home Buyer Ontario" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<br />
<b>First Time Home Buyer Program<b>
</td>
<td align="center" valign="center">
<img id="myImg" src="table/renewing your mortgage.jpg" alt="Renewing Your Mortgage" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<br />
<b>Renewing Your Mortgage<b>
</td>
<td align="center" valign="center">
<img id="myImg" src="table/guide to getting a mortgage.jpg" alt="Guide to Getting a Mortgage in London Ontario" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<br />
<b>Guide to Getting a Mortgage<b>
</td>
</tr>
</table>
If anyone could offer any suggestions it would be much appreciated.
Thank you
For table you can't give padding., for 'div' and other element such as "P, span" you can give padding. For table use cellpadding. (If you want to see just put border value as 1 then you can see padding with border.)
I would suggest you to set margin for the table rather than padding and i hope that it might work...
Yes use margin rather than padding and visit this site to know more about them:
http://www.htmldog.com/references/css/properties/padding/
Related
I have a grid menu with specific css styling, and I want to convert that grid to a table so i can use jquery datatable, but i didn't know how
here is an item of my grid :
<div class="row menu-filter-items">
<div class="col-md-4 margin-b-30 menu-item">
<a href="#" class="menu-grid">
<img src="images/restolist.png" alt="" class="img-fluid"/>
<div class="menu-grid-desc">
<!-- <span class="price float-right">$9.50</span> -->
<h4 class="a" id="title">BB</h4>
<p>
Description
</p>
</div>
</a>
</div>
what would it be as an element of a <td> in a table ?
DataTables can integrate seamlessly with Bootstrap 3 using Bootstrap's table styling options to present an interface with a uniform design, based on Bootstrap.
This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will set the defaults needed for DataTables to be initialized as normal.
Source: datatables.net
Example of Provided Code has Bootstrap Table
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Table Use Sample -->
<div class="container">
<table class="table">
<tr>
<td>
<a href="#">
<img src="http://via.placeholder.com/140x100" alt="" class="img-fluid"/>
</a>
</td>
</tr>
<tr>
<td>
<h4>BB</h4>
</td>
</tr>
<tr>
<td>
<p>
Description
</p>
</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Wasn't sure how exactly you wanted the table formatted from the code you provided, but you get the idea.
Hope that helps.
I am trying to create an application using bootstrap and angularjs as practice and a simplified version of my application is illustrated in this pen: http://codepen.io/megadeen/pen/ZWrGmv
This is the main code:
<table class="main" ng-app="app" ng-controller="main">
<tr>
<td class="sidebar">
<!-- Set page using AngularJS -->
<a ng-click="page = 'fpage'">First Page</a>
<br>
<a ng-click="page = 'spage'">Second Page</a>
</td>
<td class="content">
<!-- First Page -->
<div class="fpage" ng-show="page == 'fpage'">
<div class="col-md-5">
.... Content ....
</div>
</div>
</div>
<!-- Second Page -->
<div class="spage" ng-show="page == 'spage'">
<div class="row">
<div class="col-md-7">
.... Content ....
</div>
</div>
</td>
</tr>
</table>
However, there's always this stray horizontal scrollbar that won't go away. This stray scrollbar only appears in the second and subsequent pages.
I tried adding the row class to the fpage and spage divs. However, if I do so, then the scrollbar appears in all pages.
Why does this happen and how do I correct this problem?
You should use col-md-12 instead of row.
I am trying to get the slider to work here and think I have the code but something isn't working right. It is only showing the image in the CSS and not rotating through the other ones.
Script in Header:
var images=new Array('/images/home/AC-InStock-Rotating.jpg', '/images/home/AC- MXV-Rotating.jpg', '/images/home/AC-Rental-Rotating.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.home-middle-part')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
Body:
<div class="home-middle-part">
<div class="container clearfix">
<div class="grid_12 omega" >
<div class="grid_6 omega" >
<div style="padding-left: 10px;">
</div>
</div> <!-- end of grid 6-->
<div class="grid_6 omega" >
<div>
<table>
</table>
</div>
</div> <!-- end of grid 6-->
</div> <!-- end of grid 12 -->
</div> <!-- end of container clearfix -->
</div> <!-- end of home-middle-part -->
CSS
.home-middle-part {
background-image: url("/images/home/body-image banner1.jpg");
background-repeat: no-repeat;
}
You script in the header is running before the browser knows that .home-middle-part exists. You need doSlideshow(); to run after the HTML has been parsed. You can do this by moving your script tag the bottom of the page or you can wrap your call to doSlideshow() in $(document).ready() like so:
$(document).ready(function() {
doSlideshow();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="nav.css">
<link rel="stylesheet" href="layout.css">
<title>Grateful Papers: Home</title>
</head>
<body>
<!//-- Navbar -- Start -- Navbar -- Start --Navbar -- Start --Navbar -- Start --Navbar -- Start --Navbar -- Start -->
<table id="top_ta">
<tr id="top_tr">
<td id="logo">
</td>
<td id="menu">
<div id="links">
<h1>
 About Us |
 Shop |
 Home      
               
</h1>
</div>
</td>
</tr>
</table>
<!//-- Navbar -- End -- Navbar -- Ende -- Navbar -- Ende -- Navbar -- Ende -- Navbar -- Ende -- Navbar -- Ende -- Navbar -->
<!//-------------------- Body -------------------- Start -------------------- Body -------------------- Start -->
<div id="content_1">
<br>
<div id="content_image_1">
<img src="./img/product/productt.jpg">
<img src="./img/product/productg.jpg" ></a>
<img src="./img/product/productcomingsoon.jpg">
<img src="./img/product/productcomingsoon.jpg">
<img src="./img/product/productcomingsoon.jpg">
<img src="./img/product/productcomingsoon.jpg">
</div>
<table id="content_text_1">
<tr>
<td>
<center>
<h3>T</h3>
Our very own line.
</center>
</td>
</tr>
</table>
</div>
<div id="content_2">
<br>
<div id="content_image_2">
<img src="./img/product/productc.jpg">
<img src="./img/product/productk.jpg">
<img src="./img/product/products.jpg">
<img src="./img/product/productcomingsoon.jpg">
<img src="./img/product/productcomingsoon.jpg">
<img src="./img/product/productcomingsoon.jpg">
</div>
<table id="content_text_2">
<tr>
<td>
<center>
<h3>Brands</h3>
Other.
</center>
</td>
</tr>
</table>
</div>
<div id="content_3">
<br>
<div id="content_image_3">
<img src="./img/buttons/paypal3.png">
<img src="./img/buttons/paypallock.png">
<img src="./img/buttons/paypal2.png">
<img src="./img/buttons/paypal.png">
</div>
<table id="content_text_3">
<tr>
<td>
<center>
<h3>About Us</h3>
happen.
<br><br>
We use.
<br> <br> <br> <br>
</center>
</td>
</tr>
</table>
</div>
<!//-------------------- Body -------------------- Ende -------------------- Body -------------------- Ende -->
</body>
</html>
I am trying to make the code below work.
<img src="./img/product/productt.jpg">
For some reason it doesn't create the link. I double check all the code.
I've had a few others double check all the code, to make sure i wasn't missing anything.
They say it is fine.
I deleted the file, and saved it again. I don't know the link isn't work.
Everything else works fine, and the navbar (shop,home,about us) works fine.
Any suggestions?
(also i did uploaded it to the server and doesn't work on there)
Sorry this is so stupid of a question, but if anyone can spot something let me know. I would be grateful!
<a href="shop">
should be
<a href="shop.html">
If the hyperlink that is not working is the first one after the body comment, I can help.
The line reads like this: ....
When you click on this link, the webpage will try to find a file called shop in the same directory as the webpage. This file it is looking for would have no file extension.
I am assuming the file you are looking for is called shop.html, which is in the same directory as the current webpage.
Your code should read: ....
I hope this helps!
I am trying to put two banners on top of a navigation bar with everything nicely centered. I can get the two banners to nicely sit by one another but when I make the browser window smaller the first banner goes on top of the second!
Is there a code where I can prevent this? If so please let me know.
This is what I have so far:
<center>
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
<BR>
You can set a min-width on the container of the banners.
Edit based on your comment:
<center> <!-- *shudder* -->
<div style="min-width: 860px;"> <!-- inline only for example purposes -->
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
</div> <!-- ditch the BR -->
...
</center>