23 replies [Last post]
linuxuser
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2006-03-22
Posts: 11
Points: 0

What is the Y coordinate of the top of the page? I would have thought it would be zero, but it seems to be something different from that, like -10px perhaps. Is there any reason why they did that? I haven't seen reference to that in any documentation.

Here's an example page (uses fixed positioning, so it requires IE 7, Firefox, etc):

http://205.134.230.205/ListContacts.html

and the stylesheet itself:

http://205.134.230.205/ListContacts_files/styles.css

As you can see in the CSS linked in, there is a gap of about 5px between the top of the display window and the top of the usernav element. That gap goes away if I set margin-top: -10px. Does this make any sense?

The other thing which makes no sense in this is that the #content div is picking up the width of the nav bar div. How does the content div figure this out? There is no width specification in the content div.

I'm a bit confused by all this.

Edited: Ah, I figured one part of it out! I needed to put a top: 0px into my navbar div. I'm not sure why, but that worked, and I guess it makes some sense.

I still don't understand how the content div picks up width information from the navbar.

Editted again:

Now I realized another problem I was bumping in to: With Firefox, the viewport size changes depending on if there is a scrollbar or not. I just have to design to accomodate this.

I think I'm figuring this out. CSS, so powerful and yet so frustrating sometimes.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to position something at the top of a page

Linuxuser , absolutely NO DocType declaration (DTD) this is a no no where CSS and standards are concerned.

Fix it up and re-post if the problem still persists

CSS takes time it's just like learning any other coding discipline it has a learning curve and requires studious application.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

linuxuser
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2006-03-22
Posts: 11
Points: 0

How to position something at the top of a page

Ok, I'm absolutely baffled now.

It seems like the order of elements in the .css file makes a difference, even when elements don't seem to descend from each other.

I have classes like this:

.item1 { text-align: right; }
.item2 { text-align: left; }

The order matters!

What's going on here? This can't possibly be right. Is this a bug in Firefox?

linuxuser
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2006-03-22
Posts: 11
Points: 0

How to position something at the top of a page

Ah, now I fixed that problem. The order was making a difference simply because there was a malformed comment before it. D'ohh!!! I think I should try to find a better CSS editor that will highlight syntax errors, like my Java editor does.

Anonymous
Anonymous's picture
Guru

How to position something at the top of a page

Hugo wrote:
Linuxuser , absolutely NO DocType declaration (DTD) this is a no no where CSS and standards are concerned.

Fix it up ...

linuxuser
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2006-03-22
Posts: 11
Points: 0

How to position something at the top of a page

Ok, doctype is going away.

I'll be launching this site soon. It's a 100% CSS layout on a contact management system. I know, contact management has been around for ages, but this one is different. It will use fixed position for nav elements. Obviously this doesn't work on IE6, but the way I'm setting it up, it will still look ok on IE6, but it will look better on Firefox, IE7, etc, which do support fixed position.

Anyway I'll post a link when I get it into beta testing ready.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

How to position something at the top of a page

Shock :? Smile I hope I have mistaken your comment "Ok, doctype is going away" to mean that you have removed what didn't exist in the first place?

You haven't mis-interpreted my comment "absolutely NO DocType declaration" to mean that you must not have one have you have you?

and it's Content Management System not 'Contact' there is a world of difference between the two, or maybe you did mean 'Contact' and not CMS

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

linuxuser
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2006-03-22
Posts: 11
Points: 0

How to position something at the top of a page

Hugo wrote:
Shock :? Smile I hope I have mistaken your comment "Ok, doctype is going away" to mean that you have removed what didn't exist in the first place?

I took the original file down and just put up a "thank you" note. There won't be a doctype in any files which aren't true xhtml.

Quote:
and it's Content Management System not 'Contact' there is a world of difference between the two, or maybe you did mean 'Contact' and not CMS

It is in fact contact management. Here's the intro page:

http://contempo.biz

which tells a little more about it. I'm thinking of it as a "Web 3.0" application. Web 1.0 was web with forms for interaction. Web 2.0 is web with Javascript / Ajax to give it a user interface. Web 3.0 is what's coming after that, and that's what Contempo.biz has.

Anonymous
Anonymous's picture
Guru

How to position something at the top of a page

Oooo. K?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

How to position something at the top of a page

I . . . still don't see a doctype?

Verschwindende wrote:
  • CSS doesn't make pies

linuxuser
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2006-03-22
Posts: 11
Points: 0

How to position something at the top of a page

thepineapplehead wrote:
I . . . still don't see a doctype?

That page is going away, obviously. I should have a beta test version of the actual software within a few days. Free accounts during beta testing! You have never seen a website like this one before.

Anonymous
Anonymous's picture
Guru

How to position something at the top of a page

linuxuser wrote:
You have never seen a website like this one before.
This better be good. Laughing out loud

