14 replies [Last post]
NevNic
Offline
newbie
Last seen: 11 years 27 weeks ago
Timezone: GMT+7
Joined: 2011-03-18
Posts: 8
Points: 9

Please see: http://www.care-in-the-vale.com/care-in-the-vale/index.html

For the left-hand vertical navigation bar, I have been able to position this to the extreme left, i.e. lined up directly under the light blue strip to the left of the banner.

Try as I might, I cannot position the horizontal navigation bar to the extreme right, i.e. with the end of the bar directly under the light blue strip to the right of the banner.

Is this possible?

I am using MS Expression 4.

Thank you

NevNic (newbie)

CSS:

@charset "iso-8859-1";
body {
	font-family: Calibri;
	margin: 0;
	padding: 0;
	background-color: #193EBC; /*dark blue*/;
	color: #000000;
}
/*===============indicates no border around any image ============*/
body img {
	border: 0px;
	text-decoration: none;
}
/* ============ margins auto center the container on the page ==========*/
#container {
	margin: 10px auto 10px auto;
	padding: 30px;
	background-color: #ffffff;
	width: 80%;
	max-width: 1300px;
}
/*=================== styles for top banner ========================*/
#banner {
	margin: 10 0 10 0;
	background-position: center;
	padding: 10px;
	background-color: #C4E3F7;
	background-image: url('../care-in-the-vale/images/care-in-the-vale_banner.gif');
	height: 90px;
	background-repeat: no-repeat;
	color: #C4E3F7;
	max-width: 100%;
	max-height: 250px;
}
 
/*=================== styles for wrapping text ========================*/
 
#wrap {
	position: relative;
	font-size: large;
	width: 700px;
	padding: 50px 20px;
	margin: 0 auto;
	position: relative;
	border-top-color: #193EBC;
}
 
/*=================== styles for Home menu ======================*/
 
ul#css3menuhome,ul#css3menuhome ul{
	margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuhome ul{
	display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
ul#css3menuhome li:hover>*{
	display:block;}
ul#css3menuhome li:hover{
	position:relative;}
ul#css3menuhome ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menuhome{
	display:block;font-size:0;float:left;}
ul#css3menuhome li{
	display:block;white-space:nowrap;font-size:0;}
ul#css3menuhome>li,ul#css3menuhome li{
	margin: 0;
	background-color: #ffffff;
	padding-bottom: 0px;
}
ul#css3menuhome a:active, ul#css3menuhome a:focus{
	outline-style:none;}
ul#css3menuhome a,ul#css3menuhome a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menuhome ul li{
	float:none;margin:10px 0 0;}
ul#css3menuhome ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 14px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuhome li:hover>a{
	background-color:#ffc000;border-color:#C0C0C0;border-style:solid;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menuhome img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuhome img.over{
	display:none;}
ul#css3menuhome li:hover > a img.def{
	display:none;}
ul#css3menuhome li:hover > a img.over{
	display:inline;}
ul#css3menuhome li a.pressed img.over{
	display:inline;}
ul#css3menuhome li a.pressed img.def{
	display:none;}
ul#css3menuhome span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menuhome a{
	padding:10px;background-color:#ffffff;background-image:url("../care-in-the-vale/images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuhome li:hover>a,ul#css3menuhome li>a.pressed{
	background-color:#ffc000;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuhome ul li:hover>a,ul#css3menuhome ul li>a.pressed{
	background-color:#c4e3f7;background-image:none;font:bold 14px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuhome li.toplast>a{
	border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
 
/*=================== styles for top menu ======================*/
 
ul#css3menuh,ul#css3menuh ul{
	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:0px;border-style:solid;border-color:#ffffff;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuh ul{
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #ffffff;-webkit-box-shadow:3.5px 3.5px 5px #ffffff;box-shadow:3.5px 3.5px 5px #ffffff;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#ffffff;}
ul#css3menuh li:hover>*{
	display:block;}
ul#css3menuh li:hover{
	position:relative;}
ul#css3menuh ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menuh{
	display: block;
	font-size: 0;
	float: right;
	position: relative;
}
ul#css3menuh li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menuh>li,ul#css3menuh li{
	margin: 0;
	border-left-color: #FFFFFF;
	border-right-color: #FFFFFF;
	outline-color: #FFFFFF;
}
ul#css3menuh a:active, ul#css3menuh a:focus{
	outline-style:none;}
ul#css3menuh a,ul#css3menuh a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menuh ul li{
	border: 1px;
	float: none;
	margin: 10px 0 0;
}
ul#css3menuh ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuh li:hover>a{
	background-color:#ffc000;border-color:#C0C0C0;border-width:1px;border-style:solid;border-color:#5f5f5f;;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;}
ul#css3menuh img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuh img.over{
	display:none;}
ul#css3menuh li:hover > a img.def{
	display:none;}
ul#css3menuh li:hover > a img.over{
	display:inline;}
ul#css3menuh li a.pressed img.over{
	display:inline;}
ul#css3menuh li a.pressed img.def{
	display:none;}
ul#css3menuh span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menuh ul span{
	background-image:url("../care-in-the-vale/images/arrowsub.png");padding-right:28px;}
ul#css3menuh a{
	padding:10px;background-color:#ffffff;background-image:url("../care-in-the-vale/images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuh li:hover>a,ul#css3menuh li>a.pressed{
	background-color:#ffc000;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;border-width:1px;border-style:solid;border-color:#5f5f5f;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuh ul li:hover>a,ul#css3menuh ul li>a.pressed{
	background-color:#c4e3f7;background-image:none;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuh li.topfirst>a{
	height:18px;line-height:18px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menuh li.topfirst:hover>a,ul#css3menuh li.topfirst>a.pressed{
	line-height:18px;}
ul#css3menuh li.topmenu>a{
	height:18px;line-height:18px;}
ul#css3menuh li.topmenu:hover>a,ul#css3menuh li.topmenu>a.pressed{
	line-height:18px;}
ul#css3menuh li.toplast>a{
	height:18px;line-height:18px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menuh li.toplast:hover>a,ul#css3menuh li.toplast>a.pressed{
	line-height:18px;}
 
/*=================== style for side menu ======================*/
 
ul#css3menuv,ul#css3menuv ul{
	margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:0px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuv ul{
	display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
ul#css3menuv li:hover>*{
	display:block;}
ul#css3menuv li:hover{
	position:relative;}
ul#css3menuv ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menuv{
	display:block;font-size:0;float:left;}
ul#css3menuv li{
	display:block;white-space:nowrap;font-size:0;}
ul#css3menuv>li,ul#css3menuv li{
	margin:0;}
ul#css3menuv a:active, ul#css3menuv a:focus{
	outline-style:none;}
ul#css3menuv a,ul#css3menuv a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menuv ul li{
	float:none;margin:10px 0 0;}
ul#css3menuv ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuv li:hover>a{
	background-color:#ffc000;border-color:#C0C0C0;border-width:1px;border-style:solid;border-color:#5f5f5f;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;}
ul#css3menuv img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuv img.over{
	display:none;}
ul#css3menuv li:hover > a img.def{
	display:none;}
ul#css3menuv li:hover > a img.over{
	display:inline;}
ul#css3menuv li a.pressed img.over{
	display:inline;}
ul#css3menuv li a.pressed img.def{
	display:none;}
ul#css3menuv span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menuv ul span{
	background-image:url("../care-in-the-vale/images/arrowsub.png");padding-right:28px;}
ul#css3menuv a{
	padding:10px;background-color:#ffffff;background-image:url("../care-in-the-vale/images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuv li:hover>a,ul#css3menuv li>a.pressed{
	background-color:#ffc000;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;border-width:1px;border-style:solid;border-color:#5f5f5f;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuv ul li:hover>a,ul#css3menuv ul li>a.pressed{
	background-color:#c4e3f7;background-image:none;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuv li.topfirst>a{
	border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menuv li.toplast>a{
	border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
 
/*==============all site links==============*/
 
a:link {
	font-weight: bold;
	color: #193EBC;
	background: transparent;
	text-decoration: underline;
}
a:visited{
	font-weight: bold;
	color: #000000;
	background: transparent;
	padding: 0px;
	text-decoration: underline;
}
a:hover {
	font-weight: bold;
	text-decoration : none;
	background: #C47B7B;
	color: #ffffff;
}
a:active {
	font-weight: bold;
	text-decoration : underline;
	background: #BFDFE2;
	color: #000000;
}
/*====================== styles for main content area =========================*/
#content {
	margin-left: 180px;
	padding: 5px;
	text-align: left;
	vertical-align: top;
	color: #193EBC;
	font-family: Calibri;
}
 
/*===========content area list items==============*/
#content ul li {
	list-style-image: url('images/pink-bullet-bg.gif');
	margin: 2px;
	padding: 2px;
}
#content li li {
	list-style-image: url('images/pink-bullet-sm.gif');
	padding: 2px 0;
}
 
