Revising page from previous

Hi, the following changes I would like to make the page but I’m struggling. The DIV Content has nested DIVs which contain H1 tags I want to position all the nested H1 tags in the lower right hand corner just above the footer, hopefully that should explain the H1 problem many have had problems understanding :slight_smile:

The second thing is when the header is scrolled out of view I want the navigation to stick to the top of the browser, I’m sure some of you have seen this before !?!? I hope :slight_smile: The DIV #silhouette I want fixed so that it doesn’t scroll, I’ll focus in on those problems at present. I need to get this page up and running before the end of the coming month so I would appreciate the help and if my replies are a little delayed that is so I can answer you precisely without a game of one step forward, three steps back :slight_smile: Ignore all other threads which were linked to problems posted in this new thread it’s a clean state.

Hi,

The reason you haven’t got very far with this is because some of the things you are asking don’t really make a lot of sense in relation to a usable layout and even when they do make sense they aren’t really feasible. You need to think about how thing will actually work on a webpage when there is real content to contend with. It may be easier enough to draw a design but it must be workable.

If you want silhouette to be fixed in position then you need to use fixed positioning and the same goes for your h1 element. The problem with fixed positioning is exactly as it names suggests and elements are fixed in place and will overlap or become unreachable should the appear outside of the viewport at some stage. Ultimately fixed positioning is unmanageable for all but small areas (or fixed headers and footers).

For your navigation I think you are looking for a floating panel script of which there are [URL=“http://www.dynamicdrive.com/dynamicindex17/floatbar.htm”]a number about and I suggest that you try some out first and learn how they work and then try to implement them into your code. Once you’ve had a go at that then we can perhaps help with fixing bugs from the result.

Here is your silhouette and h1 fixed into place although it makes no real sense without content or explanation of how the page will ultimately function. We’d need to see a proper image of the final design along with content and what these coloured blocks are supposed to be doing and what they are for.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery-1.4.2.min.js"></script>
<script src="http://www.thecreativesheep.ca/construction/js/jquery.innerfade.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.min.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/contact-files/contact-form.js"></script>
<script type="text/javascript">
jQuery(function ($) {
    $('#nav').each(function () {
        $('a', this).click(function () {
            if (this.hash) {
                $('#content').children().hide();
                $(this.hash).show();
                 setTimeout(function () {$('#silhouette').flip({
    direction: 'lr',
    color: 'red'
});
}, 1200);

                return false;
                            }
        });
        $('a:eq(2)', this).click();
    });
});

</script>
<script type="text/javascript"> $(document).ready( function(){
  $('#services_content').innerfade({ animationtype: 'slide', speed: 400, timeout: 2000, type: 'sequence', containerheight: '200px' }); });
</script>
<style type="text/css">
html, body {
    height:100%;/*reference for #wrapper min-height:100%*/
}
body {
    margin:0;
    padding:0;
    background:#555;
    font:100%/1.3 arial, helvetica, sans-serif;
    color:#000;
}
h1 {
    margin:0;
    font-size:1.6em;
    text-align:center;
}
h2 {
    margin:10px 10px 0;
    font-size:1.3em;
}
p {
    margin:10px;
}
/*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
body:before {/*Opera min-height 100% fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*eliminate need for inner non clearing element*/
}
#wrapper:after,  /*#wrapper:after for IE8 min-height:100% Fix*/ #content:after { /*#content:after for Float Containment*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*fix IE8 min-height:100% bug*/
    font-size:0;
}
/*===  Begin Layout Structure ===*/
#wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
    width:1120px;
    min-height:100%;
    overflow: hidden;
    margin:0 auto;
    background:#000000;/*BG color for #content*/
    position: relative;
}
#header {
    position:relative;/*establish containing block for AP children (#nav)*/
    min-height:120px;/*152px total w/ padding*/
    background: #FFFFFF;
    padding:2px 0 12px;/*preserve space for #nav and uncollapse child margins*/
    background:#AAA;
    border-width: medium;
}
.logo {
    background: #008080;
    width: 400px;
    position:absolute;
    height: 120px;
    margin: 24px 0 25px 90px;
    border-width: medium;
}
.logo {
    background: #808000;
    margin-top: 12px;
    height: 95px;
    width: 275px;
}
.partwo {
    background: #FFFF00;
    margin: 12px 12px 12px 12px;
    width: 65px;
    height: 50px;
}
/*-- Menu Styles --*/
ul#nav, #nav ul { /*group together for shared styles*/
    display:table; /*webkit fix*/
    margin:-16px 0 0;/*pull up into header div*/
    padding:0;/*remove the defaults*/
    list-style:none outside none;
    white-space:nowrap; /*stop child LI from wrapping*/
    word-spacing:-1em;
}
#nav {
    height: 15px;
    width: 250px;
    color: #0000FF;
}
#nav li {
    position:relative;/*sub UL containing block*/
    display:inline-block;
    vertical-align:top;
    word-spacing:0;/*reset from UL*/
}
* html #nav li {
    display:inline;
} /*IE6*/
*+html #nav li {
    display:inline;
} /*IE7*/
#nav a {
    display:block; /*set dimensions (Only Opera chokes on a min-width float, go figure!)*/
    min-width:95px;/*135px with padding*/
    height:15px;
    margin:0 2px 0 0;/*optional margins*/
    padding:0 15px 0 0;
    color:#FFF;
    font:bold 12px/15px arial;
    text-decoration:none;
    background:#000;
}
* html #nav a {
    width:105px
}/*IE6 min-width*/
#nav a:active, #nav a:focus, #nav a:hover {
    color:#BDF;
    background:#333;
}

