Menu
Hi all, I’m trying to put a table inside a div and it seems to just sit outside the div. I’ve tried some things in CSS, but aren’t too sure what’s wrong :/
Cheers ?
HTML Code
[CODE]<html>
<head>
<link rel=”stylesheet” href=”stylesheet.css” />
<title>Menu | 55 Degrees </title>
</head>
<body>
<div id=”nav”>
<div id=”wrapper”>
<ul>
<a href=”index.html”><li>Home</li></a>
<li> | </li>
<a href=”menu.html”><li>Menu</li></a>
<li> | </li>
<a href=”events.html”><li>Events</li></a>
<li> | </li>
<a href=”contactus.html”><li>Contact Us</li></a>
</ul>
</div>
</div>
<div id=”wrapper”>
<div id=”header”>
<div class=”logo”></div>
<div class=”institute”></div>
<div class=”wifi”></div>
</div>
<div id=”contentleft”>
<div id”=”menu”>
<table border=”1″>
<tr>
<th>Snacks</th>
<th>Price</th>
</tr>
<tr>
<td> Cake of the day (per slice)</td>
<td>£1.50</td>
</tr>
<tr>
<td>Tray Bakes (per slice)</td>
<td>75p</td>
</tr>
<td>Freshly mad soup
and a bread roll*</td>
<td>£1.25</td>
</tr>
<td>Two slices of toast and butter
with jam</td>
<td>£1.45</td>
</tr>
<td>Bagels</td>
<td>£1</td>
</tr>
</tr>
<td>Croissants, scones, pain au chocolat, Danish pastries,
and cheese and crackers.</td>
<td>(Priced daily and subject to availability</td>
</tr>
</div>
</div>
<div id=”contentright”>
</div>
<div id=”footer”>
</div>
</div>
CSS Code:
The menu styling can be found as #menu
[CODE]*{
margin: 0px;
font-weight: 100;
}
body{
background-color:#FFDEAD;
}
#wrapper{
width:1000px;
margin:0 auto;
}
#nav{
width: 100%;
height: 40px;
background-color: #000;
}
#nav ul {
padding-top:10px;
float:right;
}
#nav ul li {
display:inline-block;
list-style:none;
color:#fff;
font-size: 16px;
font-family: arial;
-moz-transition:ease-in all 300ms;
-webkit-transition:ease-in all 300ms;
-o-transition:ease-in all 300ms;
}
#nav ul li:hover {
opacity:0.7;
position:relative;
right: 10px;
transition:ease-in all 300ms;
-moz-transition:ease-in all 300ms;
-webkit-transition:ease-in all 300ms;
-o-transition:ease-in all 300ms;
}
#nav ul a {
}
#header{
width: 100%;
height: 300px;
}
.logo{
width:140px;
height:210px;
background-image: url(Pictures/logo.jpg);
margin:auto;
position:relative;
top:50px;
}
.institute{
width:363px;
height:160px;
background-image: url(Pictures/ilogo.png);
margin:auto;
position:relative;
bottom:135px;
left:295px;
border:2px solid black;
}
.wifi{
width:363px;
height:200px;
background-image: url(Pictures/wifi.jpg);
margin:auto;
position:relative;
bottom:320px;
right:295px;
border:2px solid black;
}
#contentleft{
width: 50%;
height: 400px;
background-color: #333;
float:left;
}
.bal{
background-image: url(Pictures/rest.jpg);
width:250px;
height:95px;
margin:auto;
position:relative;
top:3px;
border:2px solid black;
}
#contentleft h1{
font-weight:3px;
font-family:century;
color:white;
text-decoration:underline;
}
#contentleft h2{
font-weight:2px;
font-family:century;
color:white;
text-decoration:underline;
}
#contentleft p1{
font-weight:1px;
font-family:century;
color:white;
}
#menu{
margin: 0 auto;
height:400;
width:100%;
}
#contentright{
width: 50%;
height: 400px;
background-color: #666;
float:left;
}
#contentright h1{
color:brown;
font-weight:2px;
font-family:century;
color:white;
}
.flask{
background-image: url(Pictures/flask.jpg);
width:250px;
height:333px;
margin:auto;
position:relative;
top:22px;
border:2px solid black;
}
#footer{
clear: both;
width: 100%;
height: 30px;
background-color: #000;
}
#footer ul {
padding-top:10px;
float:right;
}
#footer ul li {
display:inline-block;
list-style:none;
color:#fff;
font-size: 16px;
font-family: arial;
-moz-transition:ease-in all 300ms;
-webkit-transition:ease-in all 300ms;
-o-transition:ease-in all 300ms;
}
#footer ul li:hover {
opacity:0.7;
position:relative;
right: 10px;
transition:ease-in all 300ms;
-moz-transition:ease-in all 300ms;
-webkit-transition:ease-in all 300ms;
-o-transition:ease-in all 300ms;
}