/*============== Styles for footer ===================*/
#footer {
	border-top: 2px solid #193EBC;
	clear: both;
	padding: 5px;
	background-color: #63b4eb;
	text-align: center;
	color: #193EBC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	white-space: normal;
}
#footer p {
	margin-top: 0px;
	margin-bottom: 0px;
}
/*================== general styles =================*/
hr {
	width: 50%;
	text-align: center;
	background-color: #004145;
	height: 5px;
}
/* =================Styles for heading tags =============== */
h1, h2, h3, h4 {
	color: #193EBC;
	background-color: inherit;
	font-family: Calibri;
}
h1 {
	font-size: 1.8em;
	padding: 3px 0px 3px 10px;
	color: #193EBC;
	background-color: #FFFFFF;
	font-family: Calibri;
	font-weight: bold;
	font-style: italic;
}
h2 {
	font-size: 1.3em;
	color: #193EBC;
}
h3 {
	font-size: 1em;
	color: #193EBC;
	background-color: #FFFFFF;
}
h4 {
	font-size: .9em;
	color: #193EBC;
	background-color: #FFFFFF;
}
/*================used to center anything==============*/
.center {
	text-align: center;
}
/* ============floats images to right or left ============*/
.imgrgt {
	float: right;
	padding: 7px;
}
.imglft {
	float: left;
	padding: 7px;
}
 
.smtxt {
	font-size:small;
}

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 content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title>care-in-the-vale - Home Page</title>
<meta content="care-in-the-vale aims to increase the Comfort in the lives of people in the Vale of Glamorgan with disabilities, dementia, frailty, extend their Independence, reduce the worry, and bring Peace of Mind." name="description" />
<meta content="care, live in care, home care services,  dementia, alzheimers, ms, home care for the elderly, care in the home, Vale of Glamorgan, comfort, independence, penarth, Dinas Powys, Sully, peace of mind" name="keywords" />
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright © 2011, care-in limited All Rights Reserved" name="copyright" />
<link href="../care-in-the-vale/care-in-the-vale.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
	font-family: "Cataneo BT";
}
.auto-style2 {
	font-size: large;
}
.auto-style3 {
	font-family: "Cataneo BT";
	font-size: large;
}
</style>
</head>
 
<body>
<!-- Beginning of Page Container -->
<div id="container">
 
<!-- Beginning of Top Banner -->
	<div id="banner" style="width: 100%; height: 250px">
	</div>
<!-- End of Top Banner -->
<!-- Beginning of Top Menu -->	
	<div id="wrap">
  <ul id="css3menuh" class="topmenu">
	<li class="topfirst"><a href="#" title="The Issues You Face" style="height:18px;line-height:18px;"><span>The Issues You Face</span></a>
	<ul>
		<li><a href="#" title="Disability"><span>Disability</span></a>
		<ul>
			<li><a href="#" title="Physical Disability">Physical Disability</a></li>
			<li><a href="#" title="Learning Disability">Learning Disability</a></li>
		</ul>
 
		</li>
		<li><a href="#" title="Age"><span>Age</span></a>
		<ul>
			<li><a href="#" title="Frailty">Frailty</a></li>
			<li><a href="#" title="Dementia">Dementia</a></li>
		</ul>
 
		</li>
		<li><a href="#" title="Illness">Illness</a></li>
	</ul>
 
	</li>
	<li class="topmenu"><a href="#" title="The Services We Provide" style="height:18px;line-height:18px;"><span>The Services We Provide</span></a>
	<ul>
		<li><a href="#" title="Living-Life">Living-Life</a></li>
		<li><a href="#" title="Twilight-Life">Twilight-Life</a></li>
		<li><a href="#" title="Focus-On-Feelings">Focus-On-Feelings</a></li>
	</ul>
 
	</li>
	<li class="toplast"><a href="#" title="And Some More" style="height:18px;line-height:18px;"><span>And Some More</span></a>
	<ul>
		<li><a href="#" title="Principles of Care">Principles of Care</a></li>
		<li><a href="#" title="Live-in Care">Live-in Care</a></li>
		<li><a href="#" title="Night Care">Night Care</a></li>
		<li><a href="#" title="Holiday Care">Holiday Care</a></li>
		<li><a href="#" title="Companionship">Companionship</a></li>
		<li><a href="#" title="Our Shop">Our Shop</a></li>
	</ul>
 
	</li>
</ul>
 
  </div>
  <div>
  </div>      
<!-- End of Top Menu -->
 
<!-- Beginning of Left Menu -->		
 
<ul id="css3menuv" class="topmenu">
	<li class="topfirst"><a href="#" title="The People We Support" style="width:129px;"><span>The People We Support</span></a>
	<ul>
		<li><a href="#" title="Younger People">Younger People</a></li>
		<li><a href="#" title="Older People">Older People</a></li>
		<li><a href="#" title="Family and Friends">Family and Friends</a></li>
	</ul>
 
	</li>
	<li><a href="#" title="The Benefits We Bring" style="width:129px;"><span>The Benefits We Bring</span></a>
	<ul>
		<li><a href="#" title="Comfort">Comfort</a></li>
		<li><a href="#" title="Independence">Independence</a></li>
		<li><a href="#" title="Peace of Mind">Peace of Mind</a></li>
	</ul>
 
	</li>
	<li class="toplast"><a href="#" title="The People We Are" style="width:129px;"><span>The People We Are</span></a>
	<ul>
		<li><a href="#" title="About Us"><span>About Us</span></a>
		<ul>
			<li><a href="#" title="Director of Care - Debbie Waller">Director of Care - Debbie Waller</a></li>
			<li><a href="#" title="Managing Director - Stephen Gamgee">Managing Director - Stephen Gamgee</a></li>
		</ul>
 
		</li>
		<li><a href="#" title="Our Values">Our Values</a></li>
		<li><a href="#" title="Working With Us">Working With Us</a></li>
	</ul>
 
	</li>
</ul>
<!-- End of Left Menu -->
<p></p>
 
<!-- Beginning of Main Content -->			
	<div id="content">
		<h1>Comfort, Independence</h1>
		<h1>... and Peace of Mind</h1>
		<h2>These are what we all want - for ourselves and for our family.  
 
</h2>
		<h2>They are not much to ask for - but sometimes, for some people, rather hard to achieve.</h2>
		<p class="auto-style2">
People with disabilities, with dementia, with age related frailty and people recovering from illness can experience more discomfort, less independence and more worry than most of us.  
 
</p>
		<p class="auto-style2">
		And their families worry in turn.
 
 
</p>
		<p>
		<span class="auto-style3"><strong><em>care-in-the-vale</em></strong></span><span class="auto-style2"> aims to increase the 
		</span> 
		<span class="auto-style3"><strong><em>Comfort</em></strong></span><span class="auto-style2"> in people's lives, maintain or extend their level of 
		</span> 
		<span class="auto-style3"><strong><em>Independence</em></strong></span><span class="auto-style2"> and to reduce the worry, bringing greater 
		</span> 
		<span class="auto-style3"><strong><em>Peace of Mind</em></strong></span><span class="auto-style2"> to them and their families.
 
		</span>
 
</p>
		<p>
		<span class="auto-style2">If you or someone close to you is experiencing any of the difficulties referred to above, please contact us to discuss how 
		</span> 
		<span class="auto-style3"><strong><em>care-in-the-vale</em></strong></span><span class="auto-style2"> can help bring 
		</span> 
		<span class="auto-style3"><strong><em>Comfort</em></strong></span><span class="auto-style2">, 
		</span> 
		<span class="auto-style3"><strong><em>Independence</em></strong></span><span class="auto-style2"> and 
		</span> 
		<span class="auto-style3"><strong><em>Peace of Mind</em></strong></span><span class="auto-style2">. 
		</span> 
</p>
		<p>
		<span class="auto-style2">You can call us on 029 2025 6451, or 
		email us on </span> <strong>
		<a href="mailto:[email protected]?subject=Enquiry From Website" title="Email care-in-the-vale">
		<span class="auto-style2">[email protected]</span></a></strong>.</p>
		<DIV ID="TICKER" STYLE="overflow:hidden; width:520px"  onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
  NEWS FLASH .........................Now Recruiting. To book your place on an Open Day, please telephone 07941 785 809 or 07818 531 958
</DIV>
<script type="text/javascript" src="../care-in-the-vale/webticker_lib.js" language="javascript"></script>
<table style="width: 100%">
			<tr>
				<td>
				<img alt="Penarth Town Centre" height="224" longdesc="Royal Buildings, Stanwell Road, Penarth, Vale of Glamorgan" src="../care-in-the-vale/images/Penarth_town_centre2_jpg_w300h225.jpg" width="300" />
				<img alt="&quot;Youth would be a fine state if it came a little later in life&quot;" height="220" longdesc="&quot;Youth would be a fine state if it came a little later in life&quot;" src="../care-in-the-vale/images/quote8.gif" width="300" /></td>
			</tr>
			<tr>
				<td style="width: 250px">
				<span class="smtxt">Royal Buildings on the western corner of Stanwell Road and Victoria Road, Penarth.</span><br class="smtxt" />
				&nbsp;<br class="smtxt" />
				<span class="smtxt">care-in-the-vale has its offices in this block, on Stanwell Road.
				</span><br class="smtxt" />
				<br class="smtxt" />
				<span class="smtxt">© Copyright </span> <a href="http://www.geograph.org.uk/profile/39302">
				<span class="smtxt">John Grayson</span></a><span class="smtxt"> and licensed for
				</span> <a href="http://www.geograph.org.uk/reuse.php?id=1972630">
				<span class="smtxt">reuse</span></a><span class="smtxt"> under this
				</span> <a href="http://creativecommons.org/licenses/by-sa/2.0/">
				<span class="smtxt">Creative Commons </span><span class="smtxt">Licence</span></a>.</td>
				<td>&nbsp;</td>
			</tr>
		</table>
