Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Layout help

drastik

drastik

macrumors 6502a
Original poster
Apr 10, 2002
978
0
Nashvegas
hi y'all,

I'm trying to learn to work with style sheets right now, and I sould use some help. I see this mockup lit site as I think it should look, but others (read different browsers) are getting strange layouts.

I'd appreciate if any of you would check it out and tell me what you see and then tell me what system/bowser you use.

Thanks everybody,
Drastik
 
My question is, why do you need CSS is position those elements? I dunno what it is supposed to look like (using Safari) but i would think you could accomplish the same thing in terms of positioning with some clear .gifs and a few <br>'s

But, now that i reread your question, the above suggestion is a bit counterproductive, isn't it? :rolleyes: The elements are positioned rather oddly, for instance, the main text is cut off on the left, and your second element overlaps the top part.
 
Originally posted by dotcomlarry
My question is, why do you need CSS is position those elements? I dunno what it is supposed to look like (using Safari) but i would think you could accomplish the same thing in terms of positioning with some clear .gifs and a few <br>'s

But, now that i reread your question, the above suggestion is a bit counterproductive, isn't it? :rolleyes: The elements are positioned rather oddly, for instance, the main text is cut off on the left, and your second element overlaps the top part.
Click to expand...

Why are people convinced that transparent gifs and table based layouts are the "right" way to develop for the web? :rolleyes:

CSS is the W3C standard for formatting and layout. Why force the visitors to your website to download endless gifs and suffer through bloated HTML when it can be accomplished with a few simple lines of CSS?
 
Originally posted by dotcomlarry
My question is, why do you need CSS is position those elements? I dunno what it is supposed to look like (using Safari) but i would think you could accomplish the same thing in terms of positioning with some clear .gifs and a few <br>'s

But, now that i reread your question, the above suggestion is a bit counterproductive, isn't it? :rolleyes: The elements are positioned rather oddly, for instance, the main text is cut off on the left, and your second element overlaps the top part.
Click to expand...

Yeah, I'm trying to learn a more lightway, fast loading way of doing things. CSS kills gifs in load times, it just seems cleaner as well.

Overlapping is the main problem I'm having. It seems to have something to do with relative and absolute positioning. When I expand my window out, everything falls into place. When I make it smaller, the elements overlap. Very frustrating. Thanks for the help though.
 
Originally posted by Rower_CPU


Why are people convinced that transparent gifs and table based layouts are the "right" way to develop for the web? :rolleyes:
Click to expand...

Well, first of all, i'm not *convinced* that it's the "right way" to do it.


CSS is the W3C standard for formatting and layout. Why force the visitors to your website to download endless gifs and suffer through bloated HTML when it can be accomplished with a few simple lines of CSS?
Click to expand...

Yes, it is the standard, but we happen to have an excellent example with drastik's website as to the implementation of CSS across various browsers. drastik sees it correctly, but I do not. As a web designer myself, while I would love to use CSS for more than I do now, I have to design for a wide range of browsers. Unfortunately, clear gifs and other stuff just work. I'm a fan of CSS, but I'm not a fan of how different companies implement it.
 
Originally posted by dotcomlarry

Yes, it is the standard, but we happen to have an excellent example with drastik's website as to the implementation of CSS across various browsers. drastik sees it correctly, but I do not. As a web designer myself, while I would love to use CSS for more than I do now, I have to design for a wide range of browsers. Unfortunately, clear gifs and other stuff just work. I'm a fan of CSS, but I'm not a fan of how different companies implement it.
Click to expand...

Actually, it's not an issue of User Agents here, but using the wrong positioning methods in CSS. There are numerous workarounds and ways to get your pages to look the same (or near enough) on any browser out there that at least support CSS1. How much slack should we cut companies who put out browsers that do not meet basic W3C standards, or implement them poorly? I test my pages against 3-4 browsers on the Mac and about as many on the PC. If some poor sap insists on using NN4.x then they really need to update their browser.

I'm touching up your page, drastik, and I'll have a fixed version up in a minute.
 
Thanks Rower, this is another time you have gotten me out of a jam.:)

I made a temporary fix by embedding the whole page in a single table tag, but I feel like that cheating.

[edit] here is the link to my cheating fix.[/edit]
 
Allright, I tweaked it a little, but it still needs some more work:

http://130.191.246.6/lit.html

IE Mac is ignoring the CSS for whatever reason, but every other browser I tried did OK.

I'd suggest using padding values to position your elements instead of absolutes.

Hope this gets you on your way...
 
Thanks Rower, i'll try to use the padding instead. I have a good deal of training in print design, so positioning elements absolutely is pretty attractive.

Thanks again,:D
 
aha, I think I've got it this time. I positioned everything from the left side instead of both, this seems to help. Anybody's browser having problems?
 
Overall, looks much better...

You're still getting some overlap here in Chimera and Safari:
lit1.gif


...and here in IE:
lit2.gif
 
oh man, I'll work it when I get home and have access to my other browsers. I've been whippinbg this up at a crappy work PC because I don't feel like working. I've been writing in notepad, so I'll switch to BBedit when I get home as well. Thanks again, Rower.
 
