Unable to see H1 Heading

I had recently just posted a thread, but I have done a few changes to the page. Ignore the previous messages, a moderator can delete it if needed too bad users can’t delete messages if there were no replies. Regardless how come I can’t see the words ‘3D Motion’ to position it where I want it ?

#ThreeDMot h1 {
  position: absolute;
  margin: 350px 0 0 0;
  height: 250px;
  width: 250px;
}

That’s because its parent container #Illus_3D is styled with “display:none” (inline styling).

I don’t see what you’re talking about !

Thierry is referring to the inline style display:none; applied by jQuery to hide elements in your page when it loads.

You will not see this in the page markup or browser “view source”, but it is visible in Firebug.

You also have two javascript problems.

  1. Replace this:
<script type="text/javascript">
$(document).ready( function(){
$('#services_content').innerfade({ 
animationtype: 'slide', speed: 750, timeout: 2000, type: 'random', containerheight: '1em' 
});
</script>

with this:

<script type="text/javascript">
$(document).ready( function(){
$('#services_content').innerfade({ 
animationtype: 'slide', speed: 750, timeout: 2000, type: 'random', containerheight: '1em' 
});
});
</script>
  1. You seem to be attempting to use the jquery InnerFade plugin but it is not included. Relative to the HTML file, its current location is js/jquery.innerfade.js so, below <script src=“jquery-1.4.2.min.js” type=“text/javascript”></script>, add this :
<script src="js/jquery.innerfade.js" type="text/javascript"></script>

The page is cut off at the top.

<script src="js/jquery.innerfade.js" type="text/javascript"></script>

Isn’t is suppose to be vise versa ? I had switched it around, but it still is causing my page to be cut off at the top!

I don’t think the order matters (someone correct me if I’m wrong), and even so, it shouldn’t have anything to do with the top being cut off.

Everything is fine :slight_smile:
I still can’t see or position:

#ThreeDMot h1 {
position: absolute;
margin: 350px 0 0 0;
height: 250px;
width: 250px;
}

I tried absolute position, but that didn’t solve it.

First let’s see where #ThreeDMot is:

<div id="Illus_3D">
	<div id="ThreeDMot">
		<h1>3D Motion</h1>
	</div>
</div>

It’s inside #Illus_3D.

When the page loads, your jQuery script hides every immediate child of Content by applying display:none;

Here is what Firebug shows after the page loads, showing how display:none; has been applied.

<div id="content">

	<div id="intro" style="display: none;">
		<div class="character">
		</div>
	</div>

	<div id="Serv" style="display: none;">
		<p>The Creative Sheep offers these design services:</p>
		<ul id="services_content" style="position: relative; height: 1em;" class="innerfade">
			<li style="z-index: 3; position: absolute; display: list-item;">Character Design</li>
			<li style="z-index: 2; position: absolute; display: list-item;">Animation (Broadcast &amp; Industrial)</li>
			<li style="z-index: 1; position: absolute; display: list-item;">Logo Design</li>
		</ul>
		<p><a href="#Contact">Contact</a>Christopher regarding the services offered</p>
		<h1>Services</h1>
	</div>

	<div id="Contact" style="display: none;">
		<h1>Contact</h1>
	</div>

	<div id="Illus_3D" style="display: none;">
		<div id="ThreeDMot">
			<h1>3D Motion</h1>
		</div>
	</div>

	<div id="DemoR" style="display: none;"></div>
	<h2 style="display: none;">Sub Heading</h2>
	<p style="display: none;">Content goes here</p>
	<p style="display: none;">Content goes here</p>
	<p style="display: none;">Content goes here</p>
	<p style="display: none;">Content goes here</p>
	<p style="display: none;">Last line of scrolling content</p>

</div>

As you can see, #ThreeDMot does not have display:none; applied.

Your navigation system uses jQuery to show and hide divs within Content. When you click the Portfolio link, which has the href value “#intro”, this causes the display value of the #intro div to change from display:none; to display:block;

When you click the 3D Motion link, which has the href value “#ThreeDMot” what happens? Firstly, the display value of #ThreeDMot is not controlled by the script so no display change value occurs. Secondly, as #ThreeDMot is contained within #Illus3D, which is set to display:none, #ThreeDMot stays hidden inside.

In short. The script hides #Illus3D. Unless #Illus3D is shown #ThreeDMot is hidden.

If you want #ThreeDMot to display independently of #Illus3D then you will need to move it outside #Illus3D.

But even then you will not see the h1 in #ThreeDMot. Not due to anything the script has done, but because the styles applied to h1 are hiding it behind #silhouette and #gears.

To sum up. #ThreeDMot is concealed inside the hidden #Illus3D and positioned behind #silhouette and #gears.

Ah I get it. Although the H1 tag is still invisible, regardless what I do !

Move #ThreeDMot outside of #Illus_3D, but still within Content.

Comment out or remove all CSS from #ThreeDMot h1. e.g.

#ThreeDMot h1 {
/* height: 250px;
    margin: 350px 0 0;
    position: absolute;
    width: 250px; */
}

You can reapply styles as required when you can see the h1 again.

The words “3D Motion” will appear in the centre of the pale grey area immediately beneath the header.

This took 30 seconds using Firebug. Keep trying and you’ll get there.

You need to link to the jquery library before linking to any other scripts that feed off it.

Victor - Reload the page, I believe I got it :slight_smile: Although how do you align #3DMot h1 horizontally ?

Also why am I having problems moving #Intro is it because of the class ‘character’ ? I want some space between the header and #Intro, as I’m trying to get the ID positioned where I need them before placing in the graphics, piece by piece !

Ralph, I’m going to change it back thanks for the tip ! :slight_smile:

Sorry, but I just haven’t time to prise everything apart for you. Selecting and hovering elements in Firebug’s HTML pane will show you the dimensions, margin and padding applied, where elements extend beyond their containers etc.

<sigh> I’m just trying to speed this along, I’m taking numerous stabs at it to solve these issues so I can start laying things down! I understand if you don’t have the time !