</div>
</div>
<!-- End of Main Content -->			
 
<!-- Beginning of Footer -->	
	<div id="footer">
		<div align="center"><strong><em><font size="3" color="#ffcc00">We won&#39;t let Disability, Age or Illness get in the
               way!!!<br />
			</font>
               &nbsp;<p><span><strong>12A Royal Buildings|Stanwell Road|Penarth|CF64 3ED<br />
		<br />
		Tel.: 029 2025 6451<br />
		</strong></span> </p>
		<p><strong>Email:&nbsp; <a href="mailto:[email protected]">[email protected]</a></strong></p>
		<p>&nbsp;</p>
			<p>
			<img alt="Care and Social Services Inspectorate Wales logo " height="68" longdesc="Registered with the  Care and Social Services Inspectorate Wales " src="../care-in-the-vale/images/CSSI_logo.gif" width="140" /></p>
		<div align="center">
			Registered with the Care and Social Services Inspectorate Wales
			<br />
			<br />
			Interested in a career with<span class="auto-style2"> </span> <span class="auto-style1"><em><strong>
			<span class="auto-style2">care-in-the-vale</span></strong></em></span>? <br />
			Please call us or complete and send our handy
			<a href="http://www.care-in-the-vale.com/job_application.html" title="Job Enquiry Form">
			Job&nbsp;Application Form</a><!--"''"--></div>
		<p>&nbsp;</p>
		<p>Copyright 2011 | All Rights Reserved</p>
		<p>&nbsp;</p>
		 <div style="text-align:center;">
               <!--gem:tlx.tlx.timestamp--><script src="http://twe01.svcs.sitebuilderservice.com/svcs/timestamp.js"></script><script>var moment = new Date();
    var result = Stamp(moment.getTime(), "dn d1 mn y4 h12:mmampm", "January|February|March|April|May|June|July|August|September|October|November|December","Sunday|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday"); document.write(result);
  </script>
               <!--end gem--><!--"''"--></div>
 
	</div>
<!-- End of Footer -->	
 
</div>
<!-- End of Page Container -->	
 
</body>
 
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

That's because it's in an

That's because it's in an element with 50px padding on left and right sides. So you have two options:

1. use a negative right margin
2. use position:absolute; right: 0

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

NevNic
Offline
newbie
Last seen: 11 years 27 weeks ago
Timezone: GMT+7
Joined: 2011-03-18
Posts: 8
Points: 9

Positioning Horizontal Menu Bar To Extreme Right

Thank you Tyssen for your help (much needed and appreciated!)

I have used position:absolute; right: 0 (I think), but it does not seem to have any effect.

I am not sure I know how to use a negative right margin - is the element the Container?

Actually, I am getting into a real pickle with this horizontal navigation bar.

I am very happy now with the left hand vertical navigation, and I would like the horizontal bar to look exactly the same, i.e. with the Disability, Age, Illness boxes being static, always displayed, with no spaces in between, under The Issues You Face. I am struggling with this.

Also, you will note that the CSS 'Table' lower in the page does not display properly, although it looks fine in Expression Preview. The 'Thought Bubble' should line up to the right of the Town Centre pic, and the Shop Front pic to the right of the text.

Your further very valuable advice would be much appreciated.

Thank you.

New CSS:

@charset "iso-8859-1";
body {
	font-family: Calibri;
	margin: 0;
	padding: 0;
	background-color: #193EBC; /*dark blue*/;
	color: #000000;
}
/*===============indicates no border around any image ============*/
body img {
	border: 0px;
	text-decoration: none;
}
/* ============ margins auto center the container on the page ==========*/
#container {
	margin: 10px auto 10px auto;
	padding: 30px;
	background-color: #ffffff;
	width: 80%;
	max-width: 1300px;
}
/*=================== styles for top banner ========================*/
#banner {
	margin: 10 0 10 0;
	background-position: center;
	padding: 10px;
	background-color: #C4E3F7;
	background-image: url('../care-in-the-vale/images/care-in-the-vale_banner.gif');
	height: 90px;
	background-repeat: no-repeat;
	color: #C4E3F7;
	max-width: 100%;
	max-height: 250px;
}
 
/*=================== styles for wrapping text ========================*/
 
#wrap {
	position: relative;
	font-size: large;
	width: 700px;
	padding: 50px 20px;
	margin: 0 auto;
	position: relative;
	border-top-color: #193EBC;
}
 
/*=================== styles for Home menu ======================*/
 
ul#css3menuhome,ul#css3menuhome ul{
	margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuhome ul{
	display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
ul#css3menuhome li:hover>*{
	display:block;}
ul#css3menuhome li:hover{
	position:relative;}
ul#css3menuhome ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menuhome{
	display:block;font-size:0;float:left;}
ul#css3menuhome li{
	display:block;white-space:nowrap;font-size:0;}
ul#css3menuhome>li,ul#css3menuhome li{
	margin: 0;
	background-color: #ffffff;
	padding-bottom: 0px;
}
ul#css3menuhome a:active, ul#css3menuhome a:focus{
	outline-style:none;}
ul#css3menuhome a,ul#css3menuhome a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menuhome ul li{
	float:none;margin:10px 0 0;}
ul#css3menuhome ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 14px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuhome li:hover>a{
	background-color:#ffc000;border-color:#C0C0C0;border-style:solid;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menuhome img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuhome img.over{
	display:none;}
ul#css3menuhome li:hover > a img.def{
	display:none;}
ul#css3menuhome li:hover > a img.over{
	display:inline;}
ul#css3menuhome li a.pressed img.over{
	display:inline;}
ul#css3menuhome li a.pressed img.def{
	display:none;}
ul#css3menuhome span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menuhome a{
	padding:10px;background-color:#ffffff;background-image:url("../care-in-the-vale/images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuhome li:hover>a,ul#css3menuhome li>a.pressed{
	background-color:#ffc000;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuhome ul li:hover>a,ul#css3menuhome ul li>a.pressed{
	background-color:#c4e3f7;background-image:none;font:bold 14px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuhome li.toplast>a{
	border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
 
/*=================== styles for top menu ======================*/
 
ul#css3menuh,ul#css3menuh ul{
	position:absolute;right:0;margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:0px;border-style:solid;border-color:#ffffff;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuh ul{
	display:none;position:absolute;right:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #ffffff;-webkit-box-shadow:3.5px 3.5px 5px #ffffff;box-shadow:3.5px 3.5px 5px #ffffff;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#ffffff;}
ul#css3menuh li:hover>*{
	display:block;}
ul#css3menuh li:hover{
	position:relative;}
ul#css3menuh ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menuh{
	display: block;
	font-size: 0;
	float: right;
	position: absolute;
	right: 0;
}
ul#css3menuh li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menuh>li,ul#css3menuh li{
	margin: 0;
 
}
ul#css3menuh a:active, ul#css3menuh a:focus{
	outline-style:none;}
ul#css3menuh a,ul#css3menuh a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menuh ul li{
	border: 1px;
	float: none;
	margin: 10px 0 0;
}
ul#css3menuh ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuh li:hover>a{
	background-color:#ffc000;border-color:#C0C0C0;border-width:1px;border-style:solid;border-color:#5f5f5f;;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;}
ul#css3menuh img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuh img.over{
	display:none;}
ul#css3menuh li:hover > a img.def{
	display:none;}
ul#css3menuh li:hover > a img.over{
	display:inline;}
ul#css3menuh li a.pressed img.over{
	display:inline;}
ul#css3menuh li a.pressed img.def{
	display:none;}
ul#css3menuh span{
	display: block;
	overflow: visible;
	background-position: right center;
	background-repeat: no-repeat;
	padding-right: 0px;
	background-color: #ffc000;
}
ul#css3menuh ul span{
	background-image:url("../care-in-the-vale/images/arrowsub.png");padding-right:28px;}
ul#css3menuh a{
	padding:10px;background-color:#ffffff;background-image:url("../care-in-the-vale/images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuh li:hover>a,ul#css3menuh li>a.pressed{
	background-color:#ffc000;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;border-width:1px;border-style:solid;border-color:#5f5f5f;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuh ul li:hover>a,ul#css3menuh ul li>a.pressed{
	background-color:#c4e3f7;background-image:none;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuh li.topfirst>a{
	height:18px;line-height:18px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menuh li.topfirst:hover>a,ul#css3menuh li.topfirst>a.pressed{
	line-height:18px;}
ul#css3menuh li.topmenu>a{
	height:18px;line-height:18px;}
