I have a webpage I was trying to develop, but I can't figure out what the problem is with the layout. The page goes all out of shape and out of width when I include the code below.
This particular code comes out well when viewed on a browser, but when I want to add another row BETWEEN the people picture and the RED Footer, everything breaks
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Family Hotel</title>
</head>
<body>
<table style="border: 1px solid #223e86; width: 600px;" align="center">
<tr>
<td bgcolor ="#e4322d" valign="top" width="437" style="padding-left: 15px">
<h3><span style="font-family: Verdana,Geneva,sans-serif; color: #FFFFFF;">Why choose Family Hotel in Palmgrove as your holiday home for 2012? </span></h3>
</td>
<td align="left" valign="top" width="14"> </td>
<td valign="top" width="151"><img src="premises.png" alt="" border="0" height="107" width="150" /></td>
</tr>
<tr>
<td align="center" colspan="3" valign="top" style="font-family: Verdana,Geneva,sans-serif; color: #000000; padding-top: 8px; padding-left: 15px; padding-right: 15px;">
<img src="../Robot/Memberslogo-web-images/whitearrow_opt.jpeg">
<p />
</td>
</tr>
<!--I WANT THE COLUMN HERE-->
<tr>
<td bgcolor ="#e4322d" colspan="7" style="padding-left: 15px; padding-right: 15px;" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;">
Family Hotel Ltd - River Lane House - Shore Street - PalmGrove - 76349L
+1 (0) 434 769 789 - www.mywebsite.com<br />
info#mywebsite.com
</span></p>
</td>
</tr>
</table>
</body>
</html>
Here's the code I want to insert in between the People image and the red footer.
<tr>
<td>
<table>
<tr>
<td>
<img src="premises.png" align="center" width="120px" height="128px"/>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0" style="width:460px; padding:35px 0; background: #E4322D; border-radius:14px; text-align:center; font-size:16px; font-family: Verdana,Geneva,sans-serif; color:#FFF;">
<tr>
<td> We are a small family-run hotel, as such you are sure to have a full personal experience. For the last 12 years we have consistently been ranked as one of the best family-run hotels in Palmgrove.
</td>
</tr>
</table>
</td>
</tr>
Here's the images of what they look like:
The last piece of code produces this image - which is what I want to insert in the page between the people picture and the red footer.
Update: Here's what the page looks like - the top column pushes to the left. It should stretch across and not push to one side: (
Try this site. It will tell you what's wrong with your code:
HTML Validator
One problem caught by the validator is that align cannot be "center"
Also, if that didn't work, do you realize that the code will try to stuff the 2 tables into the first 2 columns of your "master table"?
For example, here is what you basically have:
<tr>
<td>
<td>
<td>
<tr>
<td> //3 columns wide
<tr>
<td>
<td>
<tr>
<td> //7 columns wide
So, you are kind of saying, 3 columns then 3 columns then 2 columns then 7 columns.
I tried to do a quick edit. Maybe the following works?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Family Hotel</title>
</head>
<body>
<table style="border: 1px solid #223e86; border-bottom:none; width: 600px;" align="center">
<tbody>
<tr>
<td bgcolor="#e4322d" valign="top" width="937" style="padding-left: 15px">
<h3><span style="font-family: Verdana,Geneva,sans-serif; color: #FFFFFF;">Why choose Family Hotel in Palmgrove as your holiday home for 2012? </span></h3>
</td>
<td valign="top" width="151"><img src="premises.png" border="0" height="107" width="150" /></td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #223e86;border-top:none; width: 600px;" align="center">
<tbody>
<tr>
<td colspan="6" align="center" valign="top" style="font-family: Verdana,Geneva,sans-serif; color: #000000; padding-top: 8px; padding-left: 15px; padding-right: 15px;"><img src="../Robot/Memberslogo-web-images/whitearrow_opt.jpeg" />
<p> </p>
</td>
</tr>
<tr>
<td colspan="3">
<table>
<tbody>
<tr>
<td><img src="premises.png" align="center" width="120px" height="128px" /></td>
</tr>
</tbody>
</table>
</td>
<td colspan="3">
<table cellpadding="0" cellspacing="0" style="width:460px; padding:35px 0; background: #E4322D; border-radius:14px; text-align:center; font-size:16px; font-family: Verdana,Geneva,sans-serif; color:#FFF;">
<tbody>
<tr>
<td>We are a small family-run hotel, as such you are sure to have a full personal experience. For the last 12 years we have consistently been ranked as one of the best family-run hotels in Palmgrove.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6" bgcolor="#e4322d" style="padding-left: 15px; padding-right: 15px;" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;"> Family Hotel Ltd - River Lane House - Shore Street - PalmGrove - 76349L
+1 (0) 434 769 789 - www.mywebsite.com<br /> info#mywebsite.com </span></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This is a limitation of colspan. Even if all the column spans add up to the same for each row, at least one of your rows must consist of individual cells, otherwise you can't specify the widths correctly.
You are using some "old style coding" there ;)
The TR that you are inserting does not have the necessary amount of TD's inside it, thus causing the layout to break... or you forgot a "colspan" somewhere!
I believe that this is enough to cause what you are saying.
(I have not tested this! It's just an analysis by your code).
Related
I'm thinking this should be simple but I'm having massive problems getting something to work.
I basically want to create a table with a cell of fixed width which brings in data from a database whilst preserving line breaks and wraps the text should it be wider than the table width. It's for a helpdesk notification so the text could be details or a request or a link to a particular website etc.
<!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">
<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 14px">
<table style="width: 700px; border: 20px solid #00AB66;table-layout:fixed">
<tr>
<td style="text-align: center">LOGO</td>
</tr>
<tr>
<td bgcolor="#000000" style="text-align: center; color: #FFFFFF; font-size: 18px">
Review Request</td>
</tr>
<tr>
<td>Dear XXXX<br />
The Service desk have xxxxx</td>
</tr>
<tr>
<td bgcolor="#000000" style="color: #FFFFFF; text-align: center; font-size: 18px">
Request Summary</td>
</tr>
<tr>
<td>
<table style="width: 100%;table-layout:fixed">
<tr>
<td style="text-align: right; width: 158px">ID:</td>
<td>XXXXX</td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Title:</td>
<td>XXXXX</td>
</tr>
<tr>
<td style="text-align: right; width: 158px"><strong>Description</strong></td>
<td>
<pre style="font-size:14px;font-family:'Trebuchet MS';word-break:break-all;white-space: pre; width:75%">
dfdsfdsfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</pre></td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Requested By:</td>
<td> </td>
</tr>
<tr>
<td style="text-align: right; width: 158px">Review Instructions:</td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
The template should support outlook and web based email like office 365. This is what currently happens.
With the white-space:pre-wrap in as instructed, the preview in expression web is this. Could it be the tool which is the issue?
Removing the <pre> and moving the inline styling to the nested <td> fixed this for me as well as removing the inline styling white-space: pre; fixed this for me.
Testing this section with a 144 character fake word is also bound to cause issues when you test an email since some devices wont break that into hyphens for multiple lines.
You may also want to consider using spacers for the sides to maintain consistency.
My question is that how can I use multiple link in one cell?
My html view is this and I want to have link on home, products and contact us.
My homework is design a website with table:
My code is :
<!doctype html>
<html>
<head>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
th, td {
padding: 10px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022"
height="20px" align="left" >
<td colspan="3" > home products contact us
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
</table>
</body>
</html>
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
th, td {
padding: 10px;
}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022" height="20px" align="left" >
<td colspan="3" >
home
products
contact us
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
</table>
Just add links to your text, for example change:
contact us
to
contact us
Like this maybe:
home products contact us
home
products
contact us
Use the above code to replace the below one
<td colspan="3" > home products contact us
Just add anchor tags and below css
home
products
contact us
Css:
a {
text-decoration:none;
}
I'm building an html only eBlast. I have on table that lives inside of a which holds body copy. It is pushing itself outside of the containing table. How can I make this sit inside the container where it is supposed to be?
Here's what it's doing: http://zachkeller.net/annie_moses/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>The Song of Annie Moses</title>
<style type="text/css">
#backgroundTable {
table-layout:fixed;
width: 650px;
background-image: url(images/background.jpg);
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="750px" width="650px" id="backgroundTable">
<tr>
<td align="center" valign="top" height="125px" width="650">
<img src="images/headline.png">
</td>
</tr>
<tr>
<td width="220px">
<table border="0" cellpadding="0" cellspacing="0" width="220px" height="375">
<tr>
<td>
<img src="images/cover.png">
</td>
</tr>
</table>
</td>
<td width="430px">
<table border="0" cellpadding="0" cellspacing="0" width="430px" height="375">
<tr>
<td>
<p>The Song of Annie Moses tells of a miraculous musical journey spanning four generations that brought a family to The Julliard School and world stages, including Carnegie Hall. The story is one of God plowing a path, and shaping their music and message for his purpose. Discover that God has placed within all of us a calling to express what we know with beauty and wonder.</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<img src="images/band.jpg">
</td>
</tr>
<tr>
<td align="center">
<p>The Annie Moses Band is a Christian family of Juilliard trained musicians dedicated to virtuosity in the arts. Add the veteran, award-winning, song writing talents of their parents, Bill and Robin Wolaver, and you have a dynamic group with roots in classical, pop, and jazz.</p>
</td>
</tr>
</table>
</body>
</html>
Add colspan="2" to all your <td> elements, which take the full width..
Moreover your HTML-Code is not good at all. Two important things: for html width-attribute you don't need px after the number. The second thing is, that you are creating a full <table> for only one <p>-Element.. I don't know why you are doing this..
This is the full code, which should work.. I fixed some other things, although it's still not perfect:
<html><head>
<title>The Song of Annie Moses</title>
<style type="text/css">
#backgroundTable {
table-layout:fixed;
width: 650px;
background-image: url(images/background.jpg);
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="750px" width="650px" id="backgroundTable">
<tbody><tr><td width="250"></td><td width="400"></td><tr>
<td align="center" valign="top" height="125" width="650" colspan="2">
<img src="images/headline.png">
</td>
</tr>
<tr>
<td>
<img src="images/cover.png">
</td>
<td>
<p>The Song of Annie Moses tells of a miraculous musical journey spanning four generations that brought a family to The Julliard School and world stages, including Carnegie Hall. The story is one of God plowing a path, and shaping their music and message for his purpose. Discover that God has placed within all of us a calling to express what we know with beauty and wonder.</p>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="images/band.jpg">
</td>
</tr>
<tr>
<td align="center" colspan="2">
<p>The Annie Moses Band is a Christian family of Juilliard trained musicians dedicated to virtuosity in the arts. Add the veteran, award-winning, song writing talents of their parents, Bill and Robin Wolaver, and you have a dynamic group with roots in classical, pop, and jazz.</p>
</td>
</tr>
</tbody></table>
</body></html>
Tables need to have equal number of columns per row. Row 2 has two columns, while all other rows have one. Remove the inner tables, set border=1 and you can easily see where your table is broken. As kostyan says above, you need to add colspans.
<table border="1" cellpadding="0" cellspacing="0" height="750px" width="650px" id="backgroundTable">
<tr>
<td align="center" valign="top" height="125px" width="650">
A
</td>
</tr>
<tr>
<td width="220px">
B
</td>
<td width="430px">
C
</td>
</tr>
<tr>
<td align="center">
D
</td>
</tr>
<tr>
<td align="center">
E
</td>
</tr>
</table>
need to set colspan correctly, your second row has 2 cells but rest only one
<td colspan="2"...
I Wonder if anyone can help me. I just started working with CSS and was looking to replicated one of the pages of a newsletter I saw. My main problem is that I can't seem to be able to insert the arrow image made with lots of people into the center of the page.
I have used lots of tables and inserting the image in a row breaks the page.
Would really appreciate your help.
Here's my code:
<html>
<head></head>
<body>
<table style="border: 1px solid #223e86;" border="0" width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
---------------------INSERT IMAGE IN THE CENTER OF ONE COLUMN ROW------------------
</tr>
<tr>
<td style="padding-left: 12px; font-family: Verdana,Geneva,sans-serif; font-size: 13px;">
LOT is proud to be launching <i>LOT
Careers</i>. This tailor-made online portal
will provide members and trainees with
free access to browse and apply for the
largest single source of LOT,
jobs worldwide.
<p />
As an LOT member you will be
able to search job vacancies relevant
to your qualification, geographical
location and sector. The site will also
offer comprehensive guidance, advice
and developments in the financial
recruitment process and with your career
management.</td>
<td>
<H2 style="font-family: Verdana,Geneva,sans-serif; font-size: 20px; text-transform:uppercase; color: #B00000; font-weight:bold;">FEATURES:</H2>
<pre style="font-family: Verdana,Geneva,sans-serif; font-size: 13px;">
* Expert careers content (news, videos,
articles, advice and information)
* Find out about the recruitment market
in a destination of your choice
* Search vacancies by job title, skills
required, region or LOT status
* Sign up to receive tailored email alerts
when relevant jobs are posted
* Upload and store your CV
* Apply for jobs with one click
* Debate the latest topics in the
Think Tank with other professionals
in the industry
</pre></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td style="padding-left: 12px; font-family: Verdana,Geneva,sans-serif; font-size: 13px;">
<i>LOT Careers</i> will also provide access to
thousands of LOT qualified jobseekers
for any organisation looking for the best
new talent.
</td>
<td style="padding-right: 12px; font-family: Verdana,Geneva,sans-serif; font-size: 11px; text-transform:uppercase; color: #B00000; font-weight:bold;">
Pre-register today at www.oursite.com
whether you’re interested in making
your next career move, or want to recruit
your next employee
</td>
</tr>
<tr><td> </td></tr>
<!--third one-->
<tr>
<td>
</td>
</tr>
<!--
<tr><td> </td></tr>
<!--forth one-->
<td colspan="7">
<table border="0" width="200" align="center" cellpadding="0" cellspacing="0">
<tr>
</tr>
<table>
<tr>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/MP_Finance_220110_opt.gif" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/RMS_opt.jpeg" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/bbc-120x60_opt.jpeg" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/STATESTREET_opt.jpeg" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/logo_opt.jpeg" alt="Smiley face" />
</td>
</tr>
</table>
<!--Footer-->
<table>
<tr>
<td width="600" bgcolor="#828279" colspan="7" style="padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF; font-size: 23px;">
Pre-register today at <a style="text-decoration:none" href="">www.oursite.com</a>
</span></p>
</td>
</tr>
</table>
</table>
</body>
</html>
Here's the image I want to insert in that column: http://i.stack.imgur.com/DvQ7F.jpg
table rows are not allowed to have content directly, you'll want to enclose the image within a td that has a column span of 2:
<tr>
<td colspan="2">
-----INSERT IMAGE IN THE CENTER OF ONE COLUMN ROW-------
</td>
</tr>
In addition, take care with your comments. Here you have an unclosed comment that will likely make the display of the code following this block unpredictable:
<!--
<tr><td> </td></tr>
<!--forth one-->
I am looking to have a picture, name of the person, links to photos, biography, life, tell about you! a map tag where the location will be shown, also at the right, there will be details like like, Born: Nationality: Ocupation, Trakcs:
Can any body help me with a semantic html structure style with CSS Please use http://jsfiddle.net/ to build it online Thanks.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your Yard Sales onproducts.line</title>
<link rel="stylesheet" href="" type="text/css" media="screen" />
</head>
<style type="text/css" >
#space {
margin-bottom:1.2em;
}
ul {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
li {
float: left; }
li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
</style>
<body>
<ul>
<li>Home</li>
<li>Members</li>
<li>Rollers</li>
<li>Info</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<div id="space">
Roberto Kirt
</div>
<!--<ul><li>'.$name2.'</li>
<li>'.$name2.'</li>
<li>'.$name2.'</li></ul>-->
<table width="1768" cellpadding="0" cellspacing="0" border="0.5">
<tr>
<td width="493" height="149"><img style="border:#666 1px solid;" src="images/profileimages/8.jpg" alt="Angel Pilier "align="left" width="100" height="130" border="1" /></td>
<td width="1275"><table width="880" border="0.5" cellpadding="0" cellspacing="0">
<tr>
<td width="145" height="31"> </td><td></td>
</tr>
<tr>
<td height="44" align="right">Born:</td><td width="735">1975-11-23</td>
</tr>
<tr align="right">
<td height="38"></td>
>
</tr>
<tr>
<td height="36" align="right">Died:</td><td width="735">0000-00-00</td>
</tr>
</table></td>
</tr>
<tr><td height="31" colspan="2"> </td></tr>
<tr>
<td height="31">Photos</td>
<td rowspan="7"><table width="885" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="145" height="31" align="right"> Nationality:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="25"> </td>
</tr>
<tr>
<td height="24" align="right">Spouse:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="28"> </td>
</tr>
<tr>
<td height="27" align="right">Ocupation:</td><td width="740">Pianist</td>
</tr>
<tr align="right">
<td height="27"> </td>
</tr>
<td height="27" align="right">Childhood:</td><td width="740"></td>
</tr>
<tr align="right"><td height="27"> </td>
</tr>
<td height="27" align="right">Tracks:</td><td width="740"></td>
</tr>
<tr align="right">
<td height="119"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"> Biography</td>
</tr>
<tr>
<td height="25"> Life</td>
</tr>
<tr>
<td height="26">Tell an Anecdote</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td><iframe width="700" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Rochester,+New York,+United States&sspn=0.119541,0.110378&ie=UTF8&hq=&hnear=Rochester,+New York,+United States&z=14&output=embed"></iframe></td>
<!--<img src="images/foto.jpg" alt="nada" width="422" height="165" />-->
</tr>
</table>
</body>
</html>
#fello, there lot of things in your layout
1) use external stylesheet as much as possible because if you written your css in the head of html page it's make that html page heavy to load & you have to right new css in every new page.
2) try to avoid using table based structure as much as possible .Use div instead of table because it's flexible to use check this for more.
3)didn't use <br/> to much .If you want to give spacing you can give with margin & padding .
4)ever browser have applied some there own default properties .So, avoid it you have to use reset sheet .
5)for semantic markup check these links :
a) http://www.html-and-css-tutorial.com/tutorial-3.html
b) http://css-tricks.com/snippets/html/html5-page-structure/
c) http://themeshaper.com/2009/06/24/creating-wordpress-theme-html-structure-tutorial/
As far as I judge your question, use of some CSS framework like twitter-bootstrap will give you a very good and responsive layout in very less time :)
You might want to use hcard. This and other microformats are described here.