I'm having trouble getting a scroll bar to show for a school project. I've tried debugging, looking up different ways to fix this and trying all different types of codes. I, however, still can't get a scroll bar to show up.
Here's a preview of the code:
<html>
<title>Cloud 9 HyperX</title>
<body background="test.png" alt="" style="position: fixed;>
<center><img src="Cloud9.png" title="Power Rankings -- Cloud 9"><br></center>
<center>Cloud 9 LCS Page || Gamepedia
<hr width=75% size=5 color=00aced>
<h1>Pro E-Sports Players, LCS Team</h1>
<img src="C9team.png" title="Ultra Rapid Fire TSM vs C9"><br>
<p>Cloud 9 HyperX is a League of Legends Championship Series team consisting of<br>
<TABLE>
<TABLE BORDER="1">
<TR>
<TH COLSPAN="2">
</TH>
</TR>
<TH>Name</TH>
<TH>Role</TH>
<TR>
<TD>Hai "Hai" Lam</TD>
<TD>Mid Laner</TD>
</TR>
<TR>
<TD>An "Balls" Le</TD>
<TD>Top Laner</TD>
</TR>
<TR>
<TD>William "Meteos" Hartman</TD>
<TD>Jungler</TD>
</TR>
<TR>
<TD>Zachary "Sneaky" Scuderi</TD>
<TD>ADC (Attack Damage Carry)</TD>
</TR>
<TR>
<TD>Daerek "LemonNation" Hart</TD>
<TD>Support</TD>
</TR>
</TABLE>
<!--My favorite thing to do on the weekend is play video games with my friend Tim Fish and Jake McGraw and watch LCS-->
<p>Cloud 9, previously Quantic Gaming, first entered the LCS with the line-up of<br>
Nientonsoh(Team Fusion), Hai, LemonNation, WildTurtle(Team Solo Mid), <br>
and Yazuki. While Team Quantic they tried to enter the LCS qualifiers, <br>
but lost their first run. After their first lost in the LCS qualifiers,<br>
they took on a major roster change.<br></center>
<p align="left">
<ul>
<li>Yazuki left, Balls came in for top lane
<li>WildTurtle moved to TSM, Sneaky came in for ADC
<li>Neintonsoh left leaving mid open, Hai moved to mid from previously being jungle
<li>Meteos stepped into jungle to complete what was Quantic Gaming.<br>
</ul></p><center>
After the roster change Quantic went through LCS qualifiers again, only this time<br>
under the name of Cloud 9. After entering the LCS Cloud 9 won two LCS<br>
seasons and finished in the top eight for Season 3 World Championship.<br>
If you remove this declaration
style="position: fixed;
Your scrollbars will appear, when needed.
In general, and this is out of the scope of your question but, your markup has quite a few mistakes, just so you know. Maybe this can help you improve http://www.htmldog.com/guides/html/
Related
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.
Do you know how to align the text after a line break with tcpdf?
Using tcpdf 6.2.13, and the writeHTML method.
I'm trying to have perfectly left aligned text, but every time the line is too long, the next line is offset to the left, see the picture and code below.
<table border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
My Company Equipement<br>
France
</td>
<td bgcolor="green" cellpadding="0">
<b>Addresse de livraison</b>
<br>
<br>
Team Adamon FIGHTING ACADEMY
38 chemin de Tomasenea<br>
Zone de Berrouetta<br>
26000 URRUGNE<br>
France
</td>
<td align="left" style="margin:0;padding:0;text-indent: 0;">
<b>Addresse de livraison</b>
<br>
<br>
Team Adamon FIGHTING ACADEMY
38 chemin de Tomasenea<br>
Zone de Berrouetta<br>
26000 URRUGNE<br>
France
</td>
</tr>
</table>
<p>
Team Adamon FIGHTING ACADEMY
Team Adamon FIGHTING ACADEMY
Team Adamon FIGHTING ACADEMY
Team Adamon FIGHTING ACADEMY
<br>
Team Adamon FIGHTING ACADEMY<br>
Team Adamon FIGHTING ACADEMY<br>
</p>
I know I could count the number of words and put some <br> tags,
but do you know a more elegant solution?
Seems that TCPDF shows the whitespace.
<td>
Line
</td>
will have this undesired indentation, while
<td>Line
</td>
won't. Also remove whitespace after <br /> tags. Same goes to whitespace between the opening <p> and its contents.
EDIT: Removed previous suggestions about switching to writeHTMLCell(), using writeHTML() $cell parameter set to true and removing the cellpadding.
I ran in the same issue yesterday.
As #Matvey Andreyev said, TCPDF does make a difference between
<td>
foo
<td>
and
<td>foo</td>
a workaround would be to wrap your td value in a <div> this would force the lines to start with the same indentation
the following should work
<td><div>first line<br />second line<br /> third line</div></td>
I have been trying to get text after a table in HTML but for some reason I cannot get this to work. I have tried using div, padding and margin on the table but nothing seem to work. No matter what I do the text always end up behind the first row of the table unless I use </br>.
Here is my HTML:
<div>
<h2 align=left>1. Delivery schedule</h2>
<body> The table below list the various delivery cycles per store:</body>
<br>
<br/>
<p>
<table border="1" align="left" width="61%" height="100px" frame="border">
<tr>
<th height="30" bgcolor="#002387">Store name</th>
<th height="30" bgcolor="#002387">Order deadline</th>
<th height="30" bgcolor="#002387">Delivery lead time from approval date</th>
</tr>
<tr>
<td colspan="3" bgcolor="#002387" ><font color="#FFFFFF"> Cycle 1</font></td>
</tr>
<tr>
<td>Borehamwood</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
<tr>
<td>Hemel</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
</table>
</div>
<importantLink>Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</importantLink>
Your code is bleeding from many wounds. First of all, you should forget about the align attribute, and use a CSS class instead.
.align-left {
text-align: left;
}
<h2 class="align-left">1. Delivery schedule</h2>
Then, you have an unclosed <p> tag right before your table, which could be causing your problem. Having invalid markup can lead to unexpected results. And finally, importantLink - depending on your <!DOCTYPE> - is likely not valid (you have a doctype, right?). Use a standard element like an <a> tag, which actually means that it's a link, and if you want to be able to tell it apart from the rest, use a class or id tag to give it a reusable/unique name, respectively. In your case, the text you are presenting in that tag is nothing like a link, so I suppose a <p> tag is the most suited for your case.
<p class="importantLink">Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</p>
usually html elements go one after another unless you give an element a property such as float:left or float:right or in your case align:left so elements after the table won't be under that table, they will be positioned on it's right and from the top.
if you want that link to be after the table (under that table) remove the align:left from the table,
and when writing HTML make sure the opening and closing tags are the same and that your content is inside the body tag, here is the correction for that:
<html> <!--<div>-->
<body>
<h2 align=left>1. Delivery schedule</h2>
<p> The table below list the various delivery cycles per store:</p>
<br>
<br/>
<div><!--<p>-->
<table border="1" align="left" width="61%" height="100px" frame="border">
<tr>
<th height="30" bgcolor="#002387">Store name</th>
<th height="30" bgcolor="#002387">Order deadline</th>
<th height="30" bgcolor="#002387">Delivery lead time from approval date</th>
</tr>
<tr>
<td colspan="3" bgcolor="#002387" ><font color="#FFFFFF"> Cycle 1</font></td>
</tr>
<tr>
<td>Borehamwood</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
<tr>
<td>Hemel</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
</table>
</div>
<importantLink>Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</importantLink>
</body>
<html>
this line <table border="1" align="left" width="61%" height="100px" frame="border">
is causing your issue, either remove align:left or change <importantLink> to <importantLink style="clear:both">
If you want the text within the <importantLink> to be displayed below the table you insert text in a div tag as below:
<div style="clear:both">
<importantLink>Your text comes here....</importantLink>
</div>
Replace your importantLink with the three lines of code above.
I've got two TD's at the bottom left of my HTML email layout, but the first is not taking effect of the 140px width I've set, any obvious reason why?
http://jsfiddle.net/5xqvj/
<td class="blue-table" width="375px" valign="top">
<table class="blue-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_03.jpg" />
</td>
</tr>
<tr>
<td class="blue-table" width="20px"></td>
</tr>
<tr>
<td>
<img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_11.jpg" />
</td>
</tr>
<tr>
<td>
<p><strong>8X4 Concrete Mixers</strong><br />
<p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
</p>
</p>
</td>
</tr>
<tr>
<td width="140px">
<p><strong>Cars</strong><br />
2011 (61) TOYOTA Verso 2.0 D4-D TR Panoramic Roof 7-Seat 5dr Manual – c.39K miles.
</p>
</td>
<td width="186px"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_30.jpg" /></td>
</tr>
</table>
</td>
Looks like you've got two cells in your final row - and only one cell in each row above that. This means your table is effectively two columns wide, with the picture of the car in a tacked-on column by itself. This will be messing up the width calculations.
One way to handle this is to make the one-cell rows span two columns each, and leave the two-cell row as is. colspan will do this, and it is applied something like this:
<tr>
<td colspan="2">
<p><strong>8X4 Concrete Mixers</strong><br />
<p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
</p>
</p>
</td>
</tr>
You need to do this to every row.
This should give your width settings more predictable results.
You can double-check your table layout by giving your table cells a temporary border with CSS like this:
td {
border: 1px solid red;
}
Edit
Potentially a better solution would be to use CSS, and float: right the picture of the car (add a margin or padding to put some space around it). Then you can treat everything inside <td class="blue-table" width="375px" valign="top"> like a normal set of paragraphs and images and avoid colspan altogether. There is a long post about the merits or otherwise of using tables for layout here if you're interested: Why not use tables for layout in HTML?
Try this:
<td width="140">
or
<td style="width: 140px">
I basically have my page layout, however I have put my main content in a table in my main div. I need to change this up so I no longer have a table, instead have it all in divs. Below is my code for my main div and screenshot of the design, help would be appreciated.
<div id="mainDiv">
<h1>Places to go</h1>
<div id="divBreak"></div>
<table id="mainTable" rules="ROWS" frame="HSIDES">
<tr>
<td id="table1"><strong>Leeds Castle</strong><br>
Considered one of the most romantic castles in England, this historic site was originally the stately home of the Saxon royal family during the reign of Ethelbert IV in 856-860.</td>
<td id="table2"><img class="imageTable" src="./images/leeds.jpg" alt="leeds" name="imageTable"></td>
<td id="columnRight" rowspan="4"><strong>Welcome to Maidstone</strong><br>
Maidstone is the county town of Kent, England, 32 miles (51 km) south-east of London. The River Medway runs through the centre of the town linking Maidstone to Rochester and the Thames Estuary. Historically, the river was a source and route for much of the town's trade. Maidstone was the centre of the agricultural county of Kent, known as the Garden of England. There is evidence of a settlement in the area dating back to beyond the Stone Age. The town is within the borough of Maidstone. In 2001, the town had a population of 75,070. Maidstone's economy has changed over the years from being involved in heavy industry, to more light and service industries.<br>
<br>
<br>
<br>
<br>
<strong>Where we are</strong> <img src="./images/maidstone_map.gif" alt="Maidstone Map"> </td>
</tr>
<tr>
<td id="table3"><strong>Mote Park</strong><br>
Maidstone's largest park, is set in 450 acres of historic parkland. Within walking distance of Maidstone town centre it offers a pleasant and relaxing enviroment, making it a great place to spend the day.</td>
<td id="table4"><img class="imageTable" src="./images/mote.jpg" alt="Mote Park" name="imageTable"></td>
</tr>
<tr>
<td id="table5"><strong>History Museum</strong><br>
Our exceptional Museum is housed in a charming Elizabethan Manor House, in the centre of Maidstone - Kent's County Town. Each gallery will fascinate and surprise; with a wealth of exhibits and objects to see and enjoy as well as regular storytelling and children's holiday activities. Entry to our Museum is Free!</td>
<td id="table6"><img class="imageTable" src="./images/museum.jpg" alt="Maidstone Museum" name="imageTable"></td>
</tr>
<tr>
<td id="table7"><strong>River Boat</strong><br>
The Kentish Lady river boat offers a unique experience of the River Medway from a 1 hour trip to 3 hour cruises and is also the perfect setting for a private party.</td>
<td id="table8"><img class="imageTable" src="./images/boat.jpg" alt="Boat" name="imageTable"></td>
</tr>
</table>
</div>
divs are block elements and naturally display one below the other (vertically) as opposed to inline elements like spans that display one after each other horizontally.
Knowing that you can alter this default behavior easily. This is a very simple 5 minute tutorial that will show you how to create table like display with divs http://www.barelyfitz.com/screencast/html-training/css/positioning/ .