The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Positioning of text/table
NevNic
post Apr 2 2012, 06:21 AM
Post #1


Newbie
*

Group: Members
Posts: 16
Joined: 29-November 11
Member No.: 15,972



Please see: http://natured.org/Natured_default2.html

Although it looks fine in MS Expression, the text in the header table does not display properly.

Also, the table lower in the page with the Facebook, Twitter, etc. buttons, although it is align=center, is not centred on the page.

I cannot see why.

Code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Natured Trading - Food, Drinks And Other Products That Are Fair To The World We Live In</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Natured_default.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]--><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="maximum-scale=1,user-scalable=yes,width=800" />
<link rel="stylesheet" href="css/SliderPreview.css">
<link rel="stylesheet" href="css/royal-slider-5.1.css">

<style>
#myGallery1 {
width: 100%;
height: 400px;
}
.royalSlider .sgMidText {
font-size:14px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #033;
}
.royalSlider .sgSmallText {
font-size:18px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}

a:link {
color: #4185A8;
}
a:visited {
color: #4185A8;
}
a:hover {
color: #7cb1ab;
background-color: none;
text-decoration: none;
}
a:active {
color: #333333;
}
.tintButton {
background:no-repeat 0 0;
background-color:#33383e;
color:#EAEAEA;
cursor:pointer;
padding:5px 12px;

-webkit-transition: background-color .2s ease-out;
-moz-transition: background-color .2s ease-out;
-o-transition: background-color .2s ease-out;
transition: background-color .2s ease-out;
}
.tintButton:hover {
background-color:#EAEAEA;
color:#33383e;
}
.royalSlider .royalCaption {
position:absolute;
top:0;
left:0;
}
body {
background-image: url(images/background.jpg);
background-repeat: repeat-x;
margin-top: 10px;
}
.no-js body #container #wrapper #bottom {
height: 370px;
}
.no-js body #container #wrapper #bottom #left {
float: left;
height: 370px;
width: 550px;
}
.no-js body #container #wrapper #bottom #right {
float: right;
height: 370px;
width: 360px;
}
.auto-style2 {
vertical-align: bottom;
}
.auto-style6 {
color: #4185A8;
vertical-align: top;
text-align: right;
}
.auto-style9 {
color: #4185A8;
text-align: center;
}
.auto-style10 {
text-align: left;
}
.auto-style11 {
color: #4185A8;
}
.auto-style13 {
color: #4199A8;
}
.auto-style14 {
color: #FFFFFF;
text-align: center;
font-size: small;
}
.auto-style17 {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: small;
}
.auto-style19 {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.auto-style20 {
background-image: url('images/background.jpg');
}
</style>
<style type="text/css">
.style1 {
background-image: url('file:images/natured_header_resized.jpg');
}
.auto-style21 {
color: #FFFFFF;
font-size: small;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.auto-style22 {
text-align: center;
}
.auto-style23 {
font-family: Georgia, "Times New Roman", Times, serif;
}
.auto-style24 {
color: #7CB1AB;
}
.auto-style25 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
}
.auto-style26 {
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
}
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
(function() {
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
li.src = window.location.protocol + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
})();
</script>

</head>

<body>

<div id="masthead">
<table style="width: 100%; height: 103px" class="style1">
<tr>
<td>
<table style="width: 100%; background-image: url('images/natured_header_resized.jpg'); height: 99px;">
<tr>
<td><img alt="Nature'd Trading" height="82" src="images/new_natured_HEADER.png" width="397" /></td>
<td class="auto-style17">We sell to individuals and trade outlets delicious food, drinks and other awesome
products that are fair to the world we live in </td>
<td>
<a href="mailto:hello@natured.org?subject=Email From Website" title="We at Nature'd Trading look forward to your emails!">
<span class="auto-style21">hello@natured.org www.natured.org</span></a></td>
</tr>
</table>
</td>
</tr>
</table>


</div>

<div id="buffer">

</div>

<div id="nav-wrapper">
<ul id="nav">
<li class="auto-style19">
<a href="index.html" alt="Nature'd Trading Home Page" style="width: 90px; height: 25px">
<strong>HOME</strong></a></li>
<li class="auto-style19">
<a href="drinkswaters.html" alt="Nature'd Trading Drinks and Waters" style="width: 90px; height: 25px">
<strong>DRINKS</strong></a></li>
<li class="auto-style19">
<a href="snacks.html" alt="Nature'd Trading Snacks" style="width: 88px; height: 25px">
<strong>SNACKS</strong></a></li>
<li class="auto-style19">
<a href="chocolate.html" alt="Nature'd Trading Chocolate" style="width: 89px; height: 25px">
<strong>CHOCOLATE</strong></a></li>
<li class="auto-style19">
<a href="energy.html" alt="Nature'd Trading Energy Drinks" style="width: 90px; height: 25px">
<strong>ENERGY</strong></a></li>
<li class="auto-style19">
<a href="coffeetea.html" alt="Nature'd Trading Coffee and Tea" style="width: 89px; height: 25px">
<strong>COFFEE TEA</strong></a></li>
<li class="auto-style19">
<a href="more.html" alt="More products from Nature'd Trading" style="height: 25px; width: 90px">
<strong>MORE</strong></a></li>
<li class="auto-style19">
<a href="more.html" alt="All about Nature'd Trading" style="height: 25px; width: 89px">
<strong>ABOUT</strong></a></li>
<li class="auto-style19">
<a href="contact.html" alt="Contact Nature'd Trading" style="height: 25px; width: 90px">
<strong>CONTACT</strong></a></li>
</ul>
</div>
<div class="auto-style22">

<table style="width: 100%; height: 209px;">
<tr>
<td>
<img alt="" height="186" src="images/mainImage1.jpg" width="576" class="auto-style2" />
</td>
<td>
<table style="width: 100%">
<tr>
<td>
<a href="drinkswaters.html" title="Nature'd Trading - Drinks and Waters">
<img alt="" height="109" src="images/explore-transparent.gif" width="172" /></a>&nbsp;</td>
</tr>
<tr>
<td>
<p>
<a href="tradecontact.html" title="Nature'd Trading Wholesales">
<img alt="" height="109" src="images/wholesale-sales-transparent.gif" width="172" /></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>

<img alt="" height="166" src="images/header2.1.jpg" width="432" /><br />
<img alt="" height="303" src="images/new_natured_middy.png" width="912" />
<p class="auto-style9"><strong><span lang="en-gb">Nature'd Trading is</span> a new company formed by people who w</strong><span lang="en-gb"><strong>ish</strong></span><strong>
to enjoy their food and drink </strong><span lang="en-gb">a<strong>nd who,</strong></span><strong> at the same time as consuming</strong><span lang="en-gb"><strong>,</strong></span><strong> </strong></p>
<p class="auto-style9"><strong> like to make choices that help others in the world.</strong></p>
<p></p>
</div>
<div align="center">
<table class="auto-style20" style="width: 100%" align="center" cellpadding="2" cellspacing="3">
<tr>
<td style="width: 118px">
<a href="http://www.facebook.com/NaturedTrading" target="_blank" title="Follow Nature'd Trading on Facebook">
<img alt="" height="80" src="images/facebook-logo-transparent.gif" width="89" /></a></td>
<td style="width: 140px">
<a href="http://twitter.com/#!/NaturedTrading" target="_blank" title="Follow Nature'd Trading on Twitter">
<img alt="" height="91" src="images/twitter-logo-transparent.gif" width="127" /></a></td>
<td style="width: 143px">
<img alt="Pin It!" height="61" src="images/big-p-button.png" width="61" />&nbsp;</td>
<td><!-- Place this tag where you want the su badge to render -->
<su:badge layout="3"></su:badge></td></tr>
</table>
</div>
<div>
<table class="auto-style20" style="width: 100%" align="center">
<tr>
<td class="auto-style6" style="width: 118px">&nbsp;</td>
<td class="auto-style10" style="width: 363px">
<span lang="en-gb"><span class="auto-style13"><strong><br />
<br />
<span class="auto-style23">TOP SELLERS</span></strong></span><br />
<br />
<span class="auto-style11"><span class="auto-style23"><a href="drinkswaters.html">FENTIMANS
"BOTANICALLY BREWED" DRINKS</a></span><br class="auto-style23" />
<span class="auto-style23">
<a href="belu.html">BELU ECO-FRIENDLY BOTTLED WATER</a></span><a href="teapigs.html"><br class="auto-style23" />
<span class="auto-style23">TEAPIGS ETHICAL TEAS</span></a><br class="auto-style23" />
<span class="auto-style23">
<a href="eacoffee.html">ETHICAL ADDICTIONS COFFEE</a></span><br class="auto-style23" />
<span class="auto-style23">
<a href="brownbagsmall.html">BROWN BAG CRISPS</a></span><br />
</span></span></td>
<td style="width: 398px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 30000,
width: 360,
height: 100,
theme: {
shell: {
background: '#ffffff',
color: '#404040'
},
tweets: {
background: '#000000',
color: '#fbfcf4',
links: '#7bb9e3'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('naturedtrading').start();
</script>
</td>
</tr>
</table>

</div>

<div>

<table style="width: 100%; background-image: url('images/background.jpg');">
<tr>
<td class="auto-style26"><span class="auto-style25"><strong>
<span class="auto-style24">Nature'd Trading</span><br class="auto-style24" />
<span class="auto-style24">Unit B3, Station Approach * Penarth * Vale of Glamorgan * CF64 3EE

</span>

<br class="auto-style24" />
<span class="auto-style24">Tel.: 029 2071 1288 * Mobile: 07730 509233</span></strong></span><br />
<br />
</td>
</tr>
</table>

<table style="width: 100%; background-image: url('images/background.jpg');" cellpadding="2" cellspacing="3">
<tr>
<td><img alt="" height="75" src="images/eco.gif" width="115" /></td>
<td>
<img alt="" height="75" src="images/Fair_Trade_For_The_World.gif" width="75" /></td>
<td>
<img alt="" height="75" src="images/Organic_Food3.gif" width="56" /></td>
<td><img alt="" height="75" src="images/eco_hand.gif" width="72" /></td>
<td>
<img alt="" height="75" src="images/ETI-BIG-LOGO.gif" width="75" /></td>
<td>
<img alt="" height="75" src="images/Organic_Healthy_Food.gif" width="98" /></td>
<td><img alt="" height="75" src="images/eco2.gif" width="75" /></td>
<td>
<img alt="" height="75" src="images/Penarth_Greening.gif" width="107" /></td>

</tr>
</table>
<p class="auto-style14">&nbsp;</p>
<p class="auto-style14">Copyright@2012 Nature'd Trading. All rights reserved</p>
</div>

</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
NevNic
post Apr 3 2012, 01:22 AM
Post #2


Newbie
*

Group: Members
Posts: 16
Joined: 29-November 11
Member No.: 15,972



One more question please:

See: http://natured.org/Natured_default2_drinkswaters.html

Why has the table with the Facebook etc buttons now reverted to a left position, rather than centred?

Thanks

NevNic
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th July 2014 - 09:34 PM