I am customizing forms in NetSuite and have gotten everything to work as I would want, except the footer. For some reason the text-align: center function is working based on the number of characters in the row of the footer, rather than the center of the page. Below are images of my code and print examples that show the error better. The only difference in the code between footer code images 1 and 2 is that I removed the word "number" in row 55 to depict the centering is based on characters.
Footer Code 1
Footer Print 1
Footer Code 2
Footer Print 2
If you were to show the borders on your tds you'd get a better sense of what's going on. Basically you are not providing hints for the td and table sizes so the normal table width processing is happening. ie. the tables will only be wide enough to hold the text so they appear to be text size based.
Also I suspect you have a lot more markup than you need. The following will give you what I think you are looking for. Note that you may want to play with padding to get the correct left and right alignments.
<macro id="nlfooter">
<hr />
<table class="footer" style="width: 100%;">
<tr>
<td align="left" colspan="4">email</td>
<td align="center" colspan="6">Phone</td>
<td align="right" colspan="4">Page info</td>
</tr>
<tr>
<td align="center" colspan="14">
<b>Thank you</b>
</td>
</tr>
</table>
</macro>
I have just begun learning elementary 'coding' (HTML) and I'm stuck on a table my teacher presented us for the long weekend (note that I'm on vacation so this is not counting towards any degree and I'm not seeing him until Tuesday). I gather that it's probably a very straightforward solution but I've been wrestling with it since the afternoon.
The linked-to image file shows the table he wants us to construct using nothing but HTML (no CSS). I'm supposed that there are those who'll descry this as not being modern technique but I imagine it wouldn't be bad to know how to at least achieve this using straight-up HTML.
The top row is one long box (say it has one unit of height), the second row from the top comprises two boxes of three units in height, the third from the top row is another long, one-unit high box on top of the bottom-most, one-unit-high five boxes, each of equal size.
The boxes are all empty of data though he drew two large X's in the large boxes][1] to show that THOSE cells would have 'X' placeholders and not be blank. [1]: https://i.stack.imgur.com/LK7oJ.png
The fledgling HTML code I've managed to come up with is this:
<html>
<head>
<title>Under the Table</title>
</head>
<body>
<center> <h2>Table Example</h1></center>
<center>
<table border="3">
<tr>
<th colspan="5"> </th>
</tr>
<tr>
<td colspan="2.50" height="100"; width="100"><center> </center></td>
<td colspan="2.50" height="100"; width="100"><center> </center></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
</tr>
</table>
</body>
</html>
Run the code and you'll see that while everything seems fine the second row with the triple-height boxes are compressed, leaving a large space in the right-hand part of the row. Just run the code and you'll see my issue.
Okay, so to summarize and state it explicitly: I am unable to create a table with eight empty boxes and two large (triple-height) boxes with a single character within them using nothing but HTML (I probably couldn't manage by any other means either but still). Any advice based both on the desired output (picture) and my last failed attempt (whose two large boxes in the second row are too small horizontally and leave an empty non-cell space)?
NB: I'm on vacation and this is not a degree course. Because I'm on additional holiday for a long weekend I was hoping for some input from people who know about markup language (and programming in general). Thanks for any help.
So the colspan argument does not accept a decimal. What you can do in this case is to simple multiply your columns by 2 so you get 10 for the first and third row which means the second row would be 2 instead of 2.50. You'll however probably not achieve a very good end result with that either since your 4:th will only be 50% (10% * 5) in the code you have.
I really don't want to give you all the anwers here if this is for school but you can play around with it if you want to see what happens.
I'm working on a project where I've made my phpmyadmin database spit out a set of 6 images on my webpage. I've put it into a table and this is where the trouble begins - even though it sounds easy!
I need the images to be in three's, in a horizontal line.
I will have 6 images most of the time so 3 per row with good spacing/padding etc.
I've tried a lot of things and played around with the CSS but couldn't get it to work.
Here are (respectively) the actual page and how it looks, the CSS for it and the actual code/script of the table:
Actual Page
CSS for the table: table.Evidence td {
padding:0px,10px,0px,0px;
}
Script for the table:
It looks very easy but I couldn't make it work.
Any help would be much appreciated!
I'm new so please bear with me until I get used to this.
The first thing is that if you define all 4 paddings in one command you have to seperate them with spaces.
table.Evidence td { padding:0px 10px 0px 0px; }
It also seems that you don't use the table tags right.
With an tr you are adding tan new row and with an td you are adding a new cell.
A table of 2x2 cells would look like:
<table border="1">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
4
</td>
</tr>
</table>
Your <tr></tr> tags should be after every third image, so the if in your while should be:
if($i % 3 == 0){
echo "</tr></tr>";
}
else{
echo "<td><img something...></td>";
}
Also you must have one <tr> opening tag directly after the <table> tag, and one </tr> closing tag directly before the </table> tag.
Let's say we want to make the following table responsive.
<table>
<tr>
<td>Dog Image</td>
<td>Cat Image</td>
</tr>
<tr>
<td>Dog Text</td>
<td>Cat Text</td>
</tr>
</table>
What is the best solution? What I want (done using CSS):
Dog Image
Dog Text
Cat Image
Cat Text
Setting a display block on the td's won't be the solution, I wouldn't want the two images under each other. Can someone help me out?
The question seems very broad, because it is not clear which kind of markup you do really have, which rules can be assumed to be definitive etc...
But IF you really have an HTML table with an alternated sequence of images and texts, in the form of "row of images, row of texts, row of images, row of texts", then there is a problem with the content.
It's been used a tabular markup to represent non-tabular data, and the data itself has been splitted to adhere to visual needs, instead that to respect its logic structure.
Since you said you don't want to change the table markup, but also since you will most likely need to change something, then I suggest you to to do with the HTML5 way, that for a work like this is the usage of the <figure> and <figcaption> elements.
With the help of Javascript, try automating the following changes to the source code:
surround all the images with a <figure> element
move all the texts to the previously created <figure> element, and enclose them in a <figcaption> tag.
delete the row that used to contain the texts.
Then apply display: inline-block; to the td, and you will get the following result.
Run the demo Full page and resize the window to see the <td>s becoming fluid.
figure {
margin: 0;
text-align: center;
}
td {
vertical-align: top;
display: inline-block;
}
<table>
<tr>
<td>
<figure>
<img src="http://i.stack.imgur.com/C1285.jpg" alt="Dog">
<figcaption>“A dog is the only thing on earth that loves <br>you
more than he loves himself.”
<br>
<a href="http://www.goodreads.com/author/show/1865038.Josh_Billings">
Josh Billings</a>
</figcaption>
</figure>
</td>
<td>
<figure>
<img src="http://i.stack.imgur.com/FW9qs.jpg" alt="Cat">
<figcaption>“What greater gift than the love of a cat.”
<br>
<a href="http://www.goodreads.com/author/show/239579.Charles_Dickens">
Charles Dickens</a>
</figcaption>
</figure>
</td>
</tr>
</table>
I know it's not the easy answer you're looking for, but given the peculiarity of your problem, I don't think you'll get it here (assuming that it exists).
I have a bowling web application that allows pretty detailed frame-by-frame information entry. One thing it allows is tracking which pins were knocked down on each ball. To display this information, I make it look like a rack of pins:
o o o o
o o o
o o
o
Images are used to represent the pins. So, for the back row, I have four img tags, then a br tag. It works great... mostly. The problem is in small browsers, such as IEMobile. In this case, where there are may 10 or 11 columns in a table, and there may be a rack of pins in each column, Internet Explorer will try to shrink the column size to fit on the screen, and I end up with something like this:
o o o
o
o o o
o o
o
or
o o
o o
o o
o
o o
o
The structure is:
<tr>
<td>
<!-- some whitespace -->
<div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
<!-- some whitespace -->
</td>
</tr>
There is no whitespace inside the inner div. If you look at this page in a regular browser, it should display fine. If you look at it in IEMobile, it does not.
Any hints or suggestions? Maybe some sort of that doesn't actually add a space?
Follow-up/Summary
I have received and tried several good suggestions, including:
Dynamically generate the whole image on the server. It is a good solution, but doesn't really fit my need (hosted on GAE), and a bit more code than I'd like to write. These images could also be cached after the first generation.
Use CSS white-space declaration. It is a good standards-based solution, but it fails miserably in the IEMobile view.
What I ended up doing
*hangs head and mumbles something*
Yes, that's right, a transparent GIF at the top of the div, sized to the width I need. End code (simplified) looks like:
<table class="game">
<tr class="analysis leave">
<!-- ... -->
<td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
<!-- ... -->
</tr>
</table>
And CSS:
div.smallpins {
background: url(/img/lane.gif) repeat;
text-align: center;
padding: 0;
white-space: nowrap;
}
div.smallpins img {
width: 1em;
height: 1em;
}
div.smallpins img.spacer {
width: 4.5em;
height: 0px;
}
table.game tr.leave td{
padding: 0;
margin: 0;
}
table.game tr.leave .smallpins {
min-width: 4em;
white-space: nowrap;
background: none;
}
P.S.: No, I will not be hotlinking someone else's clear dot in my final solution :)
You could try the css "nowrap" option in the containing div.
{white-space: nowrap;}
Not sure how widely that is supported.
I've got around this type of issue in the past by dynamically creating the entire image (with appropriate pin arrangement) as a single image. If you are using ASP.NET, this is pretty easy to do with GDI calls. You just dynamically create the image with pin placement, then serve to the page as a single image. Takes all the alignment issues out of the picture (pun intended).
Why not have an image for all possible outcomes for the pins? No Messing with layouts for browsers an image is an image
Generate them on the fly caching the created images for reuse.
What would make the most sense is changing out which image is displayed on the fly:
<div id="pin-images">
<img src="fivepins.jpg" />
<img src="fourpins.jpg" />
<img src="threepins.jpg" />
<img src="twopins.jpg" />
<img src="onepin.jpg" />
</div>
Since you are using images anyway, why not generate an image representing the whole layout on the fly? You can use something like GD or ImageMagick to do the trick.
Add a "nowrap" in your td tag...
Since you're going for maximum compatibility, consider generating a single image representing the frame.
If you're using PHP, you can use GD to dynamically create images representing the frames based on the same input that you would use to create the HTML in your question. The biggest advantage to doing this is that any browser which could display a PNG or GIF would be able to display your frame.
I figured out that there is a setting on the client where they can select the view as 1) Single Column, 2) Desktop View, and 3) Fit Window.
According to MSDN, the default is supposed to be to Fit Window. But my wife's IE Mobile phone was defaulting to a Single Column. So no matter what, it would wrap everything into a single column. If I switched to any of the other two options it looked fine.
Well, you can set this with a meta tag:
<meta name="MobileOptimized" content="320">
will set the page width to 320 pixels. But I don't know how to make it go to auto.
This does not work on BlackBerry's prior to v4.6 - you're stuck with single column unless the user manually changes to desktop view. With 4.6 or later, the following is supposed to work, but I haven't tested it:
<meta name="viewport" content="width=320">
You might need an actual space immediately following the semi-colon in
Try it with the <div> tag on the same line as <td>...</td>
I may have misunderstood what you are after but I think that you can do what I've done for logos on a map.
The map background tile is drawn then each image is told to float left and given some interesting margins so that they are positioned as I want them to be (view source to see how it's done).
Use the word joiner character, U+2060 (i.e. )
Maybe this is just one case where you could use tables to enforce layout. It's not optimal, and I know you aren't supposed to use tables for things that aren't tabular, but you could do something like this.
<table>
<tr>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> ></td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Do you have tried to define a width for the column? Like <td width="123px"> or <td style="width:123px">. And maybe also for the div ?
Have separate images for every possible arrangement of each row.
That would only require 30 images (16+8+4+2)
You can replace img with span and use a background image with each span, depending on a CSS class:
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
(Personally I think it's better to have four lines with a p tag instead of a single div with br.)
Then in CSS you can have something like this:
p.smallpins {
margin: 0;
padding: 0;
height: 11px;
font-size: 1px;
}
p.smallpins span {
width: 11px;
background-image: url(nopinsmall.gif);
background-repeat: ...
background-position: ...
}
p.smallpins span.pin {
background-image: url(pinsmall.gif);
}
There isn't any nobr HTML tag; I am not sure how well-supported this is, though.
You could use CSS overflow:visible and non-breaking spaces between your elements (images), but no other white space in the HTML content for those lines.
Would it not be easier if you do it like this?
<div id="container">
<div id="row1">
<img/><img/><img/><img/>
</div>
<div id="row2">
<img/><img/><img/>
</div>
<div id="row3">
<img/><img/>
</div>
<div id="row4">
<img/>
</div>
</div>
Whereby your CSS would handle the alignment?
.container div{
text-align:center;
}