ul#css3menuh li.topmenu:hover>a,ul#css3menuh li.topmenu>a.pressed{
	line-height:18px;}
ul#css3menuh li.toplast>a{
	height:18px;line-height:18px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menuh li.toplast:hover>a,ul#css3menuh li.toplast>a.pressed{
	line-height:18px;}
 
/*=================== style for side menu ======================*/
 
ul#css3menuV,ul#css3menuV ul{
	margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:0px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuV ul{
	display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
ul#css3menuV li:hover>*{
	display:block;}
ul#css3menuV li:hover{
	position:relative;}
ul#css3menuV ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menuV{
	display:block;font-size:0;float:left;}
ul#css3menuV li{
	display:block;white-space:nowrap;font-size:0;}
ul#css3menuV>li,ul#css3menuV li{
	margin:0;}
ul#css3menuV a:active, ul#css3menuV a:focus{
	outline-style:none;}
ul#css3menuV a,ul#css3menuV a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menuV ul li{
	float:none;margin:10px 0 0;}
ul#css3menuV ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuV li:hover>a{
	background-color:#c4e3f7;border-color:#193ebc;border-style:solid;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menuV img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuV img.over{
	display:none;}
ul#css3menuV li:hover > a img.def{
	display:none;}
ul#css3menuV li:hover > a img.over{
	display:inline;}
ul#css3menuV li a.pressed img.over{
	display:inline;}
ul#css3menuV li a.pressed img.def{
	display:none;}
ul#css3menuV span{
	border-color: #193ebc;
	border-width: 1px;
	border: #193ebc;
	display: block;
	overflow: visible;
	background-position: right center;
	background-repeat: no-repeat;
	padding-right: 0px;
}
ul#css3menuV a{
	padding:10px;background-color:#ffffff;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuV li:hover>a,ul#css3menuV li>a.pressed{
	background-color:#c4e3f7;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuV ul li:hover>a,ul#css3menuV ul li>a.pressed{
	background-color:#c4e3f7;background-image:none;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuV li.topfirst>a{
	border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menuV li.toplast>a{
	border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
 
/*==============all site links==============*/
 
a:link {
	font-weight: bold;
	color: #193EBC;
	background: transparent;
	text-decoration: underline;
}
a:visited{
	font-weight: bold;
	color: #000000;
	background: transparent;
	padding: 0px;
	text-decoration: underline;
}
a:hover {
	font-weight: bold;
	text-decoration : none;
	background: #C47B7B;
	color: #ffffff;
}
a:active {
	font-weight: bold;
	text-decoration : underline;
	background: #BFDFE2;
	color: #000000;
}
/*====================== styles for main content area =========================*/
#content {
	margin-left: 180px;
	padding: 5px;
	text-align: left;
	vertical-align: top;
	color: #193EBC;
	font-family: Calibri;
}
 
/*===========content area list items==============*/
#content ul li {
	list-style-image: url('images/pink-bullet-bg.gif');
	margin: 2px;
	padding: 2px;
}
#content li li {
	list-style-image: url('images/pink-bullet-sm.gif');
	padding: 2px 0;
}
 
/*============== Styles for table ===================*/
 
#tablediv {
display:  table;
width:600px;
background-color:#ffffff;
border:0px solid  #666666;
border-spacing:5px;
border-collapse:separate;
}
..celldiv {
float:left;/*fix for  buggy browsers*/
display:  table-cell;
width:50%;
background-color:#ffffff;
}
..rowdiv  {
display:  table-row;
width:auto;
}
.auto-style1 {
	text-align: center;
}
.auto-style2 {
	font-size: x-small;
	font-family: Arial, Helvetica, sans-serif;
	color: #193EBC;
}
.auto-style3 {
	margin-left: 13px;
}
 
/*============== Styles for footer ===================*/
#footer {
	border-top: 2px solid #193EBC;
	clear: both;
	padding: 5px;
	background-color: #63b4eb;
	text-align: center;
	color: #193EBC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	white-space: normal;
}
#footer p {
	margin-top: 0px;
	margin-bottom: 0px;
}
/*================== general styles =================*/
hr {
	width: 50%;
	text-align: center;
	background-color: #004145;
	height: 5px;
}
/* =================Styles for heading tags =============== */
h1, h2, h3, h4 {
	color: #193EBC;
	background-color: inherit;
	font-family: Calibri;
}
h1 {
	font-size: 1.8em;
	padding: 3px 0px 3px 10px;
	color: #193EBC;
	background-color: #FFFFFF;
	font-family: Calibri;
	font-weight: bold;
	font-style: italic;
}
h2 {
	font-size: 1.3em;
	color: #193EBC;
}
h3 {
	font-size: 1em;
	color: #193EBC;
	background-color: #FFFFFF;
}
h4 {
	font-size: .9em;
	color: #193EBC;
	background-color: #FFFFFF;
}
/*================used to center anything==============*/
.center {
	text-align: center;
}
/* ============floats images to right or left ============*/
.imgrgt {
	float: right;
	padding: 7px;
}
.imglft {
	float: left;
	padding: 7px;
}
 
.smtxt {
	font-size:small;
}

New 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 content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title>care-in-the-vale - Home Page</title>
<meta content="care-in-the-vale aims to increase the Comfort in the lives of people in the Vale of Glamorgan with disabilities, dementia, frailty, extend their Independence, reduce the worry, and bring Peace of Mind." name="description" />
<meta content="care, live in care, home care services,  dementia, alzheimers, ms, home care for the elderly, care in the home, Vale of Glamorgan, comfort, independence, penarth, Dinas Powys, Sully, peace of mind" name="keywords" />
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright © 2011, care-in limited All Rights Reserved" name="copyright" />
<link href="../care-in-the-vale/care-in-the-vale.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
	font-family: "Cataneo BT";
}
.auto-style2 {
	font-size: large;
}
.auto-style3 {
	font-family: "Cataneo BT";
	font-size: large;
}
.auto-style5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-small;
}
.auto-style6 {
	font-size: xx-small;
	font-family: Arial, Helvetica, sans-serif;
	color: #193EBC;
}
.auto-style7 {
	font-size: xx-small;
	font-family: "Cataneo BT";
	color: #193EBC;
}
.auto-style8 {
	font-size: large;
	color: #193EBC;
}
.auto-style9 {
	margin-top: 6px;
}
</style>
</head>
 
<body>
<!-- Beginning of Page Container -->
<div id="container">
 
<!-- Beginning of Top Banner -->
	<div id="banner" style="width: 100%; height: 250px">
	</div>
<!-- End of Top Banner -->
 
<!-- Beginning of Top Menu -->	
 
	<div id="wrap">
 
  <ul id="css3menuh" class="topmenu" style="right: 0; top: 50px; height: 40px">
	<li class="topfirst"><a href="#" title="The Issues You Face" style="width:129px; background-color: #ffc000;"><span>The Issues You Face</span></a>
	<ul>
		<li>
		<a href="#" title="Disability" style="border-color: #193ebc; border-width: 1px; width:129px; background-color: #ffffff;"><span>Disability</span></a>
		<ul>
			<li><a href="#" title="Physical Disability" style="border-color: #193ebc; border-width: 1px; width:129px;">Physical Disability</a></li>
			<li><a href="#" title="Learning Disability" style="border-color: #193ebc; border-width: 1px; width:129px;">Learning Disability</a></li>
		</ul>
 
		</li>
		<li>
		<a href="#" title="Age" style="border-color: #193ebc; border-width: 1px; width:129px; background-color: #ffffff;"><span>Age</span></a>
		<ul>
			<li><a href="#" title="Frailty" style="border-color: #193ebc; border-width: 1px; width:129px;">Frailty</a></li>
			<li><a href="#" title="Dementia" style="border-color: #193ebc; border-width: 1px; width:129px;">Dementia</a></li>
		</ul>
 
		</li>
		<li><a href="#" title="Illness" style="border-color: #193ebc; border-width: 1px; width:129px;">Illness</a></li>
	</ul>
 
	</li>
	<li class="topmenu"><a href="#" title="The Services We Provide" style="width:129px; background-color: #ffc000;"><span>The Services We Provide</span></a>
	<ul>
		<li><a href="#" title="Living-Life" style="border-color: #193ebc; border-width: 1px; width:129px;">Living-Life</a></li>
		<li><a href="#" title="Twilight-Life" style="border-color: #193ebc; border-width: 1px; width:129px;">Twilight-Life</a></li>
		<li><a href="#" title="Focus-On-Feelings" style="border-color: #193ebc; border-width: 1px; width:129px;">Focus-On-Feelings</a></li>
	</ul>
 
	</li>
	<li class="toplast"><a href="#" title="And Some More" style="width:129px; background-color: #ffc000;"><span>And Some More</span></a>
	<ul>
		<li><a href="#" title="Principles of Care" style="border-color: #193ebc; border-width: 1px; width:129px;">Principles of Care</a></li>
		<li><a href="#" title="Live-in Care" style="border-color: #193ebc; border-width: 1px; width:129px;">Live-in Care</a></li>
		<li><a href="#" title="Night Care" style="border-color: #193ebc; border-width: 1px; width:129px;">Night Care</a></li>
		<li><a href="#" title="Holiday Care" style="border-color: #193ebc; border-width: 1px; width:129px;">Holiday Care</a></li>
		<li><a href="#" title="Companionship" style="border-color: #193ebc; border-width: 1px; width:129px;">Companionship</a></li>
		<li><a href="#" title="Our Shop" style="border-color: #193ebc; border-width: 1px; width:129px;">Our Shop</a></li>
	</ul>
 
	</li>
