I am working on my website, http://www.isaveplus.com and I am having an issue of the table adding some space between each col (td) in it. My goal is to have the columns touching because I want the background color to blend in with each other. The picture below will show you what I meant by the space between them.
Thanks in advance!
<table style="width:inherit; margin-left:-5px; margin-top:-5px; " cellspacing="0">
<tr>
<td class="searchBar" align="left" >
<div id="ddtopmenubar" class="mattblackmenu" >
<ul>
<li><a style="vertical-align:bottom;">Best of Coupons</a></li>
<li>
<a style="vertical-align:bottom;"> Best of Travel</a>
<a style="vertical-align:bottom;">Grocery stores</a>
</li>
<li><a style="vertical-align:bottom;">Office Supplies</a></li>
<li><a style="vertical-align:bottom;"> Department <br /> stores </a></li>
<li><a style="vertical-align:bottom;">Drug <br /> stores</a></li>
</ul>
</div>
</td>
<td class="searchBar" align="left">
<asp:Button ID="whatIsIsavePlusButton" runat="server" onclick="whatIsIsavePlusButton_Click" style="color: #800000; font-weight: 700" Text="?" Visible="False" />
</td>
<td class="searchBar" align="left">social media right here!</td>
</tr>
</table>
And the css for searchbar is:
.searchBar
{
background-color: #414141;
color:White;
width:auto;
margin:-5px;
padding:0px;
}
Your links
<a style="vertical-align:bottom;">Best of Travel<a style="vertical-align:bottom;">Grocery stores</a>
have a
border-right: 1px solid white
defined in
.mattblackmenu li a
there you can set the width of these white spaces
Your code isn't displaying the same in my browser as in the picture you give. But essentially I think you either want to put a negative margin-right on the div ddtopmenubar or a border-left:1px solid white on the following td. There might be another way to do it but I think that'd work.
Have you tried the border-collapse property? http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse
border-collapse: collapse;
Related
Im trying to get the text from the left table cell and right table cell to allign at the same place. Also im using blogger if this helps. Here is a picture of what i want
What i want
Here is my table html
<div id="text1">
Motives are extremely important and not taking care of your motives can cause alot of problems.</div>
<br />
<br />
<div id="table1">
<br />
<table border="0" cellpadding="3" cellspacing="3" id="table1" style="background-color: white; border-collapse: collapse; border: 0px solid #FFCC00; color: black; width: 850;">
<tbody>
<tr>
<td height="400px" width="425px">
<div id="title1">
Sims with Bad Motives:</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Can cause your work or school performance to suffer</li>
<br />
<li>Can give you a negative moodlet. </li>
<br />
<li>Can cause death</li>
</ul>
</div>
</td>
<td height="400px" width="425px"><div id="title1">
Sims with Good Motives:
</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Get promotions fast</li>
<br />
<li>Earn life time rewards from mood bar being high.</li>
<br />
<li>Get to pick two extra traits when a baby is born</li>
<br />
<li>Learn skills faster</li>
</ul>
</div>
</td>
</tr>
</tbody></table>
</div>
and here is any css associated with it
#title1 {
text-align:center;
text-decoration: underline;
font-weight: bold;
font-size: 20px;
}
#text1 {
font-size: 15px;
text-align: center;
}
#table1 {
text-align: center;
vertical-align: top center;
}
#table1 {
margin-top: -10px;
}
Gosh, horrible markup. I can barely look at it :)
Nevertheless, you have elements with the same ID on the page > #title1, #table1... IDs are unique. Classes are reusable on the same page. You can use the same ID on different pages, but you can't use two elements with the same ID on the same page.
There is a sort of uniformity you need to apply to your markup, and that's what classes are for. You need sort of a same layout for your left and you right columns.
This is the "fix": jsfiddle.net/swqza86p
What I did was to transform IDs into classes and set your tr elements with the vertical-align: top property.
I have created a table in which I will have an image of a person and information about them in the cell next to the image. My code is below
<table border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td class="bg" colspan="2">JEFF DAVIS</td>
</tr>
<tr>
<td width="24%">
<img height="150" src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150">
</td>
<td width="76%">
<p>Name: Jeff Davis</p>
<p>Favourite Color: Yellow</p>
<p>Favourite Animal: My Cat</p>
<p>Favourite Super Hero: Superman</p>
</td>
</tr>
<tr>
<td colspan="2">Facebook Twitter Email</td>
</tr>
</table>
In the cell where I keep the information, or 'profile' of the person I want to have bullet points in two columns. Could somebody inform me of how to do this?
Also I would like the top cell, with the name in capitals to have rounded edges, I believe I can do this with CSS but I am a complete novice.
Here is a jsfiddle of your example using dots u mentioned.
<ul>
<li><p>Name: Jeff Davis</p></li>
<li><p>Favourite Color: Yellow</p></li>
<li><p>Favourite Animal: My Cat </p></li>
<li><p>Favourite Super Hero: Superman</p></li>
</ul>
http://jsfiddle.net/kzgfu/
Is this want u ment?
P.s.: I dont quite understand what u mean with the capitals to have rounded edges. Could u show a picture of what u are meaning?
Rounded Cell from Danko http://jsfiddle.net/kzgfu/1/
And another rounded cell from me: http://jsfiddle.net/kzgfu/2/
I think this is what he means by rounded corners, not sure though
table td:nth-child(1){
background-color:#333;
color:#fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Here's a fiddle example using divs (I know it's not what you asked, but just so you have different options) and two columns for the bullet points.
http://jsfiddle.net/jprZ7
<div style="width:50%;">
<div style="width:100%; text-align:center; border-radius: 15px; background-color:#CCC;">
JEFF DAVIS
</div>
<div style="width:24%; float:left;">
<img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" />
</div>
<div style="width:76%; float:left;">
<ul style="float:left;">
<li>
<p>Name: Jeff Davis</p>
</li>
<li>
<p>Favourite Color: Yellow</p>
</li>
</ul>
<ul style="float:left;">
<li>
<p>Favourite Animal: My Cat</p>
</li>
<li>
<p>Favourite Super Hero: Superman</p>
</li>
</ul>
</div>
</div>
There you go
JsFiddle Bullet points and round corners around capitals
CSS:
.bg {
text-align:center;
background:green;
border-radius:10px 10px 0 0;}
HTML:
<li> <p>Favourite Color: Yellow</p> </li>
<li> <p>Favourite Animal: My Cat </p> </li>
<li> <p>Favourite Super Hero: Superman</p> </li>
<li> <p> Facebook Twitter Email</p> </li> </td>
http://jsfiddle.net/Ldbu4/1/
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="2" class="bg">JEFF DAVIS</th>
</tr>
<tr>
<td width="24%"><img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" /></td>
<td width="76%"><p>Name: Jeff Davis</p>
<ul>
<li>Favourite Color: Yellow</li>
<li>Favourite Animal: My Cat </li>
<li>Favourite Super Hero: Superman</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2">Facebook Twitter Email</td>
</tr>
and css
table
{
border-collapse:collapse;
}
td
{
border: 1px solid black;
}
td
{
padding: 10px;
}
th
{
background-color:#333;
color:#fff;
border-radius: 10px 10px 0 0;
}
My website has borders on many objects using border= activeborder 1px solid and it was working fine till last week on all the browsers. Now it has stopped working just on Chrome (Works on all other browsers). I haven't changed anything in the style sheet and have checked many times but it still does not work for some reason. Here's a sample of the code. If I change activeborder to gray 1px solid it works. Why so ? some kind of google update ?
<html>
<head></head>
<body>
<form id="form1">
<div>
<table style="width: 90px; margin-top: 27px;" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 30px;">
Latest News
</td>
</tr>
<tr>
<td style="border: activeborder 1px solid; padding: 10px" align="left">
<a style="color: #666666;" href="" target="_blank">one</a>
<br />
<a style="color: #666666;" href="" target="_blank">two</a>
<br />
<a style="color: #666666;" href="" target="_blank">three</a>
<br />
<a style="color: #666666;" href="" target="_blank">four</a>
<br />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
activeborder is not a standard css colour name. Using a standard name e.g. gray, or #666 or rgb(50,50,50) should work.
They were included as CSS2 system colours, but are now deprecated (an apparently now don't work). My testing shows that:
background-color: ActiveBorder;
... does work in IE11 and FireFox26 but not in Chrome32. Try seeing if it works in Quirks mode.
Find and Replace is your friend if you want to use css3 standard colors ;)
And ... ahem ... you should be defining your css in a stylesheet, not inline rough idea:
table.grid {width: 90px; margin-top: 27px;}
.grid td {border: 1px solid #999; padding: 5px 10px; text-align: left;}
.grid a {color: #666}
but I'm sure you knew that and were only doing inline for the example ;)
I've got a table where I've given each of the <td>s some styling to have a background color, etc. They also have different amounts of data in them. Specifically, I have two <td>s next to each other, and one has content in it that makes it taller than the other. In Chrome, the shorter <td> is the same height as the taller <td>, with styling and everything. In Firefox/IE, the shorter <td> just takes up as much room as needed. I've tried giving the <td> height: 100%, but that didn't really do anything. I also tried having a div inside the td with height: 100%, but that didn't do anything, either.
How can I get it to behave the same across all three browsers? I don't necessarily need it to be either way, although it would be nice to actually be able to control it. I mostly just need it to behave the same.
Here's the final html. It might be kind of hard to understand because there's a lot of knockout stuff in there.
<div class="container">
<div class="inner-container">
<table>
<tbody><tr><td style="text-align: right"><input type="button" id="manageSaveButtonTop" class="journal-button manage-save-button manage-save-button-top" value="Save"></td></tr>
<tr>
<td id="template" class="outer-div">
<h6>Templates</h6>
<ol class="journalTree sortable template manageJournal ui-sortable" >
<li class="group mine template">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>
<li class="no-nest mine template">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>
</ol>
<!--</div>-->
</td>
<td id="myJournal" class="outer-div droppable ui-droppable">
<!--<div id="myJournal" class="outer-div droppable ui-droppable">-->
<h6>My Journal</h6>
<ol class="journalTree sortable myJournal manageJournal ui-sortable">
<li class="group mine ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Blank Objective</span>
</li>
<li class="group deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Deleting Group</span>
<input type="text" style="display:none" class="itemTextBox"></div>
<ol >
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Test Deleting</span>
</li>
</ol>
</li>
<li class="group deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
<input type="text" style="display:none" class="itemTextBox"></div>
<ol>
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>
</ol>
</li>
</ol>
<!--</div>-->
</td>
</tr>
<tr><td style="text-align: right"><input type="button" id="manageSaveButtonBottom" class="journal-button manage-save-button bottom" value="Save"></td></tr>
</tbody></table></div></div>
I can't set the height to a specific height, because the height of the right table changes dynamically (by adding more things to it). Here's the relevant CSS:
#myJournal
{
border: 1px solid black;
display: inline-block;
vertical-align: top;
background-color: #dde5e4;
width: 650px;
height: 100%;
border-radius: 25px;
-moz-border-radius: 25px;
}
#template
{
border: 1px solid black;
display: inline-block;
vertical-align: top;
background-color: #dde5e4;
width: 500px;
height: 100%;
margin-right: 100px;
border-radius: 25px;
-moz-border-radius: 25px;
}
Avoid setting any inline attributes and use CSS to style your tables instead. Try setting the cell width using CSS. You could do something like this (ideally you want your CSS in a separate file, but just to illustrate):
<style type="text/css">
table#myTable td {
height: 200px;
width: 200px;
}
</style>
<table id="myTable">
<tbody>
<tr>
<td>My data</td>
</tr>
</tbody>
</table>
If you want different sizes, create separate classes and apply them to your cells:
<style type="text/css">
td.small-cell {
width: 100px;
}
</style>
<table id="myTable">
<tbody>
<tr>
<td class="small-cell">My data</td>
</tr>
</tbody>
</table>
Finally, if you are starting a project, you might want to save yourself some time and use a CSS framework, like Twitter Bootstrap, that will sort out browser inconsistencies for you.
I can't understand why doesn't this table align properly. There are 9 pictures in first row, and 3 pictures in the second row. For some reason this table stretches beyond what is necessary, and produces gaps between the pictures. The width of the table is 990 and sum of widths of all the pictures for each row is also 990 (I don't count border width here, I just included it to show where the cells separate. The gap between the pictures is so large that it can not be explained by the border width).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#008000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<table id="Table_01" width="990" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1"><img src="images/index_02.jpg" width="90" height="52" /></td>
<td colspan="1"><img src="images/index_03.jpg" width="102" height="52" /></td>
<td colspan="1"><img src="images/index_04.jpg" width="112" height="52" /></td>
<td colspan="2"><img src="images/index_05.jpg" width="120" height="52" /></td>
<td colspan="1"><img src="images/index_07.jpg" width="120" height="52" /></td>
<td colspan="2"><img src="images/index_06.jpg" width="112" height="52" /></td>
<td colspan="1"><img src="images/index_07.jpg" width="120" height="52" /></td>
<td colspan="1"><img src="images/index_08.jpg" width="134" height="52" /></td>
<td colspan="1"><img src="images/index_09.jpg" width="80" height="52" /></td>
</tr>
<tr>
<td colspan="4"><img src="images/index_11.jpg" width="346"/></td>
<td colspan="3"><img src="images/index_12.jpg" width="308"/></td>
<td colspan="4"><img src="images/index_13.jpg" width="336"/></td>
</tr>
</tbody>
</table>
</body>
</html>
Here is how it looks. I made page background color to be green, so that it can be easily separated from images :
Try creating a css file that contains the following code and link it to your table.
#table {
border-collapse: collapse;
border-spacing: 0;
}
This should work for getting rid of the padding and margins in your table
Here is my version:
css
body { font-size:10pt; font-family:Verdana; }
.header ul li { background: url('tab-left.png') bottom left no-repeat; float:left; list-style:none; }
.header ul li a { background: url('tab-right.png') bottom right no-repeat; color:#fff; display:block; padding:10px 26px; text-decoration:none; }
.header ul li a:hover { text-decoration:underline; }
.sub-header { clear:both; }
.sub-header li { background: url('...'); }
.sub-header li a { background: url('...'); font-size:12pt; text-transform:uppercase; }
html
<div class="header">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Clients</li>
<li>Contact</li>
<li>Coordinates</li>
<li>Corporate Portfolio</li>
</ul>
<ul class="sub-header">
<li>Need Staff?</li>
<li>Looking for a job?</li>
<li>Something....</li>
</ul>
</div>
images
and
result
OK so here's my code of how I would lay this out with HTML with a little CSS to try to help put you on the path to being current with your HTML skills.
I'm going to start with your background image. Currently you have it as part if your images that you are piecing together in the table. If you have syntax errors in your code, this can lead to misalignment like what you are seeing. If instead you defined it as the background image of the body, this would never occur.
Next is the navigation. You have a bunch of tabs. These tabs include part of the background when they should really only be the images themselves. A navigation is a list of webpages, so in essence you should use an unordered list, because they are in no particular order. the css selector display: inline; tells the list's line item to change it's display type so all the images float next to each other instead of being listed down from each other. in the .nav class the margin tells it to center it, and the width is self explanatory.
<head>
<style type="text/css">
body { background-image: url('/images/background-image.png') repeat-y; }
.nav { width: 800px; margin: 0 auto; }
.nav li { display: inline }
</style>
</head>
<body>
<ul class="header-nav nav">
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
<ul class="other-nav nav">
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
</body>
To fix the above you would need to remove all the colspans from the first row. They are useless then have the colspans in the 2nd row equal no more and no less than the rowspans of the 1st row. After doing that the problem with that is your images don't add up mathematically so it'll be wrong. You really need to recut your images as well.
Definitely go CSS versions that people have posted. Please don't perpetuate 1995 HTML....
However, to answer your original question, add up the widths you've specified.
<td colspan="1"><img src="images/index_02.jpg" width="90" height="52" /></td>
<td colspan="1"><img src="images/index_03.jpg" width="102" height="52" /></td>
<td colspan="1"><img src="images/index_04.jpg" width="112" height="52" /></td>
<td colspan="2"><img src="images/index_05.jpg" width="120" height="52" /></td>
Those columns correspond to a colspan=4 group with a specified width of 346. You'd be splitting the last column as it has a colspan of 2. My head hurts already.
The second group is 3 columns:
<td colspan="1"><img src="images/index_07.jpg" width="120" height="52" /></td>
<td colspan="2"><img src="images/index_06.jpg" width="112" height="52" /></td>
Which add up to 232px. The next corresponding row is colspan=3 adding up to 308. Since 308 != 232, you're going to have spaces.
Rinse and repeat for the next columns. If you make the first row match up with the columns from the second row, your spaces go away. If I was to do this (which I wouldn't) I would just have one row and one big column with all buttons in it.....
Do not split the 2nd tr into 3 tds.
Just make 1 td in the 2nd tr and make it be td colspan='9'
I would also recommend not even doing 9 tds in the 1st <tr> because it's redundant (the images will "push" the boundaries of the table to fit their specs, regardless of td height/width settings.