A question for you two.

I designed a medium size web site and disliked all the work I had to do to tweak spacing to make various browsers happy. This was a few years ago.

These days, how much do HTML editors help with this chore? In other words, if you use Dreamweaver or Front Page or Pagemill or HoTMetaL or whatever, do they simply assume that the web browser will adhere to the latest standards, or have the authors of these HTML editors done some of the work to accomodate the differences among browsers, thereby saving you some of the trouble?
 
Originally posted by Doctor Q
A question for you two.

I designed a medium size web site and disliked all the work I had to do to tweak spacing to make various browsers happy. This was a few years ago.

These days, how much do HTML editors help with this chore? In other words, if you use Dreamweaver or Front Page or Pagemill or HoTMetaL or whatever, do they simply assume that the web browser will adhere to the latest standards, or have the authors of these HTML editors done some of the work to accomodate the differences among browsers, thereby saving you some of the trouble?
Click to expand...

If you want to do straight html, Dreamweaver mx is pretty nice. Dreamweaver used to produce some not so great looking code. This works anyway, as browsers are built to translate bad code, but if you want to do javasript or xml, your code needs to be correct.

All of his is why I am trying to learn stylesheets better. With CSS, you can use a single, on-server style sheet that can be imported into all of your pages by the web browser. That way, when you want to change something, you just do it on the style sheet. Styles can also be applied inside the html if you want to overrifde your basic style in any single incidence.

check out webmonkey's CSS tutorial. its a couple of years old, but it gets the point across well.

I like to hand code if I'm not incorporating flash or anything to fancy. The advantage to doing it by hand is that you can comment freely, and this makes it a whole lot easer to trouble shoot.
 
*edit* while I was writing an answer, you said the same thing, sorry *edit*

One thing that will make your life much easier, is to use external .css files, and just link to them. the way you have it right now, every page in your website (future page) will have to include the css formatting. if you link to a css style, let's say "mainpage.css", than, "essays.css", you only have to adjust one file to have an immediate change on all that link to it.

BTW, in your original layout, I don't know what you want it to look like, so please supply an example, but it seems that your h3 tag in the nav on the left is screwing it up for you.
 
Originally posted by zarathustra
One thing that will make your life much easier, is to use external .css files, and just link to them. the way you have it right now, every page in your website (future page) will have to include the css formatting. if you link to a css style, let's say "mainpage.css", than, "essays.css", you only have to adjust one file to have an immediate change on all that link to it.

BTW, in your original layout, I don't know what you want it to look like, so please supply an example, but it seems that your h3 tag in the nav on the left is screwing it up for you.
Click to expand...

I plan on using a .css import eventually, right now I am locking it in because I can't upload that often. This way I can save to disk and tweak and check without having to reup files. Of course, I could just link to a file on my drive, iuess, but I hadn't thought about that till now.

I think the problem is this: When IE 5.5 on NT (my work system) sees text in a positioned box, it stretches the box to surrond the text and includes padding and all that, regaurdless of the specified width of the box. Everything alse seems to draw the box at the specified width, regaurdless of text.

So, I have to estimate the right size of the box, which is a pain from here since my browser is showing it correctly no matter what. If I leave out the width tag, it just flows to the right until stopped, which ain't what I want.

Do any of y'all know a good rule of thumb for estimating pixel size, I let my picameter at home.;)
 
You can't take web page layout so literally and rigidly. You have to aim for cross-comaptibility and *similarity*. It will never be the same.

Mac - 72 dpi, PC - 96 dpi. Gamma: mac has a lighter gamma. 12 px type on 640x480 is much different from 12 px type on 1600x1200. Think of pixel size as relative size compared to other images and other copy in your page. As much as I like small, clean type, on my 1600x1200 screen 6px "designer" type is like morsecode.

Unless you want to run a system check on the machine before the code loads and divert to a "mac" and "pc" or "w3c compliant" and "IE" set of pages, you are out of luck. 10-11 px type for large headings, and 8-9 px type for body is comfortable an most systems.
 
Right. And a given font name (e.g., Times, Helvetica, Arial) can produce a different actual font on PCs and Macs. And between one PC and another PC, and between one Mac and another Mac, for that matter.
 
That's been one of the key things I've learned as a web designer: not to try to make it look exactly the same on every platform/browser.

As long it it looks about the same, functions correctly and your content is accessible to your users that's enough.

Since you (drastik) said you have had training in print design you'll have to "unlearn" some of the ideas that work for that medium. Flexible design is what you have to go for on the web since you have no idea what size screen your users might be using to view your pages.

Yes, it's a challenge to make sure your pages look good in many different situations, but it's well worth it when you open up your content to as many people as possible.
 
IE6/winXP looks great

links to www.zulkey.com though should be http://www.zulkey.com

in NS communicator 4.7, it's unreadable. though CSS is great, there will be some users who have old browsers and won't be able to read your stuff, which is why the table-gif layout, though a bit heavy, is great for backwards compatibility.... maybe you can make your main page a logo with a message and a link to newer browsers and have a javascript redirect all newer browsers... though it might not really be necessary you really get hardly any hits from <IE5 or <NS6
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back