</ul>
 
  </div>
  <div>
  </div>      
<!-- End of Top Menu -->
 
<!-- Beginning of Left Menu -->		
 
<ul id="css3menuV" class="topmenu">
	<li class="topfirst">
	<a href="#" title="The People We Support" style="width:129px; background-color: #ffc000;">The People We Support</a></li>
	<li>
	<a href="#" title="Younger People" style="border-color: #193ebc; border-width: 1px; width:129px;">Younger People</a></li>
	<li>
	<a href="#" title="Older People" style="border-color: #193ebc; border-width: 1px; width:129px;">Older People</a></li>
	<li>
	<a href="#" title="Family and Friends" style="border-width: 1px; border-color: #193ebc; width:129px;">Family and Friends</a></li>
	<li>
	<a href="#" title="The Benefits We Bring" style="width:129px; background-color: #ffc000;">The Benefits We Bring</a></li>
	<li>
	<a href="#" title="Comfort" style="border-color: #193ebc; border-width: 1px; width:129px;">Comfort</a></li>
	<li>
	<a href="#" title="Independence" style="border-width: 1px; border-color: #193ebc; width:129px;">Independence</a></li>
	<li>
	<a href="#" title="Peace of Mind" style="border-color: #193ebc; border-width: 1px; width:129px;">Peace of Mind</a></li>
	<li>
	<a href="#" title="The People We Are" style="width:129px; background-color: #ffc000;">The People We Are</a></li>
	<li><a href="#" title="About Us" style="border-color: #193ebc; border-width: 1px; width:129px;">About Us</a>
	<ul>
		<li>
		<a href="#" title="Director of Care - Debbie Waller" style="border-color: #193ebc; border-width: 1px; width:205px;">Director of Care - Debbie Waller</a></li>
		<li><a href="#" title="Managing Director - Stephen Gamgee" style="border-color: #193ebc; border-width: 1px; width:205px;">Managing Director - Stephen Gamgee</a></li>
	</ul>
 
	</li>
	<li>
	<a href="#" title="Our Values" style="border-width: 1px; border-color: #193ebc; width:129px;">Our Values</a></li>
	<li class="toplast">
	<a href="#" title="Working With Us" style="border-color: #193ebc; border-width: 1px; width:129px;">Working With Us</a></li>
</ul>
<!-- End of Left Menu -->
<p></p>
 
<!-- Beginning of Main Content -->			
	<div id="content">
		<h1>Comfort, Independence</h1>
		<h1>... and Peace of Mind</h1>
		<h2>These are what we all want - for ourselves and for our family.  
 
</h2>
		<h2>They are not much to ask for - but sometimes, for some people, rather hard to achieve.</h2>
		<p class="auto-style2">
People with disabilities, with dementia, with age related frailty and people recovering from illness can experience more discomfort, less independence and more worry than most of us.  
 
</p>
		<p class="auto-style2">
		And their families worry in turn.
 
 
</p>
		<p class="auto-style2">
		<span class="auto-style2"><span class="auto-style3"><strong><em>care-in-the-vale</em></strong></span> 
		aims to increase the<span class="auto-style3"><strong><em>Comfort</em></strong></span> in people's lives, maintain or extend their level of 
		<span class="auto-style3"><strong><em>Independence</em></strong></span>&nbsp; and to reduce the worry, bringing greater 
		<span class="auto-style3"><strong><em>Peace of Mind</em></strong></span>&nbsp; to them and their families.
 
		If you or someone close to you is experiencing any of the difficulties referred to above, please contact us to discuss how 
		</span> 
		<span class="auto-style3"><strong><em>care-in-the-vale</em></strong></span><span class="auto-style2"> can help bring 
		</span> 
		<span class="auto-style3"><strong><em>Comfort</em></strong></span><span class="auto-style2">, 
		</span> 
		<span class="auto-style3"><strong><em>Independence</em></strong></span><span class="auto-style2">&nbsp; and 
		</span> 
		<span class="auto-style3"><strong><em>Peace of Mind</em></strong></span><span class="auto-style2">. 
		</span> 
 
 
</p>
		<p>
		<span class="auto-style2">You can call us on 029 2025 6451, or 
		email us on </span> <strong>
		<a href="mailto:[email protected]?subject=Enquiry From Website" title="Email care-in-the-vale">
		<span class="auto-style2">[email protected]</span></a></strong>.</p>
		<DIV ID="TICKER" STYLE="overflow:hidden; width:520px"  onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
  NEWS FLASH .........................Now Recruiting. To book your place on an Open Day, please telephone 07941 785 809 or 07818 531 958
			<br />
</DIV>
<script type="text/javascript" src="../care-in-the-vale/webticker_lib.js" language="javascript"></script>
<div  class="tablediv">
<div class="rowdiv">
<div  class="celldiv">
	<img alt="Penarth Town Centre" height="165" src="../care-in-the-vale/images/Penarth_town_centre2_jpg_w300h225.jpg" width="224" class="auto-style9" /></div>
<div  class="celldiv" style="width: 48%; height: 167px">
	<img alt="Quote - Youth would be a fine state if it came a little later in life - End Quote" height="138" src="../care-in-the-vale/images/quote8.gif" width="189" class="auto-style3" /></div>
</div>
<div class="rowdiv">
<div  class="celldiv"><span class="auto-style6">Royal Buildings on the western 
	corner of Stanwell Road and Victoria Road, Penarth.</span><br class="auto-style6" />
	&nbsp;<br class="auto-style6" />
	<span class="auto-style7"><strong><em>care-in-the-vale</em></strong></span><span class="auto-style6"> has its offices in this block, on 
	Stanwell Road. </span><br class="auto-style6" />
	<br class="auto-style6" />
	<span class="auto-style6">© Copyright </span>
	<a href="http://www.geograph.org.uk/profile/39302">
	<span class="auto-style6">John Grayson</span></a><span class="auto-style6"> 
	and licensed for </span>
	<a href="http://www.geograph.org.uk/reuse.php?id=1972630">
	<span class="auto-style6">reuse</span></a><span class="auto-style6"> under 
	this </span><a href="http://creativecommons.org/licenses/by-sa/2.0/">
	<span class="auto-style6">Creative Commons Licence</span></a><span class="auto-style5">.</span></div>
<div  class="auto-style1">
	<img alt="care-in-the-vale Penarth Office" height="99" longdesc="care-in-the-vale, 12A Royal Buildings, Stanwell Road, Penarth, Vale of Glamorgan, CF64 3ED" src="../care-in-the-vale/images/shopfront.jpg" width="105" /></div>
</div>
</div>
</div>
</div>
<!-- End of Main Content -->			
 
<!-- Beginning of Footer -->	
	<div id="footer">
		<div align="center"><strong><em><font size="3" color="#ffcc00">We won&#39;t let Disability, Age or Illness get in the
               way!!!<br />
			</font>
               &nbsp;<p><span><strong>12A Royal Buildings | Stanwell Road | Penarth | CF64 3ED<br />
		<br />
		Tel.: 029 2025 6451<br />
		</strong></span> </p>
		<p><strong>Email:&nbsp; <a href="mailto:[email protected]">[email protected]</a></strong></p>
		<p>&nbsp;</p>
			<p>
			<img alt="Care and Social Services Inspectorate Wales logo " height="68" longdesc="Registered with the  Care and Social Services Inspectorate Wales " src="../care-in-the-vale/images/CSSI_logo.gif" width="140" /></p>
		<div align="center">
			Registered with the Care and Social Services Inspectorate Wales
			<br />
			<br />
			Interested in a career with<span class="auto-style2"> </span> <span class="auto-style1"><em><strong>
			<span class="auto-style8">care-in-the-vale</span></strong></em></span>? <br />
			Please call us or complete and send our handy
			<a href="http://www.care-in-the-vale.com/job_application.html" title="Job Enquiry Form">
			Job&nbsp;Application Form</a><!--"''"--></div>
		<p>&nbsp;</p>
		<p>Copyright 2011 | All Rights Reserved</p>
		<p>&nbsp;</p>
		 <div style="text-align:center;">
               <!--gem:tlx.tlx.timestamp--><script src="http://twe01.svcs.sitebuilderservice.com/svcs/timestamp.js"></script><script>var moment = new Date();
    var result = Stamp(moment.getTime(), "dn d1 mn y4 h12:mmampm", "January|February|March|April|May|June|July|August|September|October|November|December","Sunday|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday"); document.write(result);
  </script>
               <!--end gem--><!--"''"--></div>
 
	</div>
<!-- End of Footer -->	
 
</div>
<!-- End of Page Container -->	
 
