html - Can't change the width of table <TD> -


the blue table data entry won't reside width. there new html5 way able achieve feat? row should same width photo above it.

  <div class="template" style="text-align:center">      <table  width="100%" , height="100%" border=0 cellspacing=0 cellpadding=0 align="center">  		<tr>  			<td width='100%' height='100%' bgcolor='#f2f3f4'>  				<div style="text-align: center;">  						<img src ="https://image.ibb.co/i4ykzk/roverlogo.png" alt="roverlogo">  				</div>  			</td>  		</tr>  	  <!-- background photo   -->    	<table width="80%" border="0" cellpadding="0" cellspacing="0" align="center">  	<tr>    	    <td width="997" height="326"           background="https://image.ibb.co/do1hfq/dog3edit.jpg" style="background-          image:url(https://image.ibb.co/do1hfq/dog3edit.jpg); background-repeat:           no-repeat;">    	   <!-- <b>welcome rover! </b> -->  	   <font class="titletext" color="white" align="center" style="width: 800px;  	   font-size: 50px;"><b>welcome rover!</b></font><br><br>   	   <font class="subtitletext" color="white" align="center" style="width:          100px;  	   font-size: 30px;">ready started?</font><br><br><br>  	  	   <a href="#"><img src="https://image.ibb.co/nvbilq/button.png"          alt="button" border="0"></a>  	  	  </td>    	</tr>  	<tr>  	    <td width="80%" bgcolor="#blue" style="width:80%">  	    </td>  	</tr>  	</table>      </table>      </div>

article {    width: 100%;  }    #banner {    background: url("https://image.ibb.co/do1hfq/dog3edit.jpg") no-repeat no-repeat;    padding: 25px 0;  }    h1 {    font-size: 50px;    margin-bottom: 0;  }    h1, p {    color: white;    width: 100%;    text-align: center;  }    p {    font-size: 30px;  }    button {    width: 200px;    background: #00c55c;    border: none;    padding: 12px 24px;    color: white;    font-size: 24px;    border-radius: 6px;    display: block;    margin: 0 auto;    clear: both;  }    #logo {    background: #f2f3f4;  }    #logo img {    display: block;    margin: 0 auto;    clear: both;  }
<article>            <section id="logo">         <img src ="https://image.ibb.co/i4ykzk/roverlogo.png" alt="roverlogo">      </section>	               <section id="banner">                <h1>welcome rover!</h1>        <p>ready started?</p>        <button>search sitters</button>            </section>        </article>

i'd this. no table layout. if has inline, put <style></style> tag above html block.


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more