#nav ul {
    position:a;/*remove from page flow*/
    left:0;
    top:100%;
    margin:0 0 0 -999em;
}
#nav li:hover ul {
    margin-left:0;
}
#nav li li {
    background:#CCC;
}/*IE7 needs a background to hold anchor with margins*/
/*-- Content Styles --*/
#content {
    width:100%;/*IE6/7 haslayout for future float containment*/
    padding-bottom:80px;/*set a bottom padding to preserve the footer*/
    background:#000000;/*same as #wrapper or none at all*/
}
#content p {
    margin:40px 10px;
}
/*-- Footer Styles --*/
#footer {
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    height:80px;
    background: #CCC;
}
#gears {
    position: absolute;
    bottom: 34px;
    background: #800000;
    width: 250px;
    height: 112px;
    float: left;
}
.innerfoot {
    width:1120px;
    height:80px;
    margin:0 auto;
    overflow:hidden;/*uncollapse child margins*/
    background:#AAA;
    text-align:center;
}
[B]#silhouette {
    position: fixed;
    margin-left:50px;
    bottom:80px;
    width: 150px;
    height: 285px;
    background: #FF0000;
}[/B]
#intro {
    width: 576px;
    height: 350px;
    background: #C0C0C0;
    margin: 14px 0 0 20px;
}
#Serv {
    position: relative;
    width: 680px;
    height: 260px;
    margin: 78px 0 90px 268px;
    background: #0000CD url('http://www.thecreativesheep.ca/construction/services_bg.png');
}
.servicetxta {
    font-size: 0.7em;
}
#Contact {
    background: #C0C0C0;
    overflow: hidden;
    width: 650px;
    margin: 40px 35px 0 300px;
}
#Serv h1 {
[B]    position: fixed;
    margin: 270px 42px 0 700px;[/B]
    bottom:80px;
    color: #FFFFFF;
}
#Contact p {
    color: #FFFFFF;
}
#Contact name {
    background: #00FF00;
    font: helvetica;
}
#services_content {
    list_style_type:disc;
 #contactForm {
 height: 150px;
 width: 250px;
}
#Illus_3D {
    width: 576px;
    height: 350px;
    margin: -26px 0 0 268px;
    background: #800000;
}
#header, ul#nav {
    position:relative;
    z-index:1;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
#wrapper{height:100%;}/*min-height for IE6*/
#footer{/*fixed footer for IE6 using expression*/
    position:absolute;
    top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
</style>
<![endif]-->
</head>
<body>
<div id="header">
    <div class="logo">
        <div class="partwo"></div>
    </div>
