3 Replies - 932 Views - Last Post: 24 April 2013 - 10:37 PM

#1 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

insert table/footer problem?

Posted 24 April 2013 - 06:10 PM

I'm using css and html together. I added a table in a large div but when I put the table in the footer (wich has the copyright, name...) inserts itself over the table? It's as if closing divs and closing the table or order doesn't matter? Any cool videos would be nice as well.

css:
body {   
   	background-color: #990000;  
    	font-family: Arial, Helvetica, sans-serif;
}
#wrapper { 
	width: 70%;    
        min-width: 966px;  
         margin-left: auto;  
        margin-right: auto;  
         
	-webkit-box-shadow: 5px 5px 25px #6a652a; 
	-moz-box-shadow: 5px 5px 25px #6a652a;
	box-shadow: 5px 5px 25px  #6a652a;
}
.container {
	width: 966px;
	margin-top: auto;
}
.header {
	width: 966;
	height: 165; 
	background-image: url(images/clayoven_01.jpg);
        background-repeat: no-repeat;
	border: 0;
	margin-bottom: 0;
}
.nav {
	height: 59px;
	width: 966px;
	margin-top: 0;
	margin-bottom: 0;
	border: 0;
}
.largeright {
	background-image: url(images/largeright_11.jpg);
	float: right;
	height: 517px;
	width: 628px;
	margin-top: 0;
	padding-left: 20px;
	
}
.left {
	background-image: url(images/ClayOvenRestaurant_03.jpg);
	height: 516px;
	width: 288px;
	padding-left: 30px;
	background-repeat: no-repeat;
	float: left;
	border: 0;
	padding-top: 1px;
	font-family: Arial, Helvetica, sans-serif;
}
.middle {
	background-image: url(images/clayoven_10.jpg);
	height: 516px;
	width: 298px;
	margin-top: auto;
	padding: 1px 20px 0px 18px;
	float: left;
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
}
.middlephoto {
	height: 480px;
	width: 288px;
	margin-top: auto;
	padding: 20px 0px 0px 14px;
	float: left;
	border: 0;
	font-family: Arial, Helvetica, sans-serif;
}
.right {
	background-image: url(images/clayoven_11.jpg);
	height: 516px;
	width: 274px;
	float: right;
	background-repeat: no-repeat;
	border: 0;
	padding: 1px 20px 0px 18px;
	font-family: Arial, Helvetica, sans-serif;
}

.logo {
	float: left;
	height: 164px;
	width: 250px;
	left: 156px;
	top: 10px;
	position: absolute;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.smallmiddle {
	height: 251px;
	width: 298px;
	padding-top: 10px;
	padding-left: 10px;
	border: thin groove #F90;
	position:relative;
	top: 158px;
	left: 4px;
	font-size: 70%;
	-webkit-box-shadow: 1px 1px 1px #666231;
	-moz-box-shadow: 1px 1px 1px #666231;
	box-shadow: 1px 1px 1px #000033;
}
.smallleft {
	height: 192px;
	width: 253px;
	padding-top: 11px;
	padding-left: 10px;
	border: thin groove #F90;
	position:relative;
	top: 243px;
	left: 5px;
	font-size: 80%;
	color: #990000;
	text-size: .80em;
	-webkit-box-shadow: 1px 1px 1px #5a0305;
	-moz-box-shadow: 1px 1px 1px #5a0305;
	box-shadow: 1px 1px 1px #5a0305;
}
h1 { 
	color: #990000;  
     	font-family: Arial, Helvetica, sans-serif;
     	padding-left: 20px; 
     	font-size: 100%;
	font-wieght: bold;
}
h2 { 
	color: #990000;  
     	font-family: Arial, Helvetica, sans-serif;
     	padding-left: 05px; 
     	font-size: 100%;
	font-wieght: bold;
}
h3 {
	color: #990000;  
     	font-family: Arial, Helvetica, sans-serif;
	font-size: 60%;
}
.subnav	{
	padding: 20px 5px 5px 0px ;    
     	float: left;
	
}
.subnav.ul	{
	list-style-type: none;
	margin: 0;
	padding-left: 0;
	font-size: 1.2em;
}
.subnav a	{
	text-decoration: none;
	display: block;
}
.subnav a:link{  
	color: #940508;
}	
.subnav a:visited {
	color: #000033;
}
.subnav a:hover   {
	color: #6a652a;
}
.menuleft {
	height: 192px;
	width: 253px;
	padding-top: 11px;
	padding-left: 10px;
	border: thin groove #F90;
	position:relative;
	top: 200px;
	right: 36px;
	font-size: 80%;
	color: #990000;
	text-size: .80em;
	-webkit-box-shadow: 1px 1px 1px #5a0305;
	-moz-box-shadow: 1px 1px 1px #5a0305;
	box-shadow: 1px 1px 1px #5a0305;
}
table {
	width: 570px;
	margin: auto;
	
	border-color: solid #6a652a;
	border-spacing: 0;
}
thead	{
	background-color: #6a652a;
}
tbody	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: .70em;
}
td, th	{
	padding: 5px;
	border: 1px solid 3399cc;
	text-align: center;
}
.text 	{
	text-align: left;
}
tr	{
	
}
.footer {
	background-image: url(images/footer_12.jpg);
	color: #ffffff;
	background-repeat: no-repeat;
	text-align: center;
	margin-top: 0px;
	width: 966
	height: 27px;
	font-size: 60%;
	font-style: italic;
}
padding-top: 1px 10px 20px 48px;
	