The hype is high on this one.

jlhaslip
Offline
Enthusiast
Last seen: 10 years 25 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

How to position something at the top of a page

re: Doc Type Declarations:

Here is a spare one I haven't used yet... enjoy...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Or maybe this one will work better...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Are you catching on yet???

I'm having a good day...so far.

Anonymous
Anonymous's picture
Guru

How to position something at the top of a page

jlhaslip wrote:
Are you catching on yet???
Now, now! Let's leave the snippy remarks to us mean ol' moderators. Wink Laughing out loud

linuxuser
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2006-03-22
Posts: 11
Points: 0

How to position something at the top of a page

Triumph wrote:
linuxuser wrote:
You have never seen a website like this one before.
This better be good. Laughing out loud

The hype is high on this one.

Oh, believe me, this is the one time when the reality is better than the hype!

As for doctypes, yes, I just haven't bothered to touch the pages I have there now because they're going to be deleted this weekend. Proper doctypes and validation will be everywhere.

One cool thing about CSS I have found is that I can put together a fairly intricate page with a bunch of layout and formating, and it's still under 10k. Typical web pages today are 100k or so, what with all the JavaScript, etc. It makes a difference on loading and rendering times, and it looks like a lot of the pages on this site will work almost unaltered on mobile devices. But they still look good on regular browsers.

This site (contempo.biz) will have almost no JavaScript. Pure CSS, with a few Java applets thrown in as needed.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

How to position something at the top of a page

Sounds good Laughing out loud Sorry about harping on about the doctypes Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

How to position something at the top of a page

linuxuser wrote:
... Java applets thrown in as needed.
That's disappointing. I (along with a growing number of people) keep Java disabled. It's annoying, takes a long time to load and anything useful that Java can do can be accomplished with a scripting language.

linuxuser
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2006-03-22
Posts: 11
Points: 0

How to position something at the top of a page

Triumph wrote:
linuxuser wrote:
... Java applets thrown in as needed.
That's disappointing. I (along with a growing number of people) keep Java disabled. It's annoying, takes a long time to load and anything useful that Java can do can be accomplished with a scripting language.

No way... there are definitely some features that can only be done in Java. Things that add substantial, useful functionality, not just annoying animation. To use Contempo.biz you will definitely want to have Java installed and enabled. Contempo.biz is a very non-showy website. It's going to have light pages with almost no graphics, but if some page or feature needs Java, it will have Java. By the way, this site is pure CSS, no tables, no JavaScript. The reason I made these decisions is because I want a site with fast-loading fast-rendering bug-free pages. I'm only introducing Java where it's absolutely needed to do something that couldn't be done any other way, and trust me, there are some places for that.

I agree that using Java for simple animations like scrolling text is annoying, but then again, most animations are annoying however they are done. But Java 5 starts up fairly quickly compared to earlier versions, sometimes faster than Flash.

There's another bit of news that you might not be eager to hear: It's going to require not just Java, but Java 6 (Mustang), which isn't even released yet. But there are some things that I can accomplish in Mustang that I basically couldn't do any other way, except for a native compiled application.

(Note: The early beta of Contempo won't have any Java features. Those are coming in a bit later for some of the advanced features.)

Anonymous
Anonymous's picture
Guru

How to position something at the top of a page

Sorry, there is just no way I'm going to activate Java. I just can't imagine what you can accomplish with java that you can't do another way.

linuxuser
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2006-03-22
Posts: 11
Points: 0

How to position something at the top of a page

Triumph wrote:
Sorry, there is just no way I'm going to activate Java. I just can't imagine what you can accomplish with java that you can't do another way.

Exactly, which is why I say, "this does some things you've never seen on a website before". These are things that no scripting language can even dream about.

That's also why I'm calling it "Web 3.0". This changes the concept of what a website is. I'll put up an article about that once I get it into beta.

Anonymous
Anonymous's picture
Guru

How to position something at the top of a page

Forgive me but my skepticism grows. When will you be ready to show it? Now I've got to see what the big deal is.

Don't get me wrong, it's good to be enthusiastic about your project. I'm just skeptical about hype. I blame the first Batman movie. Tongue

Also note, the more requirements you have for the page the more people you will alienate. The common theme among modern web developers is "Alienate nobody". I'm pretty sure java is of no use to a screen reader or a braille browser.

I guess it all depends on if you want your work to be popular or passed over.

Anyway, hurry up. Let's see it.

Anonymous
Anonymous's picture
Guru

How to position something at the top of a page

I guess we're all going to have to wait for the great reveal of WEB 3.0

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

How to position something at the top of a page

Are you still here?

Go home, Tri Tongue

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

How to position something at the top of a page

thepineapplehead wrote:
Are you still here?

Go home, Tri TongueYeah, I'm here but I'm not seeing Web 3.0. Tongue