/    Sign up×
Community /Pin to ProfileBookmark

Layout with CSS…

Copy linkTweet thisAlerts:
Feb 17.2004

Working on designing a page with CSS, but just cannot seem to get it to display properly.

Take a look at the attached GIF file and tell me if this can be accomplished without both the use of tables and javascript.

It just seems like it shouldn’t take this much effort to incorporate “web standards” into your design.

8^)>

Thanx.

[upl-file uuid=c4d316c1-c955-4f6e-8a68-b0ef113ab11a size=11kB]page.gif[/upl-file]

to post a comment
CSS

22 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisFeb 17.2004 — I don't know about anyone else, but I cannot read the text in yout gif file.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 17.2004 — Here's a better pic...

[upl-file uuid=2b0d65bf-df6a-4225-8246-db3ef3bb45e9 size=40kB]page.jpg[/upl-file]
Copy linkTweet thisAlerts:
@gil_davisFeb 17.2004 — That was even worse!
Copy linkTweet thisAlerts:
@stmasiauthorFeb 17.2004 — Last chance.

If y'all can't read this...

8^)>

[upl-file uuid=fea2df90-99b3-4471-9241-140184c768c2 size=2kB]page.zip[/upl-file]
Copy linkTweet thisAlerts:
@gil_davisFeb 17.2004 — Here is my feeble attempt:

http://home.att.net/~gil.davis/footer_example.htm

It looks different in NS and IE. I could not define the height of the footer and make the text go to the bottom on either browser, and the footer is taller in NS for some odd reason.

I set the margins of the body to zero because NS pushed the footer off the right side of the page when I specified width: 100%. Oh, well.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 17.2004 — Cool...definitely closer to what I want.

Now, how do I limit the entire thing to a width of 700 pixels and center it in the "viewable" area?

Thanx again.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 17.2004 — Yet another question...

How do I vertically AND horizontally center the whole thing within the "visible" area of the browser?

Thanx.
Copy linkTweet thisAlerts:
@Dathor_VerloxFeb 17.2004 — I have managed the fixed header, fixed footer and a content area that expands as you put stuff in it, all centered horizontally. I dunno how to do vertically.

Did you want the main content area to expand as stuff is put in it or exactly fill the rest of the viewable area with scroll bars for any extra content? I got confused sorry.

Hope the file helps, tried to annotate it but its pretty simple so you should be able to work your way around. If you need anything then PM me.

Works in IE5.5, Mozilla 1.6, Firefox 0.8 and Opera 7.23 all in Windows, don't have any other browsers so don't know about them.

www.harrymills.co.uk/cssStuff/test/stmasi.htm
Copy linkTweet thisAlerts:
@stmasiauthorFeb 17.2004 — Okay...I think I have it now.

I just can't seem to get it perfectly centered in the "visible" area of the browser.

Check it out:

http://www.geocities.com/stmasi/

Thanx.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 18.2004 — Any takers?

?

Thanx.
Copy linkTweet thisAlerts:
@Robert_WellockFeb 18.2004 — Which browser because it is messed up in Opera and Mozilla.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 18.2004 — Whoa!

Yeah...that's messed up quite a bit.

Is there any way I can get all browsers to interpret the code identically? You know...either by using hacks or by some sort of code that checks for browser and then supplies the appropriate style sheet for each browser?

Thanx.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 18.2004 — Yep...

Between IE6, M1.6, N7.1, and O7.11, it appears as though only IE and N display properly...except for the centering.

Thanx.
Copy linkTweet thisAlerts:
@Paul_JrFeb 18.2004 — The height of your [FONT=times new roman]#main[/FONT] div is too large. It's set to 100%, but that 100% doesn't take into account the other elements in the containg div. Reduce the height of your [FONT=times new roman]#main[/FONT] div to around 370px, and you should be good to go.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 18.2004 — Cool.

That works for every browser except for Opera.

There remains a gap between the main div and the footer div.

Any ideas on how to eliminate this?

Thanx.
Copy linkTweet thisAlerts:
@Paul_JrFeb 18.2004 — [i]Originally posted by stmasi [/i]

[B]Cool.



That works for every browser except for Opera.



There remains a gap between the main div and the footer div.



Any ideas on how to eliminate this?



Thanx. [/B][/QUOTE]
Really? I'm using Opera 7.23 and everything looks kosher to me.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 18.2004 — Hmm...I'm testing with Opera 7.11 and I can see a gap between the main div and the footer div (maybe 25px or so).

Perhaps the difference in versions?

Thanx.
Copy linkTweet thisAlerts:
@Paul_JrFeb 18.2004 — Probably. Opera tends to be a bit quirky in my opinion. I always find something wrong when testing in Opera. ?
Copy linkTweet thisAlerts:
@stmasiauthorFeb 18.2004 — Okay.

Now, is there a fix or workaround?

Thanx.
Copy linkTweet thisAlerts:
@NewbieLearnerFeb 19.2004 — the two buttons at the bottom overlap the footer.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 19.2004 — Good morning, all.

Just wondering...did ne1 think of a fix / hack for the Opera 7.11 problem?

Thanx.
Copy linkTweet thisAlerts:
@stmasiauthorFeb 19.2004 — Nevermind...found the problem.

I had a <p> </p> embedded in the html that I didn't catch. Once I removed that, it's good to go.

Thanx.
×

Success!

Help @stmasi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...