mzpresto
08-06-2012, 07:26 PM
Hi
I have tried to get my code a bit more organised before posting this time, but I am out of my depth now. I did get something to work after trial and error in Chrome Firefox etc, I use IE6 at work and it looks baaaad.
I have about a foot of white spacing under my image and text... Also sometimes the scrolling marquee is higher up than it's containing box on some browsers
I used a minus number on the position relative, which kind of worked but I guess there must be a better way would anyone mind taking a look at this code and telling me if it even makes sense??? Thanks
Here is the test page I am trying to get right, ignore the links for now thanks
http://vicarscafebistro.co.uk/test.html
The 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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<title>Vicars Cafe Bistro - Food For Thought</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- //// Styles// -->
<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />
<!-- // Scripts// -->
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.skitter.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.animate-colors-min.js"></script>
<script>
$(function(){
$('.box_skitter_large').skitter({label: false, numbers: false, interval: 4500});
});
</script>
</head>
<body>
<div class="container">
<div class="header"><!-- end .header --></div>
<div class="menubg"><!-- end .menubg -->
<div class="menucont"><!-- end .menucont -->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Menus</a>
<ul>
<li><a href="breakfast.html">Breakfast</a></li>
<li><a href="lunch.html">Lunch</a></li>
<li><a href="bistro.html">Bistro</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a> </li>
<li><a href="group.html">Groups</a></li>
<li><a href="contacts.html">Contact us</a></li>
<li><a href="support.html">Support us</a></li>
</ul>
<!-- end .header --></div>
<!-- end .menubg --></div>
<div class="content">
<div class="content2">
<div class="border_box">
<div class="box_skitter box_skitter_large">
<ul>
<li><img src="Images/Vicars.jpg" class="cubeRandom" /></li>
<li><img src="Images/large02.jpg" class="block" /></li>
<li><img src="Images/large03.jpg" class="cubeStop" /></li>
</ul>
</div>
</div>
<div class="front_text">
<h3>What we are</h3>
<p class="textspace">Vicars Café Bistro: a busy eatery in the very heart of the famous Saltaire World Heritage site. We are run with a Christian outlook and a vision to serve the community, aiming to encourage people to look at Christianity in a different light.</p>
<p> </p>
<h3>When we began</h3>
<p class="textspace">We have been open since 2007 and have achieved Social Enterprise status, and continue to provide high-quality homemade food from locally sourced and fair-trade ingredients, serving to a wide cross-section of the local community, as well as visitors and tourists.</p>
<p> </p>
<h3>Evening Bistro</h3>
<p class="textspace">Alongside our busy café we run an evening Bistro on Fridays and Saturdays. A selection of seasoned dishes (including meat, fish, and vegetarian options) are available, with a menu which changes on a monthly basis. From a table for one to a group of 24, we can cater to your needs- if you’re planning a celebratory meal out, why not choose Vicars?</p>
<p> </p>
<h3>Whats on </h3>
<p class="textspace">We host several group events in our <a href="group.html#Redroom">Red Room Lounge</a>, such as our popular weekday <a href="group.html#mum">Mum and Baby Groups</a>, <a href="group.html#knit">‘Knitterati’</a> knitting sessions, and weekend Storytelling group <a href="group.html#story">'Tell Me Another'</a>. The Red Room is also available for local artists to exhibit their work, and the space is available to hire for events. We proudly continue to support the efforts of local events and groups such as the Arts Trail and Saltaire Festival.</p>
<p> </p>
<h3>What are you waiting for?</h3>
<p class="textspace">Why not come along to Vicars, and try some of our fair-trade coffee, Cosy-Teas, delicious homemade food, all in good company and warm surroundings?</p>
<p> </p>
</div>
</div>
<!-- end .content --></div>
<div class="footer">
<p class="footertext"><marquee BEHAVIOR=SCROLL DIRECTION=Left width=940 SCROLLAMOUNT=10 SCROLLDELAY=120>
New lunch menu is now available
</marquee></p>
<div class="footertext2">
<ul>
<li>Tel: 01274 597818</li>
<li>Email: enquiries@vicarscafebistro.co.uk</li>
<li>Address: 79 Victoria Road, Saltaire, West Yorkshire, BD18 3JS</li>
<li class="footertext"></li>
</ul>
</div>
<div class="footerbutton">
<img src="buttons.png" alt="Social Media" width="200" height="70" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="0,0,63,61" href="https://www.facebook.com/pages/Vicars-Cafe-Bistro/108831007523" target="_blank" alt="Facebook" />
<area shape="rect" coords="68,4,129,58" href="http://twitter.com/#!/VicarsCafe" target="_blank" alt="Twitter" />
<area shape="rect" coords="133,5,187,61" href="mailto:vicarscafebistro@googlemail.com" alt="Email" />
</map>
</div>
<!-- end .footer --></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
The CSS
@charset "utf-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
background-color: #000000;
background-image: url(../Images/Gallery/bg.jpg);
background-repeat: repeat-x;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
float: none;
right: 0px;
bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
}
h3 {
color: #279f95;
font-style: italic;
border-bottom-style: dotted;
border-bottom-width: thin;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bolder;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 1047px;
background: #FFF;
margin: 0 auto;
}
.menubg {
background-image: url(../menu.jpg);
height: 60px;
width: 1047px;
margin: 0 auto;
}
.menucont {
position: relative;
left: 38px;
width: 968px;
top: 9px;
}
.content2 {
width: 968px;
right: 50px;
left: 40px;
height: 655px;
margin-left: 40px;
margin-top: 5px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.header {
background-color: #000;
background-image: url(../top3.png);
height: 231px;
width: 1047px;
}
.content {
background-image: url(../content.jpg);
background-repeat: repeat-y;
width: 1047px;
height: auto;
background-color: #000;
padding-top: 10px;
}
.footer{
background-color: #000;
background-image: url(../bottom.png);
height: 198px;
width: 1047px;
background-repeat: no-repeat;
position: relative;
}
.footertext{
color: #033;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: center;
position: absolute;
top: 30px;
right: 50px;
}
.footertext2{
color: #a6ff91;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
text-align: left;
position: absolute;
top: 80px;
left: 48px;
align:left;
width: 497px;
height: 76px;
font-style: italic;
text-decoration: none;
}
.footerbutton{
position: absolute;
top: 85px;
right: 37px;
align:right;
}
ul
{
list-style-type: none;
color: #c8faee;
font-size: 16px;
}
.textspace {
padding-top: 5px;
}
.border_box {
position: relative;
left: 8px;
top: 0px;
}
.front_text {
position: relative;
left: 480px;
top: -650px;
width: 475px;
}
Thanks :)
I have tried to get my code a bit more organised before posting this time, but I am out of my depth now. I did get something to work after trial and error in Chrome Firefox etc, I use IE6 at work and it looks baaaad.
I have about a foot of white spacing under my image and text... Also sometimes the scrolling marquee is higher up than it's containing box on some browsers
I used a minus number on the position relative, which kind of worked but I guess there must be a better way would anyone mind taking a look at this code and telling me if it even makes sense??? Thanks
Here is the test page I am trying to get right, ignore the links for now thanks
http://vicarscafebistro.co.uk/test.html
The 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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<title>Vicars Cafe Bistro - Food For Thought</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- //// Styles// -->
<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />
<!-- // Scripts// -->
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.skitter.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.animate-colors-min.js"></script>
<script>
$(function(){
$('.box_skitter_large').skitter({label: false, numbers: false, interval: 4500});
});
</script>
</head>
<body>
<div class="container">
<div class="header"><!-- end .header --></div>
<div class="menubg"><!-- end .menubg -->
<div class="menucont"><!-- end .menucont -->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Menus</a>
<ul>
<li><a href="breakfast.html">Breakfast</a></li>
<li><a href="lunch.html">Lunch</a></li>
<li><a href="bistro.html">Bistro</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a> </li>
<li><a href="group.html">Groups</a></li>
<li><a href="contacts.html">Contact us</a></li>
<li><a href="support.html">Support us</a></li>
</ul>
<!-- end .header --></div>
<!-- end .menubg --></div>
<div class="content">
<div class="content2">
<div class="border_box">
<div class="box_skitter box_skitter_large">
<ul>
<li><img src="Images/Vicars.jpg" class="cubeRandom" /></li>
<li><img src="Images/large02.jpg" class="block" /></li>
<li><img src="Images/large03.jpg" class="cubeStop" /></li>
</ul>
</div>
</div>
<div class="front_text">
<h3>What we are</h3>
<p class="textspace">Vicars Café Bistro: a busy eatery in the very heart of the famous Saltaire World Heritage site. We are run with a Christian outlook and a vision to serve the community, aiming to encourage people to look at Christianity in a different light.</p>
<p> </p>
<h3>When we began</h3>
<p class="textspace">We have been open since 2007 and have achieved Social Enterprise status, and continue to provide high-quality homemade food from locally sourced and fair-trade ingredients, serving to a wide cross-section of the local community, as well as visitors and tourists.</p>
<p> </p>
<h3>Evening Bistro</h3>
<p class="textspace">Alongside our busy café we run an evening Bistro on Fridays and Saturdays. A selection of seasoned dishes (including meat, fish, and vegetarian options) are available, with a menu which changes on a monthly basis. From a table for one to a group of 24, we can cater to your needs- if you’re planning a celebratory meal out, why not choose Vicars?</p>
<p> </p>
<h3>Whats on </h3>
<p class="textspace">We host several group events in our <a href="group.html#Redroom">Red Room Lounge</a>, such as our popular weekday <a href="group.html#mum">Mum and Baby Groups</a>, <a href="group.html#knit">‘Knitterati’</a> knitting sessions, and weekend Storytelling group <a href="group.html#story">'Tell Me Another'</a>. The Red Room is also available for local artists to exhibit their work, and the space is available to hire for events. We proudly continue to support the efforts of local events and groups such as the Arts Trail and Saltaire Festival.</p>
<p> </p>
<h3>What are you waiting for?</h3>
<p class="textspace">Why not come along to Vicars, and try some of our fair-trade coffee, Cosy-Teas, delicious homemade food, all in good company and warm surroundings?</p>
<p> </p>
</div>
</div>
<!-- end .content --></div>
<div class="footer">
<p class="footertext"><marquee BEHAVIOR=SCROLL DIRECTION=Left width=940 SCROLLAMOUNT=10 SCROLLDELAY=120>
New lunch menu is now available
</marquee></p>
<div class="footertext2">
<ul>
<li>Tel: 01274 597818</li>
<li>Email: enquiries@vicarscafebistro.co.uk</li>
<li>Address: 79 Victoria Road, Saltaire, West Yorkshire, BD18 3JS</li>
<li class="footertext"></li>
</ul>
</div>
<div class="footerbutton">
<img src="buttons.png" alt="Social Media" width="200" height="70" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="0,0,63,61" href="https://www.facebook.com/pages/Vicars-Cafe-Bistro/108831007523" target="_blank" alt="Facebook" />
<area shape="rect" coords="68,4,129,58" href="http://twitter.com/#!/VicarsCafe" target="_blank" alt="Twitter" />
<area shape="rect" coords="133,5,187,61" href="mailto:vicarscafebistro@googlemail.com" alt="Email" />
</map>
</div>
<!-- end .footer --></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
The CSS
@charset "utf-8";
/* CSS Document */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
background-color: #000000;
background-image: url(../Images/Gallery/bg.jpg);
background-repeat: repeat-x;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
float: none;
right: 0px;
bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
}
h3 {
color: #279f95;
font-style: italic;
border-bottom-style: dotted;
border-bottom-width: thin;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bolder;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 1047px;
background: #FFF;
margin: 0 auto;
}
.menubg {
background-image: url(../menu.jpg);
height: 60px;
width: 1047px;
margin: 0 auto;
}
.menucont {
position: relative;
left: 38px;
width: 968px;
top: 9px;
}
.content2 {
width: 968px;
right: 50px;
left: 40px;
height: 655px;
margin-left: 40px;
margin-top: 5px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.header {
background-color: #000;
background-image: url(../top3.png);
height: 231px;
width: 1047px;
}
.content {
background-image: url(../content.jpg);
background-repeat: repeat-y;
width: 1047px;
height: auto;
background-color: #000;
padding-top: 10px;
}
.footer{
background-color: #000;
background-image: url(../bottom.png);
height: 198px;
width: 1047px;
background-repeat: no-repeat;
position: relative;
}
.footertext{
color: #033;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: center;
position: absolute;
top: 30px;
right: 50px;
}
.footertext2{
color: #a6ff91;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
text-align: left;
position: absolute;
top: 80px;
left: 48px;
align:left;
width: 497px;
height: 76px;
font-style: italic;
text-decoration: none;
}
.footerbutton{
position: absolute;
top: 85px;
right: 37px;
align:right;
}
ul
{
list-style-type: none;
color: #c8faee;
font-size: 16px;
}
.textspace {
padding-top: 5px;
}
.border_box {
position: relative;
left: 8px;
top: 0px;
}
.front_text {
position: relative;
left: 480px;
top: -650px;
width: 475px;
}
Thanks :)