</body>
 
</html>

NevNic
Offline
newbie
Last seen: 11 years 27 weeks ago
Timezone: GMT+7
Joined: 2011-03-18
Posts: 8
Points: 9

Positioning Horizontal Menu Bar To Extreme Right

Further:

OK, I have now managed to position the horizontal navbar to the right, but not to the extreme right, i.e. with the end of the bar directly under the light blue strip to the right of the banner.

Still struggling with getting the horizontal bar to look exactly the same as the vertical bar, i.e. with the Disability, Age, Illness boxes being static, always displayed, with no spaces in between, under The Issues You Face.

Also, you will note that the CSS 'Table' lower in the page does not display properly, although it looks fine in Expression Preview. The 'Thought Bubble' should line up to the right of the Town Centre pic, and the Shop Front pic to the right of the text.

Your further very valuable advice would be much appreciated.

Thank you.

Updated CSS:

@charset "iso-8859-1";
body {
	font-family: Calibri;
	margin: 0;
	padding: 0;
	background-color: #193EBC; /*dark blue*/;
	color: #000000;
}
/*===============indicates no border around any image ============*/
body img {
	border: 0px;
	text-decoration: none;
}
/* ============ margins auto center the container on the page ==========*/
#container {
	margin: 10px auto 10px auto;
	padding: 30px;
	background-color: #ffffff;
	width: 80%;
	max-width: 1300px;
}
/*=================== styles for top banner ========================*/
#banner {
	margin: 10 0 10 0;
	background-position: center;
	padding: 10px;
	background-color: #C4E3F7;
	background-image: url('../care-in-the-vale/images/care-in-the-vale_banner.gif');
	height: 90px;
	background-repeat: no-repeat;
	color: #C4E3F7;
	max-width: 100%;
	max-height: 250px;
}
 
/*=================== styles for wrapping text ========================*/
 
#wrap {
	position: relative;
	font-size: large;
	width: 700px;
	padding: 50px 20px;
	margin: 0 auto;
	position: relative;
	border-top-color: #193EBC;
}
 
/*=================== styles for Home menu ======================*/
 
ul#css3menuhome,ul#css3menuhome ul{
	margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuhome ul{
	display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#193ebc;}
ul#css3menuhome li:hover>*{
	display:block;}
ul#css3menuhome li:hover{
	position:relative;}
ul#css3menuhome ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menuhome{
	display:block;font-size:0;float:left;}
ul#css3menuhome li{
	display:block;white-space:nowrap;font-size:0;}
ul#css3menuhome>li,ul#css3menuhome li{
	margin: 0;
	background-color: #ffffff;
	padding-bottom: 0px;
}
ul#css3menuhome a:active, ul#css3menuhome a:focus{
	outline-style:none;}
ul#css3menuhome a,ul#css3menuhome a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menuhome ul li{
	float:none;margin:10px 0 0;}
ul#css3menuhome ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 14px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuhome li:hover>a{
	background-color:#ffc000;border-color:#C0C0C0;border-style:solid;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menuhome img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuhome img.over{
	display:none;}
ul#css3menuhome li:hover > a img.def{
	display:none;}
ul#css3menuhome li:hover > a img.over{
	display:inline;}
ul#css3menuhome li a.pressed img.over{
	display:inline;}
ul#css3menuhome li a.pressed img.def{
	display:none;}
ul#css3menuhome span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menuhome a{
	padding:10px;background-color:#ffffff;background-image:url("../care-in-the-vale/images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuhome li:hover>a,ul#css3menuhome li>a.pressed{
	background-color:#ffc000;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuhome ul li:hover>a,ul#css3menuhome ul li>a.pressed{
	background-color:#c4e3f7;background-image:none;font:bold 14px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuhome li.toplast>a{
	border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
 
/*=================== styles for top menu ======================*/
 
ul#css3menuh,ul#css3menuh ul{
	margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:0px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuh ul{
	display:none;position:absolute;right:0;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#193ebc;}
ul#css3menuh li:hover>*{
	display:block;}
ul#css3menuh li:hover{
	position:relative;}
ul#css3menuh ul ul{
	position:absolute;right:0;top:0;}
ul#css3menuh{
	display:block;font-size:0;float:right;}
ul#css3menuh li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menuh>li,ul#css3menuh li{
	margin: 0;
	background-color: #ffc000;
}
ul#css3menuh a:active, ul#css3menuh a:focus{
	outline-style:none;}
ul#css3menuh a,ul#css3menuh a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menuh ul li{
	float:none;margin:10px 0 0;}
ul#css3menuh ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuh li:hover>a{
	background-color:#ffc000;border-color:#193ebc;border-style:solid;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menuh img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuh img.over{
	display:none;}
ul#css3menuh li:hover > a img.def{
	display:none;}
ul#css3menuh li:hover > a img.over{
	display:inline;}
ul#css3menuh li a.pressed img.over{
	display:inline;}
ul#css3menuh li a.pressed img.def{
	display:none;}
ul#css3menuh span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menuh ul span{
	background-image:url("arrowsub.png");padding-right:28px;}
ul#css3menuh a{
	padding:10px;background-color:#ffffff;background-image:url("../care-in-the-vale/images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuh li:hover>a,ul#css3menuh li>a.pressed{
	background-color:#ffc000;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuh ul li:hover>a,ul#css3menuh ul li>a.pressed{
	background-color:#c4e3f7;background-image:none;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuh li.topfirst>a{
	height:18px;line-height:18px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menuh li.topfirst:hover>a,ul#css3menuh li.topfirst>a.pressed{
	line-height:18px;}
ul#css3menuh li.topmenu>a{
	height:18px;line-height:18px;}
ul#css3menuh li.topmenu:hover>a,ul#css3menuh li.topmenu>a.pressed{
	line-height:18px;}
ul#css3menuh li.toplast>a{
	height:18px;line-height:18px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menuh li.toplast:hover>a,ul#css3menuh li.toplast>a.pressed{
	line-height:18px;}
 
/*=================== style for side menu ======================*/
 
ul#css3menuV,ul#css3menuV ul{
	margin:0;list-style:none;padding:0;background-color:#ffffff;border-width:0px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menuV ul{
	display:none;position:absolute;left:100%;top:0;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#193ebc;}
ul#css3menuV li:hover>*{
	display:block;}
ul#css3menuV li:hover{
	position:relative;}
ul#css3menuV ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menuV{
	display:block;font-size:0;float:left;}
ul#css3menuV li{
	display:block;white-space:nowrap;font-size:0;}
ul#css3menuV>li,ul#css3menuV li{
	margin:0;}
ul#css3menuV a:active, ul#css3menuV a:focus{
	outline-style:none;}
ul#css3menuV a,ul#css3menuV a.pressed{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 11px Arial;color:#193ebc;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menuV ul li{
	float:none;margin:10px 0 0;}
ul#css3menuV ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuV li:hover>a{
	background-color:#c4e3f7;border-color:#193ebc;border-style:solid;font:bold 11px Arial;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menuV img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menuV img.over{
	display:none;}
ul#css3menuV li:hover > a img.def{
	display:none;}
ul#css3menuV li:hover > a img.over{
	display:inline;}
ul#css3menuV li a.pressed img.over{
	display:inline;}
ul#css3menuV li a.pressed img.def{
	display:none;}
ul#css3menuV span{
	border-color: #193ebc;
	border-width: 1px;
	border: #193ebc;
	display: block;
	overflow: visible;
	background-position: right center;
	background-repeat: no-repeat;
	padding-right: 0px;
}
ul#css3menuV a{
	padding:10px;background-color:#ffffff;background-image:url("../care-in-the-vale/images/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:1px 0 0 0;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuV li:hover>a,ul#css3menuV li>a.pressed{
	background-color:#c4e3f7;background-image:url("../care-in-the-vale/images/mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#193ebc;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menuV ul li:hover>a,ul#css3menuV ul li>a.pressed{
	background-color:#c4e3f7;background-image:none;font:bold 11px Arial;color:#193ebc;text-decoration:none;}
ul#css3menuV li.topfirst>a{
	border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menuV li.toplast>a{
	border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;}
 
/*==============all site links==============*/
 
a:link {
	font-weight: bold;
	color: #193EBC;
	background: transparent;
	text-decoration: underline;
}
a:visited{
	font-weight: bold;
	color: #000000;
	background: transparent;
	padding: 0px;
	text-decoration: underline;
}
a:hover {
	font-weight: bold;
	text-decoration : none;
	background: #C47B7B;
	color: #ffffff;
}
a:active {
	font-weight: bold;
	text-decoration : underline;
	background: #BFDFE2;
	color: #000000;
}
/*====================== styles for main content area =========================*/
#content {
	margin-left: 180px;
	padding: 5px;
	text-align: left;
	vertical-align: top;
	color: #193EBC;
	font-family: Calibri;
}
 
/*===========content area list items==============*/
#content ul li {
	list-style-image: url('images/pink-bullet-bg.gif');
	margin: 2px;
	padding: 2px;
}
#content li li {
	list-style-image: url('images/pink-bullet-sm.gif');
	padding: 2px 0;
}
 
