How to insert table
I wanna insert a table just below the horizontal bar which is under the pic( sameo productions).
Have a look at this page http://vaibhav.phpnet.us/test.htm
When i try to insert below it everything else disappers. here is my html codeAnd here is my css style code<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Designer</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
</head>
<body>
<div id="wrap">
<div id="lefter">
<div id="lefttop">
</div>
<div id="left">
<h1>Navigation</h1>
<p><a href="#">Home</a><br/><a href="#">Portfolio</a><br/><a href="#">About Us</a><br/><a href="#">Pricing</a><br/><a href="#">Contact Us</a><br/></p>
</div>
<div id="leftbottom">
</div>
</div>
<div id="righter">
<div id="righttop">
</div>
<div id="right">
<h1>News</h1>
<p>Have some news here, something interesting. Short but of interest. Maybe results of a poll or something. </p>
<h1>Contact</h1>
<p>To Contact Us: <br/> Please email us at sameo @ paradise.net.nz or give us a call on 0800 make a page<br/> </p>
<h1>Recent</h1>
<p>Our most recent work includes that of <b>The Richmond Road Film Festival</b> and <b>Tabber</b>. We believe that these sites have been designed to meet quality standards.</p>
</div>
<div id="rightbottom">
</div>
</div>
<div id="pic" >
</div>
<div id="main" >
<h1>What It's All About</h1>
<p>Here is where you would put a main header, maybe news or something that you want everyone visiting your site to know. I would put what my site is about here. Please, if you use this design, give me a bit of credit! </p>
<h1>The News</h1>
<p>Another heading now, this one dedicated to news. the reason that I have put this header below the first header is because I feel that when I enter a new site that
I do not know, the last thing I want is to be bombarded with news rather than a small paragraph telling me what the site is about. </p>
<h1>Nearly There</h1>
<p>Heading number 3. I'm now just going to fill the rest of these headings with waffle, apple and other edible items.</p><p>Waffle and chips are great to eat, as well as fruit such as apples. My favourite would have to be nectarines and pears, although, I do like pizza. Waffle and chips are great to eat, as well as fruit such as apples. My favourite would have to be nectarines and pears, although, I do like pizza.
</p>
<h1>Final Heading</h1>
<p>Waffle and chips are great to eat, as well as fruit such as apples. My favourite would have to be nectarines and pears, although, I do like pizza.Waffle and chips are great to eat, as well as fruit such as apples. My favourite would have to be nectarines and pears, although, I do like pizza.</p>
</div>
<div id="bottom">
</div>
<div id="footer">
<p>Site Design By <a href="http://www.sameoproductions.co.nr">Sameo Productions</a></p>
</div>
</div>
</body>
</html>
body {
background: #000000 url(wrap.png) repeat;
color: #666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
}
a:link, a:visited {
color: #6CABF9;
text-decoration: underline;
}
a:hover, a:active {
text-transform: uppercase;
}
h1 {
border: 1px solid #FFF;
background: url(h1.JPG) center;
height: 20px;
width: 70%;
font-size: 16px;
text-align: left;
padding-left: 5px;
margin: 0 auto;
color: #FFF;
}
#wrap{
width: 800px;
height: 800px;
text-align: center;
margin: 0 auto;
}
#lefter{
width: 150px;
float: left;
height: 800px;
}
#left{
width: 150px;
height: 770px;
background: url(left.PNG) center;
}
#left p{
font-size: 16px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
color: #6CABF9;
font-family: arial;
font-weight: bold;
}
#lefttop{
width: 150px;
height: 29px;
background: url(lefttop.JPG) center;
}
#leftbottom{
width: 150px;
float: left;
height: 29px;
background: url(leftbottom.JPG) center;
}
#righter{
width: 150px;
float: right;
height: 800px;
}
#right{
width: 150px;
height: 770px;
background: url(right.PNG) center;
}
#right p{
font-size: 14px;
text-align: center;
padding-left: 10px;
padding-right:10px;
color: #6CABF9;
font-family: arial;
}
#righttop{
width: 150px;
height: 29px;
background: url(righttop.JPG);
}
#rightbottom{
width: 150px;
float: right;
height: 29px;
background: url(rightbottom.JPG);
}
#main{
width: 490px;
height: 660px;
background: url(main.PNG) center;
margin: 0 auto;
}
#main p{
font-size: 14px;
text-align: left;
}
#pic{
width: 490px;
height: 150px;
background: url(pic.JPG) center;
margin: 0 auto;
}
#bottom{
width: 490px;
height: 20px;
background: url(bottom.JPG) center;
margin: 0 auto;
}
#footer{
width: 100%;
height: 40px;
margin: 0 auto;
background: url(footer.JPG);
}
#footer p{
padding-top: 12px;
}
#topp{
width: 100%;
height: 40px;
margin: 20px;
background: url(topp.PNG);
}
CSS Codes
Reply With Quote
Bookmarks