html:

Is This A Good Question/Topic? 0
  • +

Replies To: insert table/footer problem?

#2 macosxnerd101  Icon User is offline

  • Self-Trained Economist
  • member icon




Reputation: 10767
  • View blog
  • Posts: 40,088
  • Joined: 27-December 08

Re: insert table/footer problem?

Posted 24 April 2013 - 06:14 PM

Moved to HTML/CSS.
Was This Post Helpful? 0
  • +
  • -

#3 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: insert table/footer problem?

Posted 24 April 2013 - 06:14 PM

In the effort to experiment I moved the footer outside the closing div, that's why the footer is below.

html:
<!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 charset="utf-8">
<title>Menu</title>
<link href="clayoven.css" rel="stylesheet">
</head>
 
<body>

<div id="wrapper">
  <div class="container">

    <div class="header"><img src="images/clayoven_01.jpg" width="966" 

height="165" border="0" /><div class="logo"><a href="index.html"><img 

src="images/clayovenlogo.png" alt="logo" width="246" height="164" 

border="0" longdesc="index.html" /></a></div></div>

    <div class="nav"><a href="index.html"><img 

src="images/clayoven_02.jpg" width="242" height="59" border="0" 

longdesc="index.html/></a><a href="index.html"><img 

src="images/clayoven_03.jpg" alt="Home" width="67" height="59" 

border="0" longdesc="index.html" /></a><a href="aboutus.html"><img 

src="images/clayoven_04.jpg" alt="About Us" width="107" height="59" 

border="0" longdesc="aboutus.html" /></a><a href="menu.html"><img 

src="images/clayoven_05.jpg" alt="Menu" width="72" height="59" 

border="0" longdesc="menu.html" /></a><a href="catering.html"><img 

src="images/clayoven_06.jpg" alt="Catering" width="100" height="59" 

border="0" longdesc="catering.html"/></a><a 

href="directions.html"><img src="images/clayoven_07.jpg" 

alt="Directions" width="116" height="59" border="0" 

longdesc="directions.html"/></a><a href="gallery.html"><img 

src="images/clayoven_08.jpg" alt="Gallery" width="85" height="59" 

border="0" longdesc="gallery.html"/></a><a href="contactus.html"><img 

src="images/clayoven_09.jpg" alt="Contact Us" width="177" height="59" 

border="0" longdesc="contactus.html" /></a></div>

<div class="left"><h1>Dinning Opportunities:</h1>
<h5><div class="subnav">
   <ul>
<a href="brunch.html">Brunch </a>
<a href="lunch.html">Lunch </a>
<a href="dinner.html">Dinner </a>
<a href="buffet.html">Buffet Specials </a></h5>
   
    </div>
	</div>
<div class="largeright"><h2>Content for  class "largeright"</h2>
<table border= "1" >

<thead>
    <tr>
	<th id="package">Package Names</th>
	<th id="description">Description</th>
	<th id="nights">Nights</th>
	<th id="cost">Cost per Person</th>
    </tr>
</thead>
<tbody>
   <tr>
	<td headers="package">Weekend Escape</td>
	<td headers="description"><div class="text">Two breakfasts, a 

trail map and a picnic snack</div></td>
	<td headers="nights">2</td>
	<td headers="cost">$450</td>
    </tr>
 <tr>
	<td headers="package">Zen Retreat</td>
	<td headers="description"><div class="text">Four breakfasts, a 

trail map, a pass for the daily sunrise Yoga session</td></div>
	<td headers="nights">4</td>
	<td headers="cost">$600</td>
    </tr>
 <tr>
	<td headers="package">Kayak Away</td>
	<td headers="description"><div class="text">Two breakfasts, 

two hours of kayak rental daily and a trail map</td></div>
	<td headers="nights">2</td>
	<td headers="cost">$500</td>
    </tr>
</tbody>
</tabel>
  </div>

  </div>
    </div>

</body>
</html>
.footer {
	background-image: url(images/footer_12.jpg);
	color: #ffffff;
	background-repeat: no-repeat;
	text-align: center;
	margin-top: 0px;
	width: 966
	height: 27px;
	font-size: 60%;
	font-style: italic;
}


Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,401
  • Joined: 08-June 10

Re: insert table/footer problem?

Posted 24 April 2013 - 10:37 PM

that doesn’t help anything. you must place CSS code into either a CSS file or a CSS section. the code of post #1 contains errors, though (the width/height of .footer and .header is missing the unit)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1