/*============== Styles for table ===================*/
 
#tablediv {
display:  table;
width:600px;
background-color:#ffffff;
border:0px solid  #666666;
border-spacing:5px;
border-collapse:separate;
}
..celldiv {
float:left;/*fix for  buggy browsers*/
display:  table-cell;
width:50%;
background-color:#ffffff;
}
..rowdiv  {
display:  table-row;
width:auto;
}
.auto-style1 {
	text-align: center;
}
.auto-style2 {
	font-size: x-small;
	font-family: Arial, Helvetica, sans-serif;
	color: #193EBC;
}
.auto-style3 {
	margin-left: 13px;
}
 
/*============== Styles for footer ===================*/
#footer {
	border-top: 2px solid #193EBC;
	clear: both;
	padding: 5px;
	background-color: #63b4eb;
	text-align: center;
	color: #193EBC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	white-space: normal;
}
#footer p {
	margin-top: 0px;
	margin-bottom: 0px;
}
/*================== general styles =================*/
hr {
	width: 50%;
	text-align: center;
	background-color: #004145;
	height: 5px;
}
/* =================Styles for heading tags =============== */
h1, h2, h3, h4 {
	color: #193EBC;
	background-color: inherit;
	font-family: Calibri;
}
h1 {
	font-size: 1.8em;
	padding: 3px 0px 3px 10px;
	color: #193EBC;
	background-color: #FFFFFF;
	font-family: Calibri;
	font-weight: bold;
	font-style: italic;
}
h2 {
	font-size: 1.3em;
	color: #193EBC;
}
h3 {
	font-size: 1em;
	color: #193EBC;
	background-color: #FFFFFF;
}
h4 {
	font-size: .9em;
	color: #193EBC;
	background-color: #FFFFFF;
}
/*================used to center anything==============*/
.center {
	text-align: center;
}
/* ============floats images to right or left ============*/
.imgrgt {
	float: right;
	padding: 7px;
}
.imglft {
	float: left;
	padding: 7px;
}
 
.smtxt {
	font-size:small;
}

Updated 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 content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title>care-in-the-vale - Home Page</title>
<meta content="care-in-the-vale aims to increase the Comfort in the lives of people in the Vale of Glamorgan with disabilities, dementia, frailty, extend their Independence, reduce the worry, and bring Peace of Mind." name="description" />
<meta content="care, live in care, home care services,  dementia, alzheimers, ms, home care for the elderly, care in the home, Vale of Glamorgan, comfort, independence, penarth, Dinas Powys, Sully, peace of mind" name="keywords" />
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright © 2011, care-in limited All Rights Reserved" name="copyright" />
<link href="../care-in-the-vale/care-in-the-vale.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
	font-family: "Cataneo BT";
}
.auto-style2 {
	font-size: large;
}
.auto-style3 {
	font-family: "Cataneo BT";
	font-size: large;
}
.auto-style5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-small;
}
.auto-style6 {
	font-size: xx-small;
	font-family: Arial, Helvetica, sans-serif;
	color: #193EBC;
}
.auto-style7 {
	font-size: xx-small;
	font-family: "Cataneo BT";
	color: #193EBC;
}
.auto-style8 {
	font-size: large;
	color: #193EBC;
}
.auto-style9 {
	margin-top: 6px;
}
.auto-style10 {
	font-family: "Cataneo BT";
}
</style>
</head>
 
<body>
<!-- Beginning of Page Container -->
<div id="container">
 
<!-- Beginning of Top Banner -->
	<div id="banner" style="width: 100%; height: 250px">
	</div>
<!-- End of Top Banner -->
 
<!-- Beginning of Top Menu -->	
 
<ul id="css3menuh" class="topmenu">
	<li class="topfirst">
	<a href="#" title="The Issues You Face" style="width:129px; background-color: #ffc000;"><span>The Issues You Face</span></a>
	<ul>
		<li>
		<a href="#" title="Disability" style="border-color: #193ebc; border-width: 1px; width:129px;"><span>Disability</span></a>
		<ul>
			<li><a href="#" title="Physical Disability" style="border-color: #193ebc; border-width: 1px; width:129px;">Physical Disability</a></li>
			<li><a href="#" title="Learning Disability" style="border-color: #193ebc; border-width: 1px; width:129px;">Learning Disability</a></li>
		</ul>
 
		</li>
		<li><a href="#" title="Age" style="border-color: #193ebc; border-width: 1px; width:129px;"><span>Age</span></a>
		<ul>
			<li><a href="#" title="Frailty" style="border-color: #193ebc; border-width: 1px; width:129px;">Frailty</a></li>
			<li><a href="#" title="Dementia" style="border-color: #193ebc; border-width: 1px; width:129px;">Dementia</a></li>
		</ul>
 
		</li>
		<li><a href="#" title="Illness" style="border-color: #193ebc; border-width: 1px; width:129px;">Illness</a></li>
	</ul>
 
	</li>
	<li class="topmenu">
	<a href="#" title="The Services We Provide" style="width:129px; background-color: #ffc000;"><span>The Services We Provide</span></a>
	<ul>
		<li><a href="#" title="Living-Life" style="border-color: #193ebc; border-width: 1px; width:129px;">Living-Life</a></li>
		<li><a href="#" title="Twilight-Life" style="border-color: #193ebc; border-width: 1px; width:129px;">Twilight-Life</a></li>
		<li><a href="#" title="Focus-On-Feelings" style="border-color: #193ebc; border-width: 1px; width:129px;">Focus-On-Feelings</a></li>
	</ul>
 
	</li>
	<li class="toplast">
	<a href="#" title="And Some More" style="width:129px; background-color: #ffc000;"><span>And Some More</span></a>
	<ul>
		<li><a href="#" title="Principles of Care" style="border-color: #193ebc; border-width: 1px; width:129px;">Principles of Care</a></li>
		<li><a href="#" title="Live-in Care" style="border-color: #193ebc; border-width: 1px; width:129px;">Live-in Care</a></li>
		<li><a href="#" title="Night Care" style="border-color: #193ebc; border-width: 1px; width:129px;">Night Care</a></li>
		<li><a href="#" title="Holiday Care" style="border-color: #193ebc; border-width: 1px; width:129px;">Holiday Care</a></li>
		<li><a href="#" title="Companionship" style="border-color: #193ebc; border-width: 1px; width:129px;">Companionship</a></li>
		<li><a href="#" title="Our Shop" style="border-color: #193ebc; border-width: 1px; width:129px;">Our Shop</a></li>
	</ul>
 
	</li>
</ul>
  <div>
  </div>      
<!-- End of Top Menu -->
 
<!-- Beginning of Left Menu -->		
 
<ul id="css3menuV" class="topmenu">
	<li class="topfirst">
	<a href="#" title="The People We Support" style="width:129px; background-color: #ffc000;">The People We Support</a></li>
	<li>
	<a href="#" title="Younger People" style="border-color: #193ebc; border-width: 1px; width:129px;">Younger People</a></li>
	<li>
	<a href="#" title="Older People" style="border-color: #193ebc; border-width: 1px; width:129px;">Older People</a></li>
	<li>
	<a href="#" title="Family and Friends" style="border-width: 1px; border-color: #193ebc; width:129px;">Family and Friends</a></li>
	<li>
	<a href="#" title="The Benefits We Bring" style="width:129px; background-color: #ffc000;">The Benefits We Bring</a></li>
	<li>
	<a href="comfort.html" title="Comfort" style="border-color: #193ebc; border-width: 1px; width:129px;">Comfort</a></li>
	<li>
	<a href="#" title="Independence" style="border-width: 1px; border-color: #193ebc; width:129px;">Independence</a></li>
	<li>
	<a href="#" title="Peace of Mind" style="border-color: #193ebc; border-width: 1px; width:129px;">Peace of Mind</a></li>
	<li>
	<a href="#" title="The People We Are" style="width:129px; background-color: #ffc000;">The People We Are</a></li>
	<li><a href="#" title="About Us" style="border-color: #193ebc; border-width: 1px; width:129px;">About Us</a>
	<ul>
		<li>
		<a href="#" title="Director of Care - Debbie Waller" style="border-color: #193ebc; border-width: 1px; width:205px;">Director of Care - Debbie Waller</a></li>
		<li><a href="#" title="Managing Director - Stephen Gamgee" style="border-color: #193ebc; border-width: 1px; width:205px;">Managing Director - Stephen Gamgee</a></li>
	</ul>
 
	</li>
	<li>
	<a href="#" title="Our Values" style="border-width: 1px; border-color: #193ebc; width:129px;">Our Values</a></li>
	<li class="toplast">
	<a href="#" title="Working With Us" style="border-color: #193ebc; border-width: 1px; width:129px;">Working With Us</a></li>
</ul>
<!-- End of Left Menu -->
<p></p>
 
<!-- Beginning of Main Content -->			
	<div id="content">
		<h1><span class="auto-style10">Comfort</span>, 
		<span class="auto-style10">Independence</span></h1>
		<h1>... <span class="auto-style10">and</span> <span class="auto-style10">Peace of Mind</span></h1>
		<h2>These are what we all want - for ourselves and for our family.  
 
</h2>
		<h2>They are not much to ask for - but sometimes, for some people, rather hard to achieve.</h2>
		<p class="auto-style2">
People with disabilities, with dementia, with age related frailty and people recovering from illness can experience more discomfort, less independence and more worry than most of us.  
 
</p>
		<p class="auto-style2">
		And their families worry in turn.
 
 
</p>
		<p class="auto-style2">
		<span class="auto-style2"><span class="auto-style3"><strong><em>care-in-the-vale</em></strong></span> 
		aims to increase the<span class="auto-style3"><strong><em>Comfort</em></strong></span> in people's lives, maintain or extend their level of 
		<span class="auto-style3"><strong><em>Independence</em></strong></span>&nbsp; and to reduce the worry, bringing greater 
		<span class="auto-style3"><strong><em>Peace of Mind</em></strong></span>&nbsp; to them and their families.
 
		If you or someone close to you is experiencing any of the difficulties referred to above, please contact us to discuss how 
		</span> 
		<span class="auto-style3"><strong><em>care-in-the-vale</em></strong></span><span class="auto-style2"> can help bring 
		</span> 
		<span class="auto-style3"><strong><em>Comfort</em></strong></span><span class="auto-style2">, 
		</span> 
		<span class="auto-style3"><strong><em>Independence</em></strong></span><span class="auto-style2">&nbsp; and 
		</span> 
		<span class="auto-style3"><strong><em>Peace of Mind</em></strong></span><span class="auto-style2">. 
		</span> 
 
 
</p>
		<p>
		<span class="auto-style2">You can call us on 029 2025 6451, or 
		email us on </span> <strong>
		<a href="mailto:[email protected]?subject=Enquiry From Website" title="Email care-in-the-vale">
		<span class="auto-style2">[email protected]</span></a></strong>.</p>
		<DIV ID="TICKER" STYLE="overflow:hidden; width:520px"  onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
  NEWS FLASH .........................Now Recruiting. To book your place on an Open Day, please telephone 07941 785 809 or 07818 531 958
			<br />
</DIV>
<script type="text/javascript" src="../care-in-the-vale/webticker_lib.js" language="javascript"></script>
<div  class="tablediv">
<div class="rowdiv">
<div  class="celldiv">
	<img alt="Penarth Town Centre" height="165" src="../care-in-the-vale/images/Penarth_Town_Centre_213x160.jpg" width="224" class="auto-style9" /></div>
<div  class="celldiv" style="width: 48%; height: 167px">
	<img alt="Quote - Youth would be a fine state if it came a little later in life - End Quote" height="138" src="../care-in-the-vale/images/quote8.gif" width="189" class="auto-style3" /></div>
</div>
<div class="rowdiv">
<div  class="celldiv" style="width: 48%; height: 114px"><span class="auto-style6">Royal Buildings on the western 
	corner of <br />
	Stanwell Road and Victoria Road, Penarth.</span><br class="auto-style6" />
	&nbsp;<br class="auto-style6" />
	<span class="auto-style7"><strong><em>care-in-the-vale</em></strong></span><span class="auto-style6"> has its offices in this block, on 
	Stanwell Road. </span><br class="auto-style6" />
	<br class="auto-style6" />
	<span class="auto-style6">© Copyright </span>
	<a href="http://www.geograph.org.uk/profile/39302">
	<span class="auto-style6">John Grayson</span></a><span class="auto-style6"> 
	and licensed for </span>
	<a href="http://www.geograph.org.uk/reuse.php?id=1972630">
	<span class="auto-style6">reuse</span></a><span class="auto-style6"> under 
	this </span><a href="http://creativecommons.org/licenses/by-sa/2.0/">
	<span class="auto-style6">Creative Commons Licence</span></a><span class="auto-style5">.</span></div>
<div  class="auto-style1">
	<img alt="care-in-the-vale Penarth Office" height="99" longdesc="care-in-the-vale, 12A Royal Buildings, Stanwell Road, Penarth, Vale of Glamorgan, CF64 3ED" src="../care-in-the-vale/images/shopfront.jpg" width="105" /></div>
</div>
</div>
</div>
</div>
<!-- End of Main Content -->			
 
<!-- Beginning of Footer -->	
	<div id="footer">
		<div align="center"><strong><em><font size="3" color="#ffcc00">We won&#39;t let Disability, Age or Illness get in the
               way!!!<br />
			</font>
               &nbsp;<p><span><strong>12A Royal Buildings | Stanwell Road | Penarth | CF64 3ED<br />
		<br />
		Tel.: 029 2025 6451<br />
		</strong></span> </p>
		<p><strong>Email:&nbsp; <a href="mailto:[email protected]">[email protected]</a></strong></p>
		<p>&nbsp;</p>
			<p>
			<img alt="Care and Social Services Inspectorate Wales logo " height="68" longdesc="Registered with the  Care and Social Services Inspectorate Wales " src="../care-in-the-vale/images/CSSI_logo.gif" width="140" /></p>
		<div align="center">
			Registered with the Care and Social Services Inspectorate Wales
			<br />
			<br />
			Interested in a career with<span class="auto-style2"> </span> <span class="auto-style1"><em><strong>
			<span class="auto-style8">care-in-the-vale</span></strong></em></span>? <br />
			Please call us or complete and send our handy
			<a href="http://www.care-in-the-vale.com/job_application.html" title="Job Enquiry Form">
			Job&nbsp;Application Form</a><!--"''"--></div>
		<p>&nbsp;</p>
		<p>Copyright 2011 | All Rights Reserved</p>
		<p>&nbsp;</p>
		 <div style="text-align:center;">
               <!--gem:tlx.tlx.timestamp--><script src="http://twe01.svcs.sitebuilderservice.com/svcs/timestamp.js"></script><script>var moment = new Date();
    var result = Stamp(moment.getTime(), "dn d1 mn y4 h12:mmampm", "January|February|March|April|May|June|July|August|September|October|November|December","Sunday|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday"); document.write(result);
  </script>
               <!--end gem--><!--"''"--></div>
 
	</div>
<!-- End of Footer -->	
 
</div>
<!-- End of Page Container -->	
 
</body>
 
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

100% width + padding != 100%

You've given #banner a width of 100% but then padding of 10px on all sides which actually makes it wider than 100% which is why it seems wider than the navigation underneath it. You're also missing the units from the margin rule for #banner too (i.e. 10 0 instead of 10px 0 ).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

NevNic
Offline
newbie
Last seen: 11 years 27 weeks ago
Timezone: GMT+7
Joined: 2011-03-18
Posts: 8
Points: 9

CSS 'Table' Does Not Display Properly

OK, that's great - its fixed the lining up of the horizontal navbar, thank you!

Can you please give me a clue as to why the CSS 'Table' lower in the page does not display properly, even though it looks OK in Expression?

Thanks

NevNic

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Floats

The celldivs need to be floated and given a width.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

NevNic
Offline
newbie
Last seen: 11 years 27 weeks ago
Timezone: GMT+7
Joined: 2011-03-18
Posts: 8
Points: 9

Floats

The celldivs have width and float defined in the css?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Validate your code, you've

Validate your code, you've got errors in your CSS, e.g.:

..celldiv
 
..rowdiv

By the way, I wouldn't use display:table-cell/table-row. CSS table support is patchy; better off using floats or display:inline-block.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

NevNic
Offline
newbie
Last seen: 11 years 27 weeks ago
Timezone: GMT+7
Joined: 2011-03-18
Posts: 8
Points: 9

Floats

The celldivs have width and float defined in the css?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why have you just reposted your previous comment?

Stare

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

NevNic
Offline
newbie
Last seen: 11 years 27 weeks ago
Timezone: GMT+7
Joined: 2011-03-18
Posts: 8
Points: 9

Repost

Sorry, finger trouble! Oups

css code corrected, but table still not displaying properly (although looks OK in Expression)

Now grappling with display-inline-block ..............................

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

NevNic wrote: although looks

NevNic wrote:

although looks OK in Expression

Forget about what it looks like in that; the only true guide to how your pages render are browsers themselves.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

NevNic
Offline
newbie
Last seen: 11 years 27 weeks ago
Timezone: GMT+7
Joined: 2011-03-18
Posts: 8
Points: 9

CSS 'Table' Does Not Display Properly

I also cannot get display-inline-block to display properly what should be, after all, a simple table.

I am trying very hard to learn and use CSS but, having spent hours and hours on these issues, I am giving up on CSS and going back to a simple HTML table. I know how to do that and it works. CSS just ain't worth the bother.

Thanks for your help anyway.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

And pray why do you think CSS

And pray why do you think CSS is easy or can be learnt overnight or with a few hours study?

CSS is - on the face of it - a simple declarative language so appears far more easy than scripting languages but it hides a far more involved process and one that takes time to fully grasp and understand - you're looking at six months approx before you're comfortable using it and a year to master it- give or take Smile

But hey if you prefer to use outmoded and incorrect usages of elements to construct layouts then go ahead, tables have a definite purpose and that is not to hold layouts!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me