</div>
<ul id="nav">
    <li><a href="#intro">Portfolio</a>
        <ul class="drop">
            <li><a href="#Illus_3D">Illustrations &amp; 3D Stills</a></li>
            <li><a href="#ThreeDMot">3D Motion</a></li>
            <li><a href="#DemoR">Demo Reel</a></li>
            <!--<li><a href="#">Ready Link</a></li>-->
        </ul>
    </li>
    <li><a href="#Serv">Services</a></li>
    <li><a href="http://www.someone.com">Bio3Design</a></li>
    <li><a href="#Contact">Contact</a></li>
</ul>
<div id="wrapper">
    <div id="content">
        <div id="intro"></div>
        <div id="Serv">
            <!--Beginning of Service ID -->
            <h1>Services</h1>
            <span class="servicetxta">The Creative Sheep offers these design services</span>
            <ul id="services_content">
                <li>Character Design</li>
                <li>Animation (Broadcast & Industrial)</li>
                <li>Logo Design</li>
            </ul>
            <p><a href="#Contact">Contact</a>Christopher regarding the services offered</p>
        </div>
        <!-- end of Service ID -->
        <div id="Contact">
            <h1>Contact</h1>
        </div>
        <div id="Illus_3D">
            <h1>Illustrations & 3D Stills</h1>
        </div>
        <div id="ThreeDMot">
            <h1>3D Motion</h1>
        </div>
        <div id="DemoR">
            <h1>Demo Reel</h1>
        </div>
    </div>
        <div id="silhouette"></div>
</div>
<!-- end wrapper -->
<div id="footer">
<div id="gears"></div>
</div>
</div>
</body>
</html>

The reason you haven’t got very far with this is because some of the things you are asking don’t really make a lot of sense in relation to a usable layout and even when they do make sense they aren’t really feasible. You need to think about how thing will actually work on a webpage when there is real content to contend with. It may be easier enough to draw a design but it must be workable.

When things are in place or heading in the right direction, everything will make sense, take my word for it appears all over the place but there won’t be much content most of the content will depend on a script, it’s more design and aesthetics then content. Each Sub-DIV located within Content will have a unique background graphic which is already finished. On top will sit script gallery, that is fairly self-explanatory. :slight_smile:

If you want silhouette to be fixed in position then you need to use fixed positioning and the same goes for your h1 element. The problem with fixed positioning is exactly as it names suggests and elements are fixed in place and will overlap or become unreachable should the appear outside of the viewport at some stage. Ultimately fixed positioning is unmanageable for all but small areas (or fixed headers and footers).

The Silhouette DIV is exactly how I want it to work :slight_smile: The H1 that is located under #services is exactly how I want it, except I don’t want it to have a fixed position that goes for all the other nested H1 tags I want to be able to give it some positioning that is the only clause that I have with H1 tags :slight_smile:

For your navigation I think you are looking for a floating panel script of which there are a number about and I suggest that you try some out first and learn how they work and then try to implement them into your code. Once you’ve had a go at that then we can perhaps help with fixing bugs from the result.

The second link of the two you gave is exactly what I want, except one small catch I don’t want it to look as though it’s floating until and only until the header is out of view and the navigation touches the top of the page, I don’t know if a condition is used to control this !?!?!?!?

I hope that I have explained myself in the sense whereas it’s understood the direction of the page. Taking it piece by piece but as I said without taking one step forward and three steps back :slight_smile:

he H1 that is located under #services is exactly how I want it, except I don’t want it to have a fixed position that goes for all the other nested H1 tags I want to be able to give it some positioning that is the only clause that I have with H1 tags

I’m not sure what you mean by that but you can either absolutely place it there or shift it around with margins. It all depends on what if?


#Serv h1 {
   [B] position: absolute;
    right:-50px;
    top:400px;[/B]
    color: #FFFFFF;
}


I notice you have some corrupt css here:


#services_content {
    list_style_type:disc;
 #contactForm {
 height: 150px;
 width: 250px;
}


See if you can work out what’s wrong :slight_smile:

It’s the missing }:

#services_content {
    list_style_type:disc;
[b]}[/b]
 #contactForm {
 height: 150px;
 width: 250px;
}

