html - How to make this table created with <div> tag responsive? -
the table shown in picture created using <div> tag. used <div> tag because placing information in table undesirable. although have tried create exact same table using <table> tag remain unsuccessful.
the picture of table
for table, below code:
@charset "utf-8"; /* global styles */ body { color: #575c7a; line-height: 1.5em; font-family: arial; font-size: 14px; background: #515673 url(../images/background_gradient.jpg) repeat-x 0px 0px; } .page { max-width: 980px; margin: 0px auto; position: relative; background-color: #fff; } { color: #de9000; } a:hover { color: #009eff; } a.cta { text-transform: uppercase; font-size: .9em; font-weight: bold; text-decoration: none; margin: .5em 0 0 0; padding: 0px 12px 0px 0px; background: url(../images/cta_arrow.png) no-repeat right 0px; } a.cta:hover { background-position: right -50px; } nav { color: #f5a06e; text-transform: uppercase; text-decoration: none; display: inline-block; font-weight: bold; font-size: .9em; } nav a:hover { color: #fff; } footer { font-size: .85em; color: #9ba0bd; background-color: #515673; padding: 10px 10px 10px 0px; } /* class placing images inside cell of table created using <div> tag */ .image { width:240px; /*width of image*/ height:120px; /*height of image*/ margin:0; /* if want no margin */ background-repeat: no-repeat; padding:0; /*if want no padding */ float: right; } .image.one { background-image: url(../images/kashmir-vaishnadevi.jpg) ; } .image.two { background-image: url(../images/kashmir-amritsar.jpg) ; } .image.three { background-image: url(../images/leh-ladakh.jpg); } .image.four { background-image: url(../images/haridwar-agra.jpg); } .image.five { background-image: url(../images/shimla-manali.jpg); } .image.six { background-image: url(../images/rajasthan.jpg); } .clear-fix { clear: both; line-height: 1px; } /* ***upto part of file "screen_styles.css"*** */ /* ***below part of file "screen_layout_large.css"*** */ @charset "utf-8"; /* layout (global rules sizes) */ body { margin: 0px; padding: 0px; } header a.logo { display: block; position: absolute; background-position: 0px 0px; background-repeat: no-repeat; } nav { width: 100%; display: block; position: absolute; background-color: #a6430a; } /* layout large screens (default older browsers) */ nav { top: 275px; } nav { margin: 12px 0px 10px 20px; } article { padding: 60px 20px 10px 20px; } /* created class determine position of table in page because table created <div> tag instead of <table> tag */ .table_container { width: 80%; padding-left: 80px; } /* table created using <div></div> tag */ <style type="text/css"> .table { display: table; } .title { display: table-caption; text-align: center; font-weight: bold; font-size: larger; text-decoration: underline; color: #a6430a; } .heading { display: table-row; font-weight: bold; text-align: center; } .row { display: table-row; } .cell { display: table-cell; border: none; /* border-width: thin; */ padding-left: 5px; padding-right: 5px; text-align: right; } a.cta { text-transform: uppercase; font-size: .9em; font-weight: bold; text-decoration: none; margin: .5em 0 0 0; padding: 0px 12px 0px 0px; background: #a6430a; } </style> /* table created using <div></div> tag - end */ @media screen , (max-width: 990px) { footer { padding-left: 20px; } }<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" /> <title>my-domain.com | travel people</title> <link rel="stylesheet" type="text/css" href="css/screen_styles.css" /> <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" /> <link rel="stylesheet" type="text/css" media="only screen , (min-width:50px) , (max-width:500px)" href="css/screen_layout_small.css"> <link rel="stylesheet" type="text/css" media="only screen , (min-width:501px) , (max-width:800px)" href="css/screen_layout_medium.css"> <!--[if lt ie 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="page"> <header> <a class="logo" href="index.html"></a> </header> <article> <h1>package tours</h1> <p>lorem ipsum dolor sit amet consectetur adipisicing elit sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">duis aute irure</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <!-- table created using <div> tag --> <div class="table"> <div class="table_container"> <div class="title"> <p>tour packages</p> </div> <div class="heading"> <div class="cell"> <p>kashmir - vaisnodevi</p> </div> <div class="cell"> <p>kashmir - vaisnodevi - amritsar</p> </div> <div class="cell"> <p>leh - ladakh</p> </div> </div> <div class="row"> <div class="cell"> <div class="image one"></div> <p>duration: 13 days<br> total cost: 14,000/-<br> starting date 1: 7th september, 2016<br> starting date 2: 16th september, 2016</p> <p><a class="cta" href="">register here</a></p> </div> <div class="cell"> <div class="image two"></div> <p>duration: 15 days<br> total cost: 15,500/-<br> starting date 1: 7th september, 2016<br> starting date 2: 16th september, 2016</p> <p><a class="cta" href="">register here</a></p> </div> <div class="cell"> <div class="image three"></div> <p>duration: 9 days<br> total cost: 21,000/-<br> starting date 1: announced<br> starting date 2: announced</p> <p><a class="cta" href="">register here</a></p> </div> </div> </div> <div class="table"> <div class="table_container"> <div class="heading"> <div class="cell"> <p>haridwar - mussoorie - delhi - agra</p> </div> <div class="cell"> <p>shimla - kullu - manali</p> </div> <div class="cell"> <p>rajasthan</p> </div> </div> <div class="row"> <div class="cell"> <div class="image four"></div> <p>duration: 11 days<br> total cost: 10,500/-<br> starting date 1: 7th september, 2016<br> starting date 2: 16th september, 2016<br> starting date 3: 22nd december, 2016</p> <p><a class="cta" href="">register here</a></p> </div> <div class="cell"> <div class="image five"></div> <p>duration: 11 days<br> total cost: 11,500/-<br> starting date: 8th september, 2016</p> <p><a class="cta" href="">register here</a></p> </div> <div class="cell"> <div class="image six"></div> <p>duration: 15 days<br> total cost: 15,500/-<br> journey starts: 7th september, 2016<br> starting date 1: 17th september, 2016<br> starting date 2: 18th december, 2016</p> <p><a class="cta" href="">register here</a></p> </div> </div> </div> <div class="clear-fix"></div> <nav> <a href="index.html">home</a> <a href="about.html">about us</a> <a href="services.html">services</a> <a href="contact.html">contact us</a> </nav> <footer> © company </footer> </div> </div> </div> </body> </html>i gave here full codes of 2 css files, namely 'screen_styles.css' , 'screen_layout_large.css' because if wants recreate them understanding, not problem. have 2 more css files medium , small screen devices, think, if problem solved then, 2 files might not give me problem.
i tried create same thing <table> tag, not. desired layout , can't afford change design (looks), if not impossible.
belive me require lot of efforts. , add stuff problem grow.
have tried using bootstrap ? take of time page.
here things apply bootstrap :
http://www.w3schools.com/bootstrap/bootstrap_images.asp http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp
http://www.w3schools.com/w3css/w3css_cards.asp http://www.w3schools.com/w3css/w3css_tables.asp
try things , sure love them
Comments
Post a Comment