I have a text and table within another table td tag. That inner table has to be aligned to the top-right corner of the outer table. But in my case,the inner table is aligned to right but not top. There is an unnecessary space between text and inner table.
Any suggestions please?
Here is my code....
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
body{color:#000000; font-family:Arial,Tahoma,helvetica,sans-serif; font-size:9pt;}
table{ font-family:Arial,Tahoma,helvetica,sans-serif; font-size:9pt;}
tr{ font-family:Arila,Tahoma,helvetica,sans-serif; font-size:9pt;}
.header{background:#D2E5FB; font-family:Arial,Tahoma,helvetica,sans-serif; color:#000000;
padding: 1 1 1 1; border-bottom:1px solid #AEAEAE; border-right:1px solid #AEAEAE;
}
.tableRow{background:#FFFFFF;border-bottom:1px solid #AEAEAE; border-right:1px solid #AEAEAE;padding:3 5 3 0;}
.matches{font-family:Arila,Tahoma,helvetica,sans-serif; font-size:9pt;padding:8 0 8 2;}.ResultTr{}
</style>
<body>
<table style="border:1px solid red;" width="100%" cellpadding="0" cellspacing="2" >
<tr><td class = "matches" colspan=" 7">
<nobr>
<b>Number of Matching Addresses: 165 , Page Numbers</b>
<style>
#Paginator{float:right;margin:0px;}<p>
#Paginator ul{ margin:0px;padding:0px;}
#Paginator ul li{ font-family::Arial,Tahoma,helvetica,sans-serif;font-size:9pt;list-style:none;
float:left;margin:2px;
padding:4px 8px 2px 8px;border:1px solid black; cursor:pointer; }
#Paginator ul li,#PrevPage{display:none;}
</style>
<script>
var ga_pageId = new Array();
function pageNavigate()
{
if(document.getElementById("FromPage"))
{ var fromPage = parseInt( document.getElementById("FromPage").value); }
if(document.getElementById("ToPage"))
{ var toPage = parseInt( document.getElementById("ToPage").value); }
if(fromPage == 1)
{ document.getElementById("PrevPage").style.display="none";}
else
{ document.getElementById("PrevPage").style.display="inline"; }
if(toPage == 4 )
{ document.getElementById("NextPage").style.display="none"; }
else{ document.getElementById("NextPage").style.display="inline"; }
for(var j=0;j<ga_pageId.length;j++)
{
if(document.getElementById(ga_pageId[j]))
{document.getElementById(ga_pageId[j]).style.display="none"}
}
for(var i=fromPage;i<=toPage; i++)
{
var pageId = 'PAGE_'+i;
if(document.getElementById(pageId))
document.getElementById(pageId).style.display="inline"; }
}
function previousPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) - 1;toPageEle.value = parseInt(toPageEle.value) - 1;pageNavigate();}}
function nextPage(){var fromPageEle = document.getElementById("FromPage");
var toPageEle = document.getElementById("ToPage");
if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) + 1;toPageEle.value = parseInt(toPageEle.value) + 1; pageNavigate();}}
function pageOver(lv_this){
if (lv_this.selected!='X')
{ lv_this.style.backgroundColor = "#F7F7F7"; }
}
function pageOut(lv_this)
{
if (lv_this.selected!='X')
{ lv_this.style.backgroundColor = "#FFF"; }
}
</script>
<table id="Paginator" style="border:1px solid blue;"><tr><td > <input type="hidden" id="FromPage" value="1"/>
<input type="hidden" id="ToPage" value="4"/> <ul>
<li onClick="previousPage()" id="PrevPage">Prev</li><script> ga_pageId.push('PAGE_1');</script>
<li id="PAGE_1" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)"> 1 </li>
<li id="PAGE_2" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)"> 2 </li>
<li id="PAGE_3" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)">3</li>
<li id="PAGE_4" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)">4</li>
<li onClick="nextPage()" id="NextPage" style="display:none">Next</li>
</ul>
</td> </tr>
</table>
<script> pageNavigate()</script>
</nobr>
</td>
</tr>
</table>
</body>
</html>
Its better if you use Div tag rather then table.
Use like this
<Div style="float:left;width:20%"></Div>
<Div style="float:left;width:80%"></Div>
Write your desire code inside the div and give width according to your requirement.
If you are designing a form which contain large amout of content then use table.
The quickest fix is probably to modify the styling of the text by making it float to the left, by adding a style attribute to the b tag:
<b style="float: left">Number of Matching Addresses: 165 , Page Numbers</b>
The reason is that the outer table cell contains both this text and an inner table, and the letter is rendered as a block. This means that it starts on a new line. By using floating, you make the text appear to the left of the inner table if it fits there.
A better and more robust approach would be a redesign that uses just one table with two cells in a row. But the context might be more complicated so that such a simple rewrite would not be possible.
Related
I am trying to create a tree with a three elements. Main Element, -> children, -> children.
I got pretty far, I can even collaps entire portions of the table. The problem however is, when I collabs row two.
At first, the table looks like this:
Which is fine. I have three <td> in one row.
However, if I show the second row (clicking on my blue arrow),
this is the result:
So, what happens is that the second <tr> then pushes the elements of the second <td> so much forward, that "SubKategorie_1 DELETE" has enough room to fit before "Hauptkategorie_1" begins, which is in a different table row.
I am pretty sure that all I need is a css attribute.
Ill give you the code shortend:
<table class="mainTable">
#{
var position = 0;
for (int i = 0; i < Model.MainNodes.Count(); i++)
{
string catId = "CatId" + i.ToString();
string classToHideCatId = "classToHideCatId" + i.ToString();
<tr class="mainCatRow">
<td>
<div>
<img src="#Url.Content("~/Content/images/icons/icon-open.png")" id="#catId" class="buttonLayoutMain" />
</div>
</td>
<td>
<div class="mainCat">
#Model.MainNodes[i].name
</div>
<td>
Delete
</td>
</tr>
<!--subcategory-->
<tr class="tr2">
<td>
<div class="#classToHideCatId">
<table class="subTable">
...
</table>
</div>
</td>
</tr>
}
}
</table>
With some basic CSS:
.MainDiv{
padding: 20px;
}
.mainTable{
background-color: green;
}
.mainCat {
font-size: 20px;
}
.mainCatRow{
background-color:orange;
}
.subCat {
margin-left: 40px;
font-size: 18px;
}
.tr2{
background-color:gray;
}
.subsubTable {
margin-left: 80px;
}
Question:
How can I make my table have differnt lenght rows?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.css">
<style>
#demo{
background-color:purple;
color: white;
width: 100%;
}
#home{
width: 45px;
}
#back{
width: 25px;
}
#header{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="info_table" class="table">
<tr>
<td id="header">
<p align="center"><span style="float: left"><img src="back.png" id="back"></span><b>মন্ত্রণালয়</b><span style="float: right"><img src="home.png" id="home"></span><span style="float: right"><img src="refresh.png" id="refresh"></span></p>
</td>
</tr>
<tr>
<td id="demo" align="center"><td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
var bn_num = new Array('০','১','২','৩','৪','৫','৬','৭','৮','৯');
function bn_num_convert(num){
//console.log(num.length);
var bn_val = '';
for(i=0;i<num.length;i++){
//console.log(num[i] + '/' + bn_num[num[i]]);
bn_val = bn_val + bn_num[num[i]];
}
//console.log(bn_val);
return bn_val;
}
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
document.getElementById("demo").innerHTML ='মোট মন্ত্রণালয় ('+bn_num_convert(count.toString())+')';
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
[This is the corresponding output of the code.][1]
});
$('#info_table').append(info);
});
</script>
Firstly here purple background color doesn't get the full wide.if i inspect the background there shows an empty td which cause the problem.if i delete the empty td then i get perfect result.but there is no empty td in my code.plz see the code and show me the error.
Secondly there is no horizontal line at the end of the output result.why last line doesn't get horizontal line?
You are not closing the td, thats why empty td is appending.
<td id="demo" align="center"></td>
Close the td like in above code
and remove margin and padding as other posts suggested in case if you want full width till ends.
Set body margin paddding to 0px
body {
padding: 0px;
margin: 0px;
}
Just put in demo id td, it will show.
See thishttps://jsfiddle.net/v6mwpz89/3/
Cheers!
So I was adding the blinking text widget in the sidebar of my website.
I am using the following code to do it,
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Blink Text using JavaScript</title></style>
<script language="javascript">
setInterval(blinktext, 500);
var txt = "";
var count = 0;
function blinktext() {
var cntrl = document.getElementById("txtblinkingtext");
if (count == 0)
txt = cntrl.value;
if (count % 2 == 0)
cntrl.value = "";
else
cntrl.value = txt;
count++;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin: auto; text-align: center;">
<input type="text" id="txtblinkingtext" name="txtblinkingtext" value="NEWS STREAM"
readonly="readonly" style="height: 20px; width: 300px; background-color: #E64946;
color: White; border: 0px none; text-align: center;">
</div>
</form>
</body>
</html>
I just wanted to know how to use Bold or Strong method on "NEWS STREAM" text value
You have a </style> tag hanging, remove it.
In your input style, add font-weight:bold. But, you'd rather have a CSS file with that rather than style in the HTML like this, it's not too pretty.
I am looking for code to replace a specific image with one chosen from a list of potential images.
I have a list of images which I plan to have the images (or their label) clickable, and on that click I want to have one of the four images at the top of the page to change in to the clicked image. (Sorry for the run on sentence, I am really bad at explaining things.)
Let me know if I can provide any further information to clarify. Thanks in advance!
PS Here is the code I have so far:
<html>
<head>
<style type="text/css">
.row { vertical-align: top; height:auto !important; }
.list {display:none; }
.show {display: none; }
.hide:target + .show {display: inline; }
.hide:target {display: none; }
.hide:target ~ .list {display:inline; }
#media print { .hide, .show { display: none; } }
</style>
<script type="text/javascript">
function Down(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(300) + 'px';}
function Up(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
sender.style.width=(150) + 'px';}
</script>
<style>
a:link {color: #003300; font-weight: bold; font-size:18;}
a:visited {color: #003300; font-weight: bold; font-size:18;}
a:hover {color: #00FF00; font-weight: bold; font-size:18;}
a:active {color: #00CC00; font-weight: bold; font-size:18;}
table {width:99%; border: 2px solid black; background-color:white;}
td {border: 0px solid #ccc; vertical-align:center;}
img {border:2px solid #000; width:150px;}
#select1, #select2, #select3, #select4 {border:2px solid #000; width:300px;}
#name {text-align:right;}
#pic {text-align:left;}
</style>
</head>
<body>
<font size="5"><center><b>Here are the seed beads I currently have available. Click and hold an image to see a larger image.</b></center></font>
<table>
<tr>
<td>
<center><img id="select1" src="img/selectedIMG.jpg"/></center>
</td>
<td>
<center><img id="select2" src="img/selectedIMG2.jpg"/></center>
</td>
</tr>
</table><br>
<div class="Toho Seed Beads Size 15">
Toho Seed Beads Size 15 (+)
Toho Seed Beads Size 15 (-)
<div class="list">
<ul type="none">
<li>
<table>
<tr>
<td id="name">Silver Lined<br>Crystal Clear<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_SilverLinedCrystalClear.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Transparent<br>Deep Sky Blue<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_TransparentDeepSkyBlue.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Ceylon<br>Light Rose<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_CeylonLightRose.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
<td id="name">Opaque<br>Black<br>Size 15</td>
<td id="pic"><img src="img/Toho_s15_OpaqueBlack.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
</tr>
<tr><td colspan="8"><center>(Close)</center/></td></tr>
</table>
</li>
</ul>
</div>
</div>
</body>
</html>
Perhaps this example will be helpful? I see that you've tagged the question with HTML and CSS, but the best solution will involve JavaScript as well. You can see that inside the <script> tag below.
<!DOCTYPE html>
<html>
<head>
<!-- I prefer using jQuery. If you don't use it, it makes life easier :) -->
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<!-- this is wherever your images are actually displayed... -->
<img id="changing-images" src="first_image.png">
<!-- and this is whatever triggers the action. Note the IDs on these -->
<input type="button" id="changing-button" value="Change picture">
</body>
<script>
$(document).ready(function(){
image_names = ["first_image.png", "second_image.png", "third_image.png"];
number_of_images = image_names.length;
current_index = 0;
$("#changing-button").click(function(){
// take the mod so that we cycle around the array
current_index = (current_index+1)%number_of_images;
// catch the ID of the image area; update its "src" attribute
$("#changing-images").attr("src",image_names[current_index]);
});
});
</script>
</html>
$("a").on("click", function(e){
e.preventDefault();
var newImg = $(this).attr("href");
$(".foo").attr("src", newImg);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
image 1
image 2
image 3
</p>
<p>
<img class="foo" src="http://lorempixel.com/200/200/">
</p>
I have a table of one row with two columns.I want to align content of second column to right...My content is not aligned to right..Can you check that what is wrong there.......
Here is my code....
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css"> <style>
table td{
border:1px solid green;
}
#Paginator ul{ margin:0px;padding:0px;}
#Paginator ul li{ font-family::Arial,Tahoma,helvetica,sans-serif;font-size:9pt;list-style:none;float:left;margin:2px;padding:4px 8px 2px 8px;border:1px solid black;cursor:pointer;}
#Paginator ul li,#PrevPage{display:none;}
</style>
<body>
<table style="border:1px solid red;width:100%"><tr>
<td>
<b style="float:left;">Number of Matching Addresses: 49  Number of pages: 5</b>
</td>
<td align="right">
<script>
var ga_pageId = new Array();
function pageNavigate(){if(document.getElementById("FromPage")){ var fromPage = parseInt( document.getElementById("FromPage").value);} if(document.getElementById("ToPage")){var toPage = parseInt( document.getElementById("ToPage").value);}if(fromPage == 1){document.getElementById("PrevPage").style.display="none";} else{ document.getElementById("PrevPage").style.display="inline"; }if(toPage == 5 || toPage<5){document.getElementById("NextPage").style.display="none";}else{ document.getElementById("NextPage").style.display="inline"; }for(var j=0;j<ga_pageId.length;j++){if(document.getElementById(ga_pageId[j])){document.getElementById(ga_pageId[j]).style.display="none"}}for(var i=fromPage;i<=toPage; i++){ var pageId = 'PAGE_'+i;if(document.getElementById(pageId))document.getElementById(pageId).style.display="inline"; }}
function previousPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) - 1;toPageEle.value = parseInt(toPageEle.value) - 1;pageNavigate();}}
function nextPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) + 1;toPageEle.value = parseInt(toPageEle.value) + 1; pageNavigate();}}
function pageOver(lv_this){if(lv_this.selected!='X')lv_this.style.backgroundColor = "#52CFCF";}
function pageOut(lv_this){if(lv_this.selected!='X')lv_this.style.backgroundColor = "#E6EFFA";}
</script>
<div id="Paginator">
<input type="hidden" id="FromPage" value="1"/>
<input type="hidden" id="ToPage" value="5 "/>
<ul >
<li onClick="previousPage()" id="PrevPage"><span>PREV</span></li>
<script> ga_pageId.push('PAGE_1');</script>
<li id="PAGE_1">1 </span></li>
<script> ga_pageId.push('PAGE_2');</script>
<li id="PAGE_2" >2 </span></li>
<script> ga_pageId.push('PAGE_3');</script>
<li id="PAGE_3" >3 </span></li><script> ga_pageId.push('PAGE_4');</script>
<li id="PAGE_4">4 </span></li>
<script> ga_pageId.push('PAGE_5');</script>
<li id="PAGE_5">5 </span>
</li>
<li onClick="nextPage()" id="NextPage" style="display:none"><span>NEXT</span></li>
</ul> </div>
<script> pageNavigate()</script>
</td>
</tr>
</table>
</body></html>
Add this css:
#Paginator ul{ margin:0px;padding:0px; float:right;}
You already have answer in your previous <TD> Tag style="float:left;".
Why you are not using same for 2nd <TD>?
You can use the Following options
1. <td style="float:right;">
2. <div id="Paginator" style="float:right;" >
3. #Paginator ul{ margin:0px;padding:0px; float:right;}
Because your content is wrapped in a div. The div expands to the size of the td and the content in it is aligned left. Add text-align: right to the Paginator ul li style.