Got you Paul! Got you, got you, got you !!! Hahahaha :rofl: I’m keeping tabs!

Now you’ve told him lol :slight_smile:

But… that was the point! Don’t you recall ?! You’ve messed with my attempts to make OPs think for them self a few times already! Now it’s payback time: “Asta la vista, baby!” Hahahaha

The H1 tag #Serv H1 is positioned exactly where I want it, now in the Web Dev ToolKit under Information => View Document outline you’ll see all the H1 tags the rest of the H1 tags need to be positioned in roughly the exact same location as #Serv H1 I’ve tried #contact h1 but that didn’t work.

I want to add something else, first I must say something you guys have been telling me for a long time :slight_smile: that Web Dev tool kit does explain alot and helps me explain my problems to you guys :slight_smile: Second this problem is pretty obvious but I’m going to point it out, if you view the navigation and hover over the word ‘portfolio’ you’ll see it stretch something that was not going on previously and I really don’t know how it happened.

Doh! :slight_smile:

I’m sure you can find that error for yourself :slight_smile:


#nav ul {
    [B]position:a[/B];/*remove from page flow*/
    left:0;
    top:100%;
    margin:0 0 0 -999em;
}


Don’t worry noonope will find it for you:)

As I said before with your h1 headings you only have to follow the same rules for the services heading if you want the other headings in the same place.(Note you should really only have one h1 heading per page but I suppose as you are swapping panels then each new panel could be considered a new page. personally I would have used an h2 instead.)

It would have been sensible to keep all your panels the same size but you seem to have made them all different which is a nightmare for easy maintenance and means you have to use separate styles and rules for each even though they are fairly similar. You should have used a class and styled then all the same size.

I’ve adjusted some of the headings to give you an idea but you can tweak them into position yourself.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery-1.4.2.min.js"></script>
<script src="http://www.thecreativesheep.ca/construction/js/jquery.innerfade.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.min.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/construction/jquery.flip.js"></script>
<script type="text/javascript" src="http://www.thecreativesheep.ca/contact-files/contact-form.js"></script>
<script type="text/javascript">
jQuery(function ($) {
    $('#nav').each(function () {
        $('a', this).click(function () {
            if (this.hash) {
                $('#content').children().hide();
                $(this.hash).show();
                 setTimeout(function () {$('#silhouette').flip({
    direction: 'lr',
    color: 'red'
});
}, 1200);

                return false;
                            }
        });
        $('a:eq(2)', this).click();
    });
});


</script>
<script type="text/javascript"> $(document).ready( function(){
  $('#services_content').innerfade({ animationtype: 'slide', speed: 400, timeout: 2000, type: 'sequence', containerheight: '200px' }); });
