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.
Related
I'm working on a school project, where we have to design a website with html 4.01 and must not use CSS at all. My Question is, how can I expand a table over the whole window height? I have tried the height attribute with a percantage value, but it didn't work. I couldn't find any good solutions for my problem since all of them used inline CSS or the style tag.
here is my code:
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>
If you specify the version as HTML5 and try to set height="...", it won't work. Since in HTML5 there isn't a height-attribute for table, it will be ignored.
Without CSS, the best you can do is:
Try deleting: <!DOCTYPE html>
and then add: height="100%" to <table>.
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table height="100%" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>
When I run it on Firefox or Chrome, it works just fine.
You should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100%.
body, html {
height: 100%;
}
table {
height: 100%;
}
I made a html email signature, opened it up in browser where it looks fine, and pasted it into my gmail signature section, and each individual block has now got padding in between, and some of the blocks are side by side instead of next to each other.
Strangely by some fluke I managed to get it to look fine on outlook.This is what it's supposed to look like this https://postimg.org/image/uytldx3zd/
Here is the code i'm using- what am I doing wrong?
Any fix would be much appreciated,
Thanks
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size: 0.0em; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<!-- Paste Code Under This Line
_________________________________________________________________________________ -->
<title>emailsignature_500flat</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (emailsignature_500flat.psd) -->
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href= callto:4411893280328><img src="https://s20.postimg.org/tk69dnist/emailsignature_500flat_01.jpg" width="254" height="50" alt=""><a href= callto:441189328032></td>
<td rowspan="3">
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/o8rcsyrl9/emailsignature_500flat_02.jpg" width="296" height="113" alt=""><a href=http://thereadinesscom.com></td>
</tr>
<tr>
<td>
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/s54ooxx59/emailsignature_500flat_03.jpg" width="254" height="32" alt=""></td>
</tr>
<tr>
<td>
<a href=https://www.linkedin.com/company/129626/><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href=mailto:info#thereadinesscomp.com><img src="https://s20.postimg.org/c6vyytq2l/emailsignature_500flat_05.png" width="550" height="146" alt=""><a href=mailto:info#thereadinesscomp.com></td>
</tr>
<tr>
<td colspan="2">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
<!-- Keep Pasted Code Above This Line!
_________________________________________________________________________________ -->
</html>
I found the following errors in your code.
missing closing anchor tags,
missing colspan
CSS should be inline always
Here is the HTML you need:
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<a href=https://www.linkedin.com/company/1296265><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt="" style="display: block; float: left; padding: 0; " /></a>
</td>
</tr>
</table>
</td>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt="" style="display: block; float: left; padding: 0;">
</td>
</tr>
</table>
Let me know if this works for you.
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 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).
HI ,
I am getting Gap(some white space) between the <HR> & <TABLE> tags in IE6. But the same code is working differently in IE8 & FF. Here is the my sample code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="display: inline; height: 100%;" id="printdiv">
<table width="70%" id="Tableprint">
<tbody>
<tr>
<td style="padding-left: 15px;">
<table width="100%" style="border: 0px solid rgb(204, 204, 204);">
<tbody>
<tr>
<td nowrap="" colspan="2">
<span class="formLabel">dev site</span>
<span class="bodyText">Transfer Secure </span></td>
</tr>
<tr>
<td nowrap="" align="left" width="50%" valign="bottom">
<span><b>Current Date:Wednesday, 02 Mar 2011, 01:42 IST</b></span>
<span><b>Report Date</b></span>
<span>Wednesday,20 Oct 2010</span></td>
<td align="right" valign="bottom">
<input type="button" id="Buttoncancel" value="BACK">
</td>
</tr>
</tbody>
</table>
<hr align="left" width="100%">
<table cellspacing="0" width="100%" style="border: 1px;">
<thead>
<tr>
<td style=" width: 10%; padding-left: 5px;"><b>Column1</b></td>
<td align="right" style="padding-bottom: 3px; font-weight: bold;">Credit</td>
</tr>
</thead>
</table>
<hr align="left" width="100%">
<div id="Footer">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td align="right">Test Data</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
If I add the following style then I am getting space in IE 8 & FF but the problem is in IE 6 I am seeing extra space around the <HR>
hr {
margin-bottom: 7px;
margin-top: 7px;
}
Please Help me in this.
Thanks in Advanceenter code here
Add this CSS:
table, tr, td, hr {
line-height: 1.15;
}
hr {
clear: both;
display: block;
*margin: -7px 0; /* ie7 and below */
}
This helped me, but the site isn't working properly, so here's a cached link.