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/ .
Related
I think I'm losing my mind, here is some very simple code. It works perfect in Firefox, but since the recent Chrome update (Version 91.0.4472.114), Chrome seems to ignore the width of cell 1 once colspan appears later in the table.
Any ideas?
<table width='773' border='3' cellspacing='0' cellpadding='0'>
<tr>
<td colspan='3'>Testing
</td>
</tr>
<tr><td width='260'>hello</td><td width='126'>hello</td><td width='387'>hello</td></tr>
<tr><td width='260'>hello</td><td colspan='2'>Nuclear fission was discovered in December 1938 by physicists Lise Meitner and Otto Frisch, and chemists Otto Hahn and Fritz Strassmann. Fission is a nuclear reaction and process of radioactive decay in which the nucleus of an atom splits into two or more smaller, lighter nuclei. The fission process releases a very large amount of energy. The discovery that a nuclear chain reaction was possible led to the development of nuclear power and nuclear weapons. Hahn and Strassmann bombarded uranium with slow neutrons, and discovered that barium had been produced (illustration pictured). Meitner and her nephew Frisch theorised, and then proved, that the uranium nucleus had been split, and published their findings in Nature. Meitner calculated that the energy released by each disintegration was approximately 200 megaelectronvolts, and Frisch observed this. By analogy with the division of biological cells, Frisch named the process "fission".</td></tr>
</table>
I actually have to insert a paragraph below the table header just like in the below-given image, but I don't know I'm not able to figure out how. everything I do is giving out a weird table. I need help with that
and this is the HTML I wrote
<table>
<!--Table header-->
<tr>
<th style="text-align:left">Stanford researchers find a quicker,<br>cheaper way to sort isotopes</th>
<th> </th>
<th style="text-align:left">Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend </th>
</tr>
<tr>
<td rowspan="10">
<p>BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.</p>
</td>
</tr>
</table>
Following what you wrote, you have three headers, so you need 3 cells (tds) in every row (or the equivalent). In the future, don't add an extra column for spacing, use CSS. (Plus what others have said in the comments.)
<table>
<!--Table header-->
<tr>
<th style="text-align:left">Stanford researchers find a quicker,<br>cheaper way to sort isotopes</th>
<th> </th>
<th style="text-align:left">Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend </th>
</tr>
<tr>
<td rowspan="10">
<p>BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.</p>
</td>
<td> </td>
<td>
<p>BY CYNTHIA HAVEN L.A. 2nd main content blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</td>
</tr>
</table>
You will probably have to add some CSS to the table and/or cells for spacing and alignment.
To take it to the next level, for example, remove the middle th and the middle td and add this CSS: th, td { padding: 0 10px; vertical-align: top; width: 50%; }.
HTML:
<table>
<tr>
<th>Stanford researchers find a quicker,<br>cheaper way to sort isotopes</th>
<th>Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend</th>
</tr>
<tr>
<td>BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.</td>
<td>Your Content</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
width: 100%;
border: 0;
}
th, td {
text-align: left;
padding: 16px;
width:calc(100%/2);
word-break:break-all;
}
Only in one HTML file:
<table style="border-collapse: collapse;width: 100%;border: 0;">
<tr>
<th style="text-align: left;padding: 16px;width:calc(100%/2);word-break:break-all;">Stanford researchers find a quicker,<br>cheaper way to sort isotopes</th>
<th style="text-align: left;padding: 16px;width:calc(100%/2);word-break:break-all;">Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend</th>
</tr>
<tr>
<td style="text-align: left;padding: 16px;width:calc(100%/2);word-break:break-all;">BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.</td>
<td style="text-align: left;padding: 16px;width:calc(100%/2);word-break:break-all;">Your Content</td>
</tr>
</table>
Only in one HTML file and without table:
<div id="myDiv">
<div style="display:flex;flex-direction:row;justify-content:space-between;width:100%;" class="title">
<div style="padding:4px 16px;width:45%;" class="title-child">
<h3>Stanford researchers find a quicker,<br>cheaper way to sort isotopes</h3>
</div>
<div style="padding:4px 16px;width:45%;" class="title-child">
<h3>Chance to dance: Enthusiasts fly to <br>Stanford for dance weekend</h3>
</div>
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;width:100%;" class="content">
<div style="padding:4px 16px;width:45%;" class="title-content">
<p>BY EMMANUEL ROMERO LA Cicero Richard Zare Professor Richard Zare in his lab. Whether it's the summer grass that tickles your feet or the red Bordeaux smacking on your palate, nearly every part of the world around you carries special chemical markers.
These markers, called isotopes, can tell scientists where the molecules that compose a substance are from, where they traveled and what happened to them along the way. But doing these analyses has been complex and costly. Now, Stanford chemists
have developed a new method to make isotopic analysis easier and less expensive.
<td>Your Content</p>
</div>
<div style="padding:4px 16px;width:45%;" class="title-content">
<p>Your Content</p>
</div>
</div>
</div>
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/
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'm finishing up a midterm project for an HTMl course and I'm working on my last page. Problem is, the table overflows to the right (when the browser isn't maximized) and I can't figure out how to fix it. Can anyone help?
I can't post a pic. (No rep)
The HTML:
<div id="rightcolumn">
<h2>Fuel Cells</h2>
<!--3 Column by 3 Row Layout using a Table-->
<table width="100%" border="0" cellpadding="6">
<caption>Fuel Cells as a Source of Green Energy</caption>
<tr>
<td colspan="3">The research and development of fuel cells is extremely important. Fuel cells are an important technology because they use hydrogen to create energy. Hydrogen is the most plentiful element in our universe, quite unlike oil. If the US ran on fuel cells we would finally be independent from oil. Also, hydrogen doesn’t need to be “mined” like oil. If we no longer needed oil we would save on the price we have been paying for decades. Hydrogen is both extremely abundant and a renewable resource. If hydrogen was used as our primary power source we wouldn’t ever need to worry about running out of it, like we do with oil and other fossil fuels. A cloudy day can stop solar panels from generating much electricity and a still day can stop wind power. With hydrogen however, weather wouldn’t affect the quantity of power fuel cells produce. This makes fuel cells far more reliable than other, alternative forms of “green” energy.
</td>
</tr>
<tr>
<td ><img src="FuelCellDiagram.png" width="335" height="232" alt="How Fuel Cells Work" /></td>
<td><img src="FuelCellhome.png" width="345" height="250" alt="Fuel Cell Powering Home" /></td>
<td><img src="FCCar.GIF" width="400" height="347" alt="How Fuel Cells power Cars" /></td>
</tr>
<tr>
<td colspan="3">Fuel cells are important because of their harmless byproducts. Water and heat, the byproducts, aren’t dangerous and could actually be useful. The heat generated by fuel cells could be used to heat homes or water, making fuel cells even more efficient. Fuel cells would allow us to power our cars as well as our homes. This would lead to an end of the use of gasoline or battery powered vehicles. Although cars are becoming more efficient, they are unable to match the efficiency of fuel cells. Our current gas powered vehicles produce harmful pollutants during fuel combustion. Battery powered vehicles are also harmful because of the pollutants that are byproducts of both creating and disposing of them. If the world could end its dependence on oil and transition to fuel cells, our pollution levels would be a fraction of what they are now. In China, many cities are filled with smog because of the way they are powered. If China were to replace their coal plants with fuel cells, the ever increasing smog throughout China would begin to fade. Also, we would no longer have to worry about pollution from oil spills or oil wells.
</td>
</tr>
</table>
<!--End of Columns/Table-->
</div>
and the CSS is:
#container {
margin: auto;
width:80%;
min-width:700px;
background-color:#93A5C4;
color:#000000;
border: 2px double #000000;
}
#rightcolumn {
margin-left:140px;
background-color:#ffffff;
color:#000000;
padding:10px;
}
td, tr, th {
padding: 10px;
margin-left:auto;
margin-right:auto;
text-align: left;
}
I can't edit the rightcolumn CSS though because I need it like that to display the other pages properly and I'm only allowed to use one CSS sheet for the entire site.
A quick solution would be to add a style of "overflow:scroll" in your declaration for the rightcolumn div.
<div id="rightcolumn" style="overflow:scroll">