</script>
<style type="text/css">
html, body {
    height:100%;/*reference for #wrapper min-height:100%*/
}
body {
    margin:0;
    padding:0;
    background:#555;
    font:100%/1.3 arial, helvetica, sans-serif;
    color:#000;
}
h1 {
    margin:0;
    font-size:1.6em;
    text-align:center;
}
h2 {
    margin:10px 10px 0;
    font-size:1.3em;
}
p {
    margin:10px;
}
/*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
body:before {/*Opera min-height 100% fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*eliminate need for inner non clearing element*/
}
#wrapper:after,  /*#wrapper:after for IE8 min-height:100% Fix*/ #content:after { /*#content:after for Float Containment*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*fix IE8 min-height:100% bug*/
    font-size:0;
}
/*===  Begin Layout Structure ===*/
#wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
    width:1160px;
    min-height:100%;
    overflow: hidden;
    margin:0 auto;
    background:#000000;/*BG color for #content*/
    position: relative;
}
#header {
    position:relative;/*establish containing block for AP children (#nav)*/
    min-height:120px;/*152px total w/ padding*/
    background: #FFFFFF;
    padding:2px 0 12px;/*preserve space for #nav and uncollapse child margins*/
    background:#AAA;
    border-width: medium;
}
.logo {
    background: #008080;
    width: 400px;
    position:absolute;
    height: 120px;
    margin: 24px 0 25px 90px;
    border-width: medium;
}
.logo {
    background: #808000;
    margin-top: 12px;
    height: 95px;
    width: 275px;
}
.partwo {
    background: #FFFF00;
    margin: 12px 12px 12px 12px;
    width: 65px;
    height: 50px;
}
/*-- Menu Styles --*/
ul#nav, #nav ul { /*group together for shared styles*/
    display:table; /*webkit fix*/
    margin:-16px 0 0;/*pull up into header div*/
    padding:0;/*remove the defaults*/
    list-style:none outside none;
    white-space:nowrap; /*stop child LI from wrapping*/
    word-spacing:-1em;
}
#nav {
    height: 15px;
    width: 250px;
    color: #0000FF;
}
#nav li {
    position:relative;/*sub UL containing block*/
    display:inline-block;
    vertical-align:top;
    word-spacing:0;/*reset from UL*/
}
* html #nav li {
    display:inline;
} /*IE6*/
*+html #nav li {
    display:inline;
} /*IE7*/
#nav a {
    display:block; /*set dimensions (Only Opera chokes on a min-width float, go figure!)*/
    min-width:95px;/*135px with padding*/
    height:15px;
    margin:0 2px 0 0;/*optional margins*/
    padding:0 15px 0 0;
    color:#FFF;
    font:bold 12px/15px arial;
    text-decoration:none;
    background:#000;
}
* html #nav a {
    width:105px
}/*IE6 min-width*/
#nav a:active, #nav a:focus, #nav a:hover {
    color:#BDF;
    background:#333;
}
#nav ul {
    position:absolute;/*remove from page flow*/
    left:0;
    top:100%;
    margin:0 0 0 -999em;
}
#nav li:hover ul {
    margin-left:0;
}
#nav li li {
    background:#CCC;
}/*IE7 needs a background to hold anchor with margins*/
/*-- Content Styles --*/
#content {
    width:100%;/*IE6/7 haslayout for future float containment*/
    padding-bottom:80px;/*set a bottom padding to preserve the footer*/
    background:#000000;/*same as #wrapper or none at all*/
}
#content p {
    margin:40px 10px;
}
/*-- Footer Styles --*/
#footer {
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    height:80px;
    background: #CCC;
}
#gears {
    position: absolute;
    bottom: 34px;
    background: #800000;
    width: 250px;
    height: 112px;
    float: left;
}
.innerfoot {
    width:1120px;
    height:80px;
    margin:0 auto;
    overflow:hidden;/*uncollapse child margins*/
    background:#AAA;
    text-align:center;
}
#silhouette {
    position: fixed;
    margin-left:50px;
    bottom:80px;
    width: 150px;
    height: 285px;
    background: #FF0000;
}
#intro {
    width: 576px;
    height: 350px;
    background: #C0C0C0;
    margin: 14px 0 0 20px;
}
#Serv {
    position: relative;
    width: 680px;
    height: 260px;
    margin: 78px 0 90px 268px;
    background: #0000CD url('http://www.thecreativesheep.ca/construction/services_bg.png');
}
.servicetxta {
    font-size: 0.7em;
}
#Contact {
    background: #C0C0C0;
    overflow: hidden;
    width: 650px;
    margin: 40px 35px 0 300px;
}
#Serv h1,#Contact h1,#Illus_3D h1,#ThreeDMot h1,#DemoR h1 {
    position: absolute;
    right:-90px;
    top:415px;
    color: #FFFFFF;
}
#Contact h1{right:120px;top:480px}
#Illus_3D h1{right:100px;top:500px}
#ThreeDMot h1{right:40px;top:480px}
#DemoR h1{right:40px;top:480px}





#Contact p {
    color: #FFFFFF;
}
#Contact name {
    background: #00FF00;
    font: helvetica;
}
#services_content {
    list_style_type:disc;
}
 #contactForm {
 height: 150px;
 width: 250px;
}
#Illus_3D {
    width: 576px;
    height: 350px;
    margin: -26px 0 0 268px;
    background: #800000;
}
#header, ul#nav {
    position:relative;
    z-index:1;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
