heading permanently @ dead center

[jbonham]

Hi,

Trying to figure out how to make a heading stay at the dead center of the page, regardless of the browser type or screen resolution, and then all text that follows is below dead center, obviously.

The user would have to scroll down to see the full text, but at the default starting position-where the user has scrolled up as far as possible-the heading is always at dead center.

I tried, but the more text I put in, just pushes up the heading.

thanks for any help.
jbonham

 

[traingamer]

What do you want to happen when there is more text below the heading than fits in the browser window?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Foamcow]

You may feel that this isn't helpful but I have been dying to say it in this forum (and the web design forum) for some time...

Rather than trying to change how the web works to fit an idea. Have an idea that works with the web. Work with the medium.



Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[jbonham]

what I want to happen when there is more text than fits in the browser window is that the user must scroll down to reveal more text.

The heading must always be at dead center. There could 10 browser window's worth of text following the heading, but the heading must not move. The user must scroll down to see the full text.

 

[traingamer]

Ignore my comment - you actually said what you wanted to happen...

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[jbonham]

My dead center heading concept is a vital and integral part of my entire website design. It is in fact more an aspect of function over form.

I am aware of the philosophy of working with-rather than against-the web and how it functions.

However, there must be a way to accomplish such a seemingly simple task.

 

[taylorantone]

A picture is worth a thousand words, "they" say. Is there a site you can link us to that has the same effect you're trying to accomplish? At that, could you use said site to glean the necessary coding to make it happen?

It sounds as though you simply want a centered page. In that case, you'll add to your body tag (or whatever div you choose as a container for your content)

text-align: center;

Then, for the really compliant browsers,

add margin: 0 auto;

(where 0 can be adjusted for top-bottom margins) to the div that actually contains your content.

 

[taylorantone]

Edit:
Um, I think I completely misunderstood you. Sorry.

 

[jbonham]

Unfortunately, I am not aware of any site that incorporates the concept I am trying to accomplish.

Regarding a centered page: I tried that, but as I add more text to the page and eventually go beyond the browser window's height, it pushes up my heading- beyond dead center.

 

[traingamer]

Ignore my comment - you actually said what you wanted to happen...

You could start with the CSS from

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

using the absolute example, then modify the content with:

position: absolute; top: 50%;

and work from there.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[JamesLean]

Am I right in thinking this is something like what you want?

----------------------------------------------------
|                                                  |
|                                                  |
|                                                  |
|                                                  |
|                                                  |
|                                                  |
|        HEADING CENTERED HORIZ AND VERT           |
|                                                  |
| Body text goes here blah blah blah blah blah bla |
| Body text goes here blah blah blah blah blah bla |
| Body text goes here blah blah blah blah blah bla |
| Body text goes here blah blah blah blah blah bla |
| Body text goes here blah blah blah blah blah bla |
----------------------------------------------------
  Could have more body text outside of viewport but
  user has to scroll down to see this.

--James

 

[jbonham]

JamesLean-- Yes, that is exactly what I need. Regardless of browser type (IE, FF, etc..) or screen resolution.

traingamer- going there now to check it out

 

[Vragabond]

What you're trying to accomplish is called overflow: auto; If you put that on your container that holds the text, container will get scrollbars while everything else on the page will stay put. Consider this example:

<div style="margin: 300px; width: 200px; height: 200px; padding: 10px; overflow: auto; border: 1px solid blue; font: normal 0.7em Tahoma, sans-serif;">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et enim. Proin sed justo ac arcu euismod dignissim. Pellentesque mi erat, consectetuer vitae, imperdiet quis, porttitor at, dolor. Sed faucibus. Integer pellentesque. Donec nibh. Vivamus consequat. Proin hendrerit tempor pede. Nulla neque lorem, rutrum et, sollicitudin ac, sodales eu, wisi. Nulla nec dui. Nullam sit amet ligula condimentum lacus condimentum porttitor. Mauris turpis augue, nonummy eget, vehicula ut, euismod a, enim. Integer ac metus ac purus tincidunt rhoncus. Mauris nonummy tempus lectus. Cras eros wisi, tempus id, rutrum in, dignissim ac, diam. Duis porta molestie ligula. Ut sit amet arcu. Nam nunc.

  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse hendrerit, dui a consequat pellentesque, orci justo rutrum nulla, ut suscipit mauris lectus tincidunt justo. Praesent ac nibh sed libero congue egestas. Pellentesque interdum urna non risus. Aenean volutpat augue vitae augue. Mauris tempor. Phasellus placerat. Morbi suscipit, lectus a venenatis aliquam, nibh lectus pellentesque odio, quis fringilla lorem dolor eu wisi. Nam sed velit vel risus lacinia congue. Cras euismod, risus a posuere pellentesque, magna neque malesuada lacus, non tempor justo mi at nibh. Morbi iaculis. Donec sed orci quis nisl laoreet commodo. Integer pretium porttitor mi. Pellentesque sit amet felis non leo varius vulputate. Vivamus consectetuer. Curabitur vel pede. In hac habitasse platea dictumst. In rhoncus, diam non consectetuer vehicula, odio lorem pretium nisl, et egestas nulla diam vitae nunc. Duis imperdiet odio viverra purus. In hac habitasse platea dictumst. 
</div>

 

[jbonham]

thanks all!

It appears the only way I can accomplish what I want is to use Vragabond's idea. Not quite what I wanted though.

I didn't want an additional scrollbar, but it looks like that is the only way to do what I want to accomplish.

Although, not done checking out traingamer's link.

Thaks again.

jbonham

 

[Vragabond]

How can a person scroll the site if there is no scrollbar? Maybe you're rather looking for a fixed element. In Geckos that can be easily achieved by putting [tt]position: fixed;[/tt] on a fixed element. IE however would need some Javascript.

 

[CliveC]

or

<html><frameset rows="*,10%,*">
<frame src="top.htm"   scrolling="no"  frameborder="0" />
<frame src="title.htm" scrolling="no"  frameborder="0" />
<frame src="text.htm"  scrolling="yes" frameborder="0" />
</frameset></html>

top.htm would contain just a body with a background color and the rest should be self-explanatory.





Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[traingamer]

Vragabond, I think jbonham's original question was to put the heading in the middle of the screen, put all text under that (without pushing it up ) and allow scrolling (at which point it is OK to scroll the heading up). He (or she) just wanted the default start point at the center.


Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

I think jbonham is confused to what they want or have trouble vocalizing their desires if it makes so little sense to all of us. I believe their request is to have a fixed object on the screen regardless of where in the text client has scrolled.

 

[Foamcow]

How about this.. if it's what you mean...

<style>
	  #midposition {
		position:absolute;
		top:50%;
	  }

</style>

...


<div id="midposition">
    <h1>My Heading</h1>
    <p>blah blah blah...</p>
</div>

That will start your body half way down the browser window and the whole lot will scroll up when the user scrolls.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[traingamer]

Quite right, Foamcow. That's pretty much what I was suggesting earlier (although I didn't post the entire code).

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill