Having been away for a few days, I am back with a problem.
I have a page which is loaded at www.c5d.co.uk/descriptioned11891.htm.
Is there any way I can do this with a stylesheet and the php page I am using. An example of the PHP is at http://www.c5d.co.uk/descriptioned11901.php
I have tried and my best shot looks ridiculous at http://www.c5d.co.uk/descriptioned11891.php
Thanks for any help
Antony
Hi,
I’m not quite sure what you are asking exactly but the cell content can be aligned to the top with this:
#description td{vertical-align:top}
What I am trying to do is transform the table which has vertical text in the htm page, to one which will look the same in php.
As the text has to be rotated/flipped to show vertically, then I guess you meant #description td{vertical-align:bottom}, but either way I can’t get this to work with CSS
Maybe one to leave as it is ?
Thanks
Antony
Could you please attach an image to describe what you want to do?
I have a code here to help you do as your php page, please check:
#description td{font-weight:bold;}
Please remove vertical-align:top if you want the text center the box, remove text-align:center if you want the text move to left.
Is it okay?
I looked at the page and I saw no vertical text so I assumed you meant vertical alignment. I now see that you had only implemented this for IE but you neglected to mention this so that when I looked in Firefox there was no vertical text.
to one which will look the same in php.
php has nothing to do with this as all a browser really understand is html. How you deliver the html makes no difference to a browser as all it sees in the end is html (just view source in the browsers and all you see is html). If you have a coding question about php then that belongs in the php forum.
Back to your original question and if you want to rotate text in a table then you will need to rotate the text and not the cell itself. here is an example that works back to IE7(and probably further).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
table.test{border-collapse:separate;border-spacing:3px}
.test { margin:auto; }
.test p{margin:0}
.test th, .test td{
border:1px solid #000;
width:150px;
text-align:center;
}
.test td{vertical-align:middle;}
p.rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
white-space:nowrap;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
p.rotate{
writing-mode: tb-rl;
filter: flipv fliph;
display:inline-block;
*display:inline;
zoom:1.0;
letter-spacing:1px;
}
</style>
<![endif]-->
</head>
<body>
<table class="test" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Table Head</th>
<th scope="col">Table Head</th>
<th scope="col">Table Head</th>
<th scope="col">Table Head</th>
<th scope="col">Table Head</th>
</tr>
<tr>
<td><p class="rotate">Rotated Heading</p></td>
<td><p class="rotate">Rotated Heading with longer text</p></td>
<td><p class="rotate">Rotated Heading</p></td>
<td><p class="rotate">Rotated</p></td>
<td><p>Commencing at one house in Mossley Road, then all houses in Queen Street from No 1 to Hurst Cross then all houses in Hope Street from No 9 to 179, then all houses in Hope Street from No 2 to 152 then 280 Whiteacre Road and one house in Russel Street, two houses in Back Hope Street, and all houses in Chapel Street and at Old Carrs, then all houses at Crompton Street near Carrs Weaving Shed, the whole in the Parliamentary Borough of Ashton Under Lyne. </p></td>
</tr>
</table>
</body>
</html>
Hope that helps.
This helps tremendously and it works in the three browsers I have tried.
There is just one minor point, I should like to adjust, if it is possible.
I should like column 9 to be about 1/3 of the width, and the other 8 columns to take up the other 2/3rds.
Is it possible to style the column widths. The reason for that is that column 9 has a lot of text and by compressing the width, it forces a very tall table. A wider column 9 would give a shorter table which the ultimate desire.
One to play around with I think but this really is a great help
Thanks very much
Antony
Antony, try assigning a class to column 9. Maybe call it “.col9”.
Then, in css, assign a % width to that class.
See if that works for you.
PS: Your css has errors. Try writing your code in a consistent, predictable pattern. It becomes much easier to read, and errors are easier to spot.
As Ron said you can try applying a width to the end column but you may find that the other columns will not all be the same width. This is because the text pushes the cell wide due to the white-space:nowrap rule and although when the text is rotated it is narrower the cell will not adjust with it.
You’d probably have to do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
table.test{border-collapse:separate;border-spacing:3px}
.test { margin:auto; }
.test p{margin:0}
.test th, .test td{
border:1px solid #000;
width:150px;
text-align:center;
}
.test .content{width:300px;}
.test td{vertical-align:middle;}
p.rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
p.rotate{
writing-mode: tb-rl;
filter: flipv fliph;
display:inline-block;
*display:inline;
zoom:1.0;
letter-spacing:1px;
}
</style>
<![endif]-->
</head>
<body>
<table class="test" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Table Head</th>
<th scope="col">Table Head</th>
<th scope="col">Table Head</th>
<th scope="col">Table Head</th>
<th class="content" scope="col">Table Head</th>
</tr>
<tr>
<td><p class="rotate">Rotated Heading</p></td>
<td><p class="rotate">Rotated Heading with longer text</p></td>
<td><p class="rotate">Rotated Heading</p></td>
<td><p class="rotate">Rotated</p></td>
<td><p>Commencing at one house in Mossley Road, then all houses in Queen Street from No 1 to Hurst Cross then all houses in Hope Street from No 9 to 179, then all houses in Hope Street from No 2 to 152 then 280 Whiteacre Road and one house in Russel Street, two houses in Back Hope Street, and all houses in Chapel Street and at Old Carrs, then all houses at Crompton Street near Carrs Weaving Shed, the whole in the Parliamentary Borough of Ashton Under Lyne. </p></td>
</tr>
</table>
</body>
</html>
Thanks for the help an I’m sorry for the delayed reply but I have been away
This is what eventually worked
Thanks for the help
Antony
table.test{border-collapse:separate;border-spacing:3px}
.test { margin:auto; }
.test p{margin:0}
.test th, .test td{
border:1px solid #000;
width:150px;
text-align:center;
}
.test td{vertical-align:middle;}
p.rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
white-space:nowrap;
width: 100px;
}
.test tr {width:50px; }
.col9 {width: 250px; height: 500px;}
http://www.c5d.co.uk/descriptioned11891.php
Impressive, Antony! I’ve never used rotations. This looks like quite an accomplishment.
I have a few bits of feedback for you, if you’re interested.
For starters… Line 40 on the descriptioned11891.php page begins with a stray <p> tag.
<p><table class=“table-3”>
The stray <p> tag should be deleted. (Is that the one that’s following you around? If so, break out the sledge hammer and squash it!!!)
Very oddly, the page does not have an open <head> tag. There should be an open <head> tag just beneath the
<html lang=“en”> tag. Are you bringing in part of the head with a php “include” call or was this just an “oops”?
Even stranger, the validator that Firefox uses didn’t complain about the missing <head> tag which makes me wonder if the validator is out of date or if the standards for writing HTML5 are different than HTML4. Dunno.
The vertically aligned table columns look like books on a shelf. Really cool. Don’t know if this matters to you or not, but I glanced at the books on my shelf and noticed that the titles read from top to bottom, 180 degrees from the orientation that you chose. Like I said, that’s just an observation.
One more observation that might matter is that the table has become too wide. Wider than the #container width of 950px. That gives the table an “off center” look, and indeed, in a 4x3 monitor, it begins pushing off the right edge of the viewport. You might want to reconsider the widths of the columns of that table in order to reduce its fixed width.
I ran through some example widths and found that the following seemed to work nicely to my eyes.
The attached screen shots show your current settings in the Before view, and these settings in the After view for comparison purposes. Be sure to note the horizontal scroll bar in the Before view.
Line 148
.test th, .test td {
border: 1px solid #000000;
text-align: center;
[COLOR="#FF0000"]width: 150px;[/COLOR] /* Delete this width property */
}
Line 154
p.rotate {
transform: rotate(-90deg);
white-space: nowrap;
width: [COLOR="#FF0000"]85px[/COLOR]; /* Change from 100px to 80-90px to reduce the width of the columns with rotated text. */
}
Line 163
[COLOR="#FF0000"].test tr { /* Delete this rule entirely */
width: 50px;
}[/COLOR]
Line 164
[COLOR="#FF0000"].col9 { /* Delete this paragraph rule entirely (See next note about padding.) */
height: 500px; /* Delete. Way too tall. Fixed heights are inflexible. */
width: 250px; /* Delete. A width is unnecessary; this is too wide anyway. */
}[/COLOR]
NOTE: If you want more space beneath the column9 paragraph, add a little padding to the bottom of the paragraph.
.col9 {
padding-bottom:2em; /* or thereabouts */
}
Cheers
Good work Ron
The design will also need the fixes from my post #8 to make it work in ie8 and under.
Antony, while working on the table issue, I realized that the #advert2 image also extends outside of the width of #container 14px to the right. Fortunately, it’s easy to fix.
Then I realized that the black line underneath the ads is probably unintentional, so that has been “fixed”, too, and also restored in such a way that it is under your control. In other words, you can delete it or change its height if you wish.
At present, lines 114 and 116 contain strings of properties, most of which are counterproductive or useless. Change both lines so they contain only the float properties show below. Then add the two new rules. The last rule also controls that bottom black line. Pretty simple, huh?
censusstyle.css
Line 114:
#advert1 {float:left;}
Line 116:
#advert2 {float:right;}
ADD:
#advert1 a, #advert2 a {display:block;}
ADD:
a img {display:block; border-bottom:4px solid #000;}
Thanks for the comments.
First off the rotates were given to me earlier in the thread, and they work fine, It’s not my invention unfortunately.
However when you suggent modifying the Col9 section, then I don’t know if what you are suggesting is practical. There are 17 EDs, to do, though as yet I have only done 12. and the content in each box varies. Whilst there is little text in some, there is lots in others. This one has the most however, http://www.c5d.co.uk/descriptioned41891.php and the box size is set for this one.
There is a minor problem with http://www.c5d.co.uk/descriptioned121891.php in that there was a crossing out and when I use the text line through it sends the text to the bottom even though the CSS has in line included. Any thoughts ? .strike {text-decoration:line-through; display:inline;} On http://www.c5d.co.uk/descriptioned61891.php it just leaves a jumbled mess. It works on all other deletions.
I have made the adjustments to the advert but I think that you meant a img {display:block; border-bottom:4px solid #708090;} and not a img {display:block; border-bottom:4px solid #000;} as this still left the black line round, but by changing the colour it worked. So thanks it’s great
I do take your point about colum 9 extending outside the margin, but if I were to narrow it, then because of the amount of text it would look ridiculously narrow.
On a seperate point, and I guess this is HTML rather than CSS, several of my pages have a currency converter from xe.com and the HTML checker says that there are 8 errors. I’m damned if I know what to do about them. Is it likely that the HTML is wrong or is it more likely me http://www.c5d.co.uk/scotland.php is one of the pages concerned. I appreciate that the table still needs styling to fir in the centre and have the right colours.
Thanks
Antony
No, I actually meant exactly what I wrote. Since we had not spoken about the black line, I felt obligated to leave it in place in case my assumption was wrong. However, I did it in such a way that you could DELETE it by simply deleting {border-bottom:4px solid #000;}. It’s better if you do not change the color to match the background, instead just delete the border-bottom property from the code.
Line 117 should read:
a img {display:block;}
Give me a few minutes or so to look at the table in 41891 and I’ll get back with you
Then we’ll go from there.
OK, I have deleted it.
Thanks. I 'll look forward to the other reply but it will be tonight when I can do anything as I’m off to work now !
Thanks Antony
[FONT=Verdana]The matter of the recommended mods for the table…
These two screenshots show “As-Is” and “WithMods” comparisons of descriptioned41891.
[FONT=Verdana]To my eyes, the mods look more professional than the table pushing off the right edge of the window.
If you agree, the code again is:
censusstyle.css
Line 151:[/FONT]
.test th, .test td {
border: 1px solid #000000;
text-align: center;
[COLOR="#FF0000"][s]width: 150px;[/s] /* Delete this width property */[/COLOR]
}
Lines 161 and 169:
p.rotate {
transform: rotate(-90deg);
white-space: nowrap;
width: [COLOR="#FF0000"]80px[/COLOR]; /* Change from 100px to 80px to increase the width of .col9. */
}
Line 172:
[COLOR="#FF0000"].test tr { /* Delete this rule entirely */
width: 50px;
}[/COLOR]
Line 173:
[COLOR="#FF0000"].col9 { /* Delete this paragraph rule entirely (See next note about padding.) */
height: 570px; /* Delete. Way too tall. Fixed heights are inflexible. */
width: 250px; /* Delete. A width is unnecessary; this is too wide anyway. */
}[/COLOR]
Also, I have copied the code from Paul’s post that assures IE7 compatibility of the transform rotate code. Be sure to paste this code exactly just above the </head> tag (~line 15) on all of the pages that use the rotate code.
<!--[if lte IE 8]>
<style type="text/css">
p.rotate {
writing-mode: tb-rl;
filter: flipv fliph;
display:inline-block;
*display:inline;
zoom:1.0;
letter-spacing:1px;
}
</style>
<![endif]-->
[FONT=Verdana]And FINALLY, be SURE to add the OPEN <head> tag just under the <html lang=“en”> tag at the top of these pages, as I mentioned in my earlier post.
You left me with some more questions to explore, so let me do that now and I’ll post another response later.
Cheers[/FONT]
[FONT=Verdana]Regarding the errant strikethrough on the descriptioned121891.php page…
censusstyle.css
Line 175:
.strike {text-decoration:line-through;[COLOR="#FF0000"][s]display:inline;[/s][/COLOR]} /* [COLOR="#FF0000"]Delete[/COLOR]. Unnecessary. */
descriptioned121891.php
Line ~92 - change the “p” tags to “span” tags
from:
<p class="strike">that</p>
to:
<span class="strike">that</span>
Also on the descriptioned121891.php page:
Add a </p> tag just before the </td> tag at the end of line ~92.
Add the open <head> tag just beneath the <html lang=“en”> tag at the top of the page.[/FONT]
[FONT=Verdana]The “jumbled mess” on descriptioned61891.php…
This page needs the same open <head> tag added just under the <html lang=“en”> tag.
Looks like you do not need the p.rotate2 class in css. That can be deleted.
I am including all of the <table class=“test”> code here to be sure you can see my changes. They are few and could easily be missed. Look for the blue colored code.
A. The non-breaking spaces, " ", have been deleted and replaced with ordinary spaces.
B. The rotate2 class was replaced with a rotate class.
C. The text with the strike-thru is surrounded with <span class=“strike”> tags.
It looks like this was being used for testing, so I believe you have other text to add here; but now you can see how the strike-thru is accomplished.[/FONT]
<table class="test">
<tr>
<th scope="col">Cols: 1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
<th id="col9">9</th>
</tr>
<tr>
<td>Civil Parish</td>
<td>Municipal Borough</td>
<td>Municipal Ward</td>
<td>Urban Sanitary District</td>
<td>Town or Village, or Hamlet</td>
<td>Rural
<br>Sanitary
<br>District
</td>
<td>Parliamentary Borough or Division</td>
<td>Ecclesiastical Parish or District</td>
<td></td>
</tr>
<tr>
<td><p class="rotate">Ashton Under Lyne</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">—————</p></td>
<td><p class="rotate">Hartshead Prestwich Division</p></td>
<td><p class="[COLOR="#0000FF"]rotate[/COLOR]">[COLOR="#0000FF"]<span class="strike">[/COLOR]Christ Church Ashton Under Lyne[COLOR="#0000FF"]</span>[/COLOR]<br>Holy Trinity Bardsley</p></td>
<td><p class="rotate">Christ Church Ashton Under Lyne<br>Holy Trinity Bardsley</p></td>
<td><p class="col9">Parsonage
<br>Lordsfield
<br>Taunton Road
<br>Newmarket Road
<br>Oldham Road
<br>Store Street
<br>Langham Street
<br>Gordon Street
<br>Oaken Clough
<br>Buckley Street
<br>Wilshaw Road
<br>Limehurst</p>
</td>
</tr>
</table>
Past my bedtime. Until later.
Thanks for the messages.
I have added the <head> tag to the web pages. I have also made the adjustments to the CSS. However I need the p.strike setion of it, so I have done what you said but renamed p.strike2
The ed12 page now works fine, but ed6 is still a jumbled mess. Not only that, but the end column, has now become far too narrow, and I wonder why that is ?
It hasn’t o any of the other pages.
Antony
Antony, there is no need to create a “strike2” class. It is OK to use “strike” with the “display:inline” property in it. On page ed6, “strike” is assigned to a <span> tag, which is an inline element. I had indicated that “display:inline” could be removed it because it is redundant, however, it is completely harmless to leave it in; especially, if needed elsewhere. You can delete .strike2 from your css.
The shrinking width of column 9 is an oversight, I did not anticipate that column 9 might contain a list of short names rather than sentences. It needs to have a width assigned.
Firefox has a problem with {transform:rotate}. It hasn’t been very obvious so far, but on the ed6 page it becomes apparent as the rotated text is something of a mess.
I came up with a solution tonight, but want to test more before passing it along.
Please tell me the purpose of assigning a scope to the th tags. I haven’t seen any code that utilizes that scope anywhere. If it has no purpose, would you consider deleting it?