#wrapper{height:100%;}/*min-height for IE6*/
#footer{/*fixed footer for IE6 using expression*/
    position:absolute;
    top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
</style>
<![endif]-->
</head>
<body>
<div id="header">
    <div class="logo">
        <div class="partwo"></div>
    </div>
</div>
<ul id="nav">
    <li><a href="#intro">Portfolio</a>
        <ul class="drop">
            <li><a href="#Illus_3D">Illustrations &amp; 3D Stills</a></li>
            <li><a href="#ThreeDMot">3D Motion</a></li>
            <li><a href="#DemoR">Demo Reel</a></li>
            <!--<li><a href="#">Ready Link</a></li>-->
        </ul>
    </li>
    <li><a href="#Serv">Services</a></li>
    <li><a href="http://www.someone.com">Bio3Design</a></li>
    <li><a href="#Contact">Contact</a></li>
</ul>
<div id="wrapper">
    <div id="content">
        <div id="intro"></div>
        <div id="Serv">
            <!--Beginning of Service ID -->
            <span class="servicetxta">The Creative Sheep offers these design services</span>
            <ul id="services_content">
                <li>Character Design</li>
                <li>Animation (Broadcast & Industrial)</li>
                <li>Logo Design</li>
            </ul>
            <p><a href="#Contact">Contact</a>Christopher regarding the services offered</p>
            <h1>Services</h1>
        </div>
        <!-- end of Service ID -->
        <div id="Contact">
            <h1>Contact</h1>
        </div>
        <div id="Illus_3D">
            <h1>Illustrations & 3D Stills</h1>
        </div>
        <div id="ThreeDMot">
            <h1>3D Motion</h1>
        </div>
        <div id="DemoR">
            <h1>Demo Reel</h1>
        </div>
    </div>
    <div id="silhouette"></div>
</div>
<!-- end wrapper -->
<div id="footer">
    <div id="gears"></div>
</div>
</div>
</body>
</html>

Try to make some of your own changes next time before asking a question as we want you to learn how to do this for yourself.:slight_smile:

Paul, all the H1 tags that are nested within Content are still not in the lower bottom right hand corner the only exception is #services. I want to learn how to do this for myself but sometimes you need assistance and it may seem that I need more assistance then other folk but the other folk don’t have the nerve to keep asking until it’s solved and simultaneously understand it, everyone learns at there own pace.

I don’t understand exactly. I’ve given you the code above to move the heading tags.


#Serv h1,#Contact h1,#Illus_3D h1,#ThreeDMot h1,#DemoR h1 {
    position: absolute;
    right:-90px;
    top:415px;
    color: #FFFFFF;
}
#Contact h1{right:120px;top:480px}
#Illus_3D h1{right:100px;top:500px}
#ThreeDMot h1{right:40px;top:480px}
#DemoR h1{right:40px;top:480px}



Is that not what you meant.

It works, and that is exactly what I mean the program that I’m using didn’t (Aptana) update the server with the version I had made the changes on, Arrrghh !!! I’ll do some adjusting and try my next hurdle !!

Paul can I ask why you had to put all of the H1 in a style then separately style the H1 again ?

The first block styles all the common properties to save duplication and then in the subsequent blocks the unique properties are styled for each one. This saves on code because you don’t need to restate the similar properties each time.

If you had been more consistent in each of those sections then there should have been no differences for any of the h1’s but you made all the sections slightly different instead of keeping them all the same.

I don’t understand how I kept them different, when the goal was for all the H1 to be in the lower right hand corner with some adjustments to the positioning, just as long as the H1 were not being hidden by the footer.

You made them diffferent here:


#Serv {
    position: relative;
    width: 680px;
    height: 260px;
    margin: 78px 0 90px 268px;
    background: #0000CD url('http://www.thecreativesheep.ca/construction/services_bg.png');
}

#Contact {
    background: #C0C0C0;
    overflow: hidden;
    width: 650px;
    margin: 40px 35px 0 300px;
}


Different margins and different widths and heights. How can the position of the h1 be the same if each of the containers it sits in is different. You should have created all the sections the same and just changed the inner elements if you wanted something different.

I may fix that problem you pointed out.