Fixing Text In An Absolute Position

1431 Views 18 Replies 4 Participants Last post by SABL, Apr 3, 2011

NevNic

Discussion Starter · Mar 31, 2011

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)

Status: Not open for further replies.

1 - 19 of 19 Posts

Laxer

· #2 · Mar 31, 2011

The problem is your left menu changes....

when your not on the home page there is no "home" link.

the text isn't moving your menu is.

I also notice a variation in the size of the header across multiple pages.

are you using php includes and css?

or is everything embedded?

NevNic

Discussion Starter · #3 · Mar 31, 2011

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

ointer;}
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

ointer;}
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

ointer;}
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;
}

See less See more

Laxer

· #4 · Apr 1, 2011

No need to keep attaching the css i have looked through it numerous times

what i would do is include the left menu and the top menu.

once these are included the page itself will no longer "move"

once this is done i will help you line up your headers and give appropriate css for it

NevNic

Discussion Starter · #5 · Apr 1, 2011

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?

NevNic

Discussion Starter · #6 · Apr 1, 2011

and code is: ?

Laxer

· #7 · Apr 1, 2011

If that's how your other includes are that's fine. I personally always do my includes through php.

Here is the code

Code:

<?php [COLOR=Black]include 'include.php'; ?>[/COLOR]

You then copy the menu into a file in this case include.php, and replace all places the menu is with the include respectively.

mcorton

· #8 · Apr 1, 2011

Hi NevNic, I had a look at your website this morning and was wondering why you need our help? It appears you're an authority and should be teaching us.

NevNic

Discussion Starter · #9 · Apr 2, 2011

Hi mcorton

Thanks but, as Laxer will confirm, its been reached somehow by trial and error, and with the invaluable help of Laxer. NevNic

NevNic

Discussion Starter · #10 · Apr 2, 2011

Hi Laxer

Sorry I cannot get the Include to work.

I tried it first with the Top Banner code:


<div id="banner" style="width: 100%; height: 300px">
</div>


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: ?

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

See less See more

mcorton

· #11 · Apr 2, 2011

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.

NevNic

Discussion Starter · #12 · Apr 2, 2011

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!

See less See more

SABL

· #13 · Apr 2, 2011

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!!

Laxer

· #14 · Apr 2, 2011

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.

NevNic

Discussion Starter · #15 · Apr 3, 2011

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.

Laxer

· #16 · Apr 3, 2011

Thank you for explaining yourself, i would suggest removing those pages if your site is "down"

also were you able to get the includes working?

NevNic

Discussion Starter · #17 · Apr 3, 2011

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......

Laxer

· #18 · Apr 3, 2011

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.

SABL

· #19 · Apr 3, 2011

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.