Tech Support Forum banner
Status
Not open for further replies.
1 - 19 of 19 Posts

·
Registered
Joined
·
40 Posts
Discussion Starter · #1 ·
Please see care-in-the-vale - Home Page

On the Home page, the page heading "care-in-the-vale" appears directly opposite "Family and Friends".

How can I fix the position of the page headings on all opf the other pages so that they appear in the same place as the Home page heading, i.e. directly opposite "Family and Friends"?

Thank you

NevNic (CSS Newbie)
 

·
Registered
Joined
·
40 Posts
Discussion Starter · #3 ·
Thank you again Laxer for your interest.

I am using CSS mainly (see below) but the menus and footer are embedded because I have not yet figured how to get Include working!

Similarly, I ended up using an HTML table at the lower part of the page as I could not get it right in CSS.

I take the point about the Home menu item on all pages except Home page.

I would still like to ensure that the Heading for each page a) looks the same, and b) lines up in the same place on each page.

Your valuable advice is much appreciated.

NevNic

CSS:

@charset "iso-8859-1";
body {
font-family: Calibri;
margin: 0;
padding: 0;
background-color: #193EBC; /*dark blue*/;
color: #193EBC;
}
/*===============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: 0px;
background-color: #C4E3F7;
background-image: url('images/care-in-the-vale_banner.gif');
height: 90px;
background-repeat: no-repeat;
color: #C4E3F7;
max-width: 100%;
max-height: 300px;
}
/*=================== 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:#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#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("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("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("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("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("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("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;
font-family: Calibri;
}
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;
}
 

·
Registered
Joined
·
40 Posts
Discussion Starter · #5 ·
OK, thanks v. much Laxer. I've tried this before, but could not get the Include working.

I cut and paste the appropriate menu code to create a file, e.g. leftmenu.html, correct? Or does it need to be a php file? Then use the include leftmenu.html command where the code used to be, correct?
 

·
Registered
Joined
·
40 Posts
Discussion Starter · #10 ·
Hi Laxer

Sorry I cannot get the Include to work.

I tried it first with the Top Banner code:

<!-- Beginning of Top Banner -->
<div id="banner" style="width: 100%; height: 300px">
</div>
<!-- End of Top Banner -->

I saved it first as a .php file, banner.php, then replaced it with <?php include 'banner.php'; ?> in index.html.

When I tried to save index.html, MS Expression gave me the following error message, but let me save it anyway:

This page contains one or more PHP script blocks which require that you save the page with a PHP file extension. Remove the PHP script blocks from the page or save the page with a PHP file extension.


But in the browser (IE8) on the index.html the banner just disappeared.


Same story with a .html include: <!-- #include virtual="banner.html" -->?


By the way I saved the code and tried it out with both just the code in the include file, and with the !DOCTYPE, html, head and body code, but which is actually correct?


Your further advice will be very much appreciated.


Thanks


NevNic

Code attached in WORD doc
 

Attachments

·
Sr. Tech, TSF Team Emeritus Microsoft Support Staf
Joined
·
1,099 Posts
Yes they all are. About Us. We are all volunteers and have contributed a lot of time into your posts. You posted the link to your site in almost every post you made creating backlinks to your site. I don't think you wanted our advise as much as the SEO given by posting the links. These may be legitimate problems you're facing but I'll bet you're being paid for our solutions. We're volunteer geeks but we're not stupid.
 

·
Registered
Joined
·
40 Posts
Discussion Starter · #12 ·
No, you are completely mistaken!

And I am rather hurt by your remarks.

I am only being paid for what I am doing in the sense that my brother and myself, with one other partner, are in the process of setting up this care-in-the-vale business, and as we wish to keep start-up costs to the minimum, I am developing the website myself, rather than outsourcing it.

I am relatively competent in html but, as I've explained elsewhere, I am a CSS newbie, and I am struggling to get to grips with it in the interests of observing WWW standards. The problems I have encountered are genuine, and even CSS experts such as yourself and Laxer have not found them easy to resolve. As you may see on the Home page, there is a big notice saying that the site is under development and that some pages may not display properly. Laxer's help in particular has been invaluable.

As to your comments re back-links, that is just nonsense, and the last thing on my mind just now. When I do get around to SEO'ing the site, we will be looking for link reciprocity, but a back-link with the TSF would be completely irrelevant and might even harm the site's rankings! Also, how else can I demonstrate the problem without referring to the site URL?

You say that "We're volunteer geeks but we're not stupid" - in this case, you have been!
 

·
Administrator, TSF Manager
Joined
·
28,154 Posts
I have been following the various threads that have been created in regard to the site being developed. The site mentioned by mcmorton has nothing to do with the links in this thread that concern the site being worked on.

The site mcmorton is speaking of involves you (NevNic) promoting yourself as a professional web developer. Does "Nift-E" ring a bell?? You do offer quotes for website developement.....

Being a retired construction professional familiar with health care I can assure you that the cost involved in developing a website will be peanuts compared to the facility and licensing.

You say that "We're volunteer geeks but we're not stupid" - in this case, you have been!
In this case I don't think so......you are advertising services you cannot provide!!
 

·
Registered
Joined
·
5,202 Posts
Nevnic, in order to use php code on your page it has to be .php

if you rename index.html to index.php upload it and delete the original it should work.'

I too wondered about Nift-E-solutions. One thing the is keeping me involved it just the experience.

To be honest most of my webdesign has been self taught. I do help manage my schools website and have been looking to expand my knowledge to pick a career. Helping others with their site problems offer invaluable experience i can't get in the class room.
 

·
Registered
Joined
·
40 Posts
Discussion Starter · #15 ·
Hi Laxer, SABL,

Aah I see where you are coming from now.

But, have you actually looked at the Nift-e site? "Gone: golfing" "Be back: maybe".

I am not in that business any more and, when I was, I offered SEO services. But my competency, as I have mentioned, is in HTML, not the wonderful but hard to get to grips with, world of CSS.
 

·
Registered
Joined
·
40 Posts
Discussion Starter · #17 ·
Hi Laxer

I use the Nift-E site mainly as a cheap and convenient place to store my backup data and to hold the pages which I am experimenting with, as per care-in-the-vale. I agree I should take down any non-applicable pages.

No, still unable to get the includes working. My brain's in a spin just now so I am taking a break and will try again later today......
 

·
Registered
Joined
·
5,202 Posts
No worries, and i was referring to your nift-e site.

what i would do is remove all files except index remotely and keep them locally.

you can then upload files if you need them. and remove them afterwards.

just a random thought, for a simple file server have you tried: Dropbox - Online backup, file sync, and sharing made easy.
 

·
Administrator, TSF Manager
Joined
·
28,154 Posts
Hi NevNic,

Yes, the initial page I viewed did state you were golfing. But the other pages are very much active.

Laxer is enjoying the challenge for his own experience and learning......he's just getting started on his road towards employment and career choices. Laxer is doing a fine job....please continue.
 
1 - 19 of 19 Posts
Status
Not open for further replies.
Top