Fluid or Fixed? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Peppergal -> Fluid or Fixed? (2/19/2004 18:22:39)

Fluid or fixed?

I'm getting a little frustrated with my pages that look beautifully on my browsers but friends view them and there are divs overlapping and things "mooshed" together.

Several people don't even KNOW that you can go to "View - Full Screen."

One friend has an extra toolbar on Internet explorer, and when she viewed my Candles site page, everything was overlapping. I was aghast - and out of reflex did a quick "Full Screen" and everything looked fine. My friend exclaimed "How did you do that?" And this person has had a computer much longer than me. (I might add that when I preview my sites in browsers, I do not have them set for "full screen", though often when I'm browsign a particular site, I'll use full screen to eliminate the junk at the top of my screen. Why people want all those toolbars on there- and then not know how to use them anyway...is beyond me....)

So. I thought that by using a fluid design - using percentages instead of pixels for placement, would allow people to see my site the way it was intended no matter what resolution or screen size they use. I had no idea that things like extra broswer tool bars made a difference in the display of the page. If you go and look at the pages in regular, then go to full screen, you'll see a major difference.

This is very frustrating. What can I do about this? Should I go fixed? I thought using percentages would be teh best option, but apparantly not.

Most of the people viewing my websites are going to be total novices who don't have a clue about anythign other than opening up IE and pressing "GO".



c1sissy -> RE: Fluid or Fixed? (2/19/2004 19:12:21)

quote:

So. I thought that by using a fluid design - using percentages instead of pixels for placement, would allow people to see my site the way it was intended no matter what resolution or screen size they use


Good idea, I read somewhere, but can't remember where, that you should use percentages for your pages. There was a good bit of information on it, but of course I can't remember where I had read this at. I prefer percentages and will check out the pages by sizing them to see how it works out.



Peppergal -> RE: Fluid or Fixed? (2/19/2004 19:29:55)

I read that in several places, during my quest for information on building with CSS. However, the experience with my friend's browser, really threw me for a loop.

There must be SOMETHING wrong with what I'm doing....?



c1sissy -> RE: Fluid or Fixed? (2/19/2004 19:37:16)

quote:

ORIGINAL: Peppergal

I read that in several places, during my quest for information on building with CSS. However, the experience with my friend's browser, really threw me for a loop.

There must be SOMETHING wrong with what I'm doing....?


I'm doing some searching on Inheritance, seems that I need to read up on this as well as decendants etc... and how to apply them to the horizontal nav so that I understand them. I'll do a search and see what I come up with and post links for you. I don't think you are doing anything wrong. It could just be some fine tuning, like putting in the percentages. Look at the link for the floating thumbs, when you resize that window, the things jump into place with the size of the window. So, maybe that is how you need to do it so that all falls into place?



paulie -> RE: Fluid or Fixed? (2/19/2004 21:13:08)

Karen,
I assume that since you posted this in the CSS forum that you are not necessarily using tables for your layout. The reason I mention that is one of the first things I ever remember learning at Outfront was from a post Thomas had written on table widths.

Please bear in mind that it was before CSS had really gathered steam as the way to layout pages. At the time he advised using a 750 pixel table width for the outer table. What you do inside of that is up to you - percentages, pixels, whatever.

The reason he picked 750 was that even with the MS Office toolbar in place (very common on corporate networks a few years ago) the page would still load with no horizontal scroll bar needed. The 750 also assumes a browser setting of 600X800, still roughly half of them, and at the time of his post, the majority.

I have held to that rule of thumb with good success, and I still use 750px tables (centered) to put everything inside of, rarely nesting more than two tables deep.

I have great respect for the talents of those who can do it all with CSS, but it's just too frustrating for me at this point. Using at least one outer table though will assure you that whatever you put inside it will display the same dimensions regardless of browser size, screen resolution, toolbars, etc.

Not sure if that's the way you want to go, but it has always worked for me. Funny how different people favor different approaches and technologies. I enjoy the challenge of ASP, but working with CSS for more than fifteen minutes makes me want to twist the heads off of some furry little animals. I guess I still have a lot to learn about CSS!



Peppergal -> RE: Fluid or Fixed? (2/19/2004 21:24:34)

Paulie,

Actually, my designs for the site in question are a combination of CSS and tables. I really don't want to use tables for anything but the presentation of the data -

http://www.lightexpressionscandles.com/container.htm will show you what I mean. The table is where the items for sale are being presented. Everything else is all contained within CSS divs.

I want to use CSS for the main design and layout, and keep the tables strictly for the information.

I can set it all up to fit within a 750 px div if need be, I think. Perhaps that's the way to go....?

Thanks for the idea!

It's funny - CSS can be frustrating, but I'd rather do CSS than anything else. LOL I love CSS and the only reason I'm using tables at all is because of the few Netscape 4.7 type stragglers who may want to look at my sites.



c1sissy -> RE: Fluid or Fixed? (2/19/2004 21:31:12)

quote:

but working with CSS for more than fifteen minutes makes me want to twist the heads off of some furry little animals.

[&o][:o]

warning, all furry animals must leave immediatly.(uhmm watch out Gorilla[;)][:D])

quote:

I can set it all up to fit within a 750 px div if need be, I think. Perhaps that's the way to go....?

I'm not sure if that will work or not. You could most likely do the main div, but I think that if you had the nested divs fixed that they would still sort of smash together. I would say go with all fluid. I haven't found much out there yet Karen. I'm curious to see what Gorilla has to say about this one.

It would be interesting to see if the same rule of thumb that works for tables works for css.



gorilla -> RE: Fluid or Fixed? (2/20/2004 2:41:42)

As a general rule always use relative metrics. Percentages for layout and font size or ems for font size. Borders are happiest with px. Points should only be used for print styles.

You're using percentages. I looked at the css and didn't see anything. SO I validated and congratulations. See my remarks in the other thread about fluidity and the price you pay for it. You're using absolute positioning a lot and that can sometimes make IE - at least I presume you're talking about IE throw a wobbly. The only other things I can think of is that this:

quote:

html>body #navcontainer li a { width: auto;


Might be the culprit. for html and body I'd explicitly declare the viewport at 100 %

Also you've forgotten to stlyel both the html and body tags for margins. Mess with this:


position:absolute;
top:0px;
left:0px;
margin:0px;
padding:0px;



Giomanach -> RE: Fluid or Fixed? (2/20/2004 3:46:19)

Just to throw my bit in:

I, now, tend to design my sites to a fixed width of either 700px of 750px, and center on the page, within a div layer. That way, I can use position: relative; to layout the nav, top header etc, and only have to use absolute to position the page content, if using a vertical nav bar, other wise, that way I can just have it all in relative positions, and all works fine, no matter what size screen you are using.

Like I said, just throwing my bit in

Dan



gorilla -> RE: Fluid or Fixed? (2/20/2004 6:38:08)

Hmmm just thinking about this Karen you're using a lot of fixed positioning. The thing about fixed is that it places an element where you want it to go making the rendering very precise. If I want oh say a div exactly 100 pixels down and 50 pixels right it might be like this:

{position: absolute; top: 100px; right: 50px; }

Relative on the other hand (same code) shifts it from where it would have been otherwise. You see the difference?

I mostly use relative myself. BTW If you want to overide inherited position just make it static.

position: static

Just a matter of interest which version of which browser is this miscreant using?



PS: Don't go down to the woods today as a large furry creature is lurking muttering things about not taking kindly to threats under its banana scented breath [;)]



c1sissy -> RE: Fluid or Fixed? (2/20/2004 7:43:13)

quote:

Percentages for layout and font size or ems for font size. Borders are happiest with px.


That is exactly what I had read, but had trouble getting the brain to put it into words! (actually the brain is a tad fried right now trying to remember terms etc... how to do this and that. Its sort of jumbling up on me right now and it is very frustrating!!!!![:@])

quote:

PS: Don't go down to the woods today as a large furry creature is lurking muttering things about not taking kindly to threats under its banana scented breath



roflol!!!



Peppergal -> RE: Fluid or Fixed? (2/22/2004 1:37:57)

I'm sorry for not responding to this. I haven't had much time to play with the website the past couple days. Thanks for all the great suggestions!!

BTW - the browser in question is none other than IE6. Surprised? LOL

So I should change them all to relative instead of absolute?



gorilla -> RE: Fluid or Fixed? (2/22/2004 8:10:16)

It's worth trying :-)

( Of course if you hadn't made threats to furry animals you would have had the time. But dodging large furry creatures with banana scented breath who've borrowed one of c1sissy's attack rolling pins can be a bit time consuming I suppose [;)])



c1sissy -> RE: Fluid or Fixed? (2/22/2004 8:49:12)

quote:

ORIGINAL: gorilla

It's worth trying :-)

( Of course if you hadn't made threats to furry animals you would have had the time. But dodging large furry creatures with banana scented breath who've borrowed one of c1sissy's attack rolling pins can be a bit time consuming I suppose [;)])

[sm=lol.gif][sm=lol.gif][sm=lol.gif][sm=lol.gif]

Only thing is, it wasn't peppergal that made the threat to furry little animals! It was I believe sherry/slberg?



Kitka -> RE: Fluid or Fixed? (2/22/2004 9:10:16)

quote:

It was I believe sherry/slberg?


Actually, I believe it was Paulie! [:o] Sherry hasn't posted in this thread as far as I can see. [:D]



paulie -> RE: Fluid or Fixed? (2/22/2004 9:11:31)

No, it was me. And I was joking. Have a banana. [;)] Your breath smells heavenly.
Niiiiiice Gorilla......that's it, back away sloooooowly........now put that tree back in the ground where it belongs......



Peppergal -> RE: Fluid or Fixed? (2/22/2004 9:22:58)

Oh, Gorilla!! I"d never threatean ANY animals, especially ones that smell of that heavenly banana scent. I can't think of a better smelling breath....it wasn't me!!!!!!!!!



c1sissy -> RE: Fluid or Fixed? (2/22/2004 9:31:42)

quote:

ORIGINAL: paulie

No, it was me. And I was joking. Have a banana. [;)] Your breath smells heavenly.
Niiiiiice Gorilla......that's it, back away sloooooowly........now put that tree back in the ground where it belongs......


First, apology to slberg.

Next, roflol! wiping tears from my eyes
quote:

Niiiiiice Gorilla......

oooo pass the box of tissues, please!



gorilla -> RE: Fluid or Fixed? (2/22/2004 9:53:27)

Feeling somewhat embarassed that he staked the wrong person out the now mollified gorilla hands bananas all round as the simian equivalent of the peace pipe. Paulie looks suprised as a large furry arm with a huge paw at the end of it emerges from his screen and pats his head gently in token of peace ......

BTW Paulie stick with it, its worth it, imagine (in your particular case) using your asp skills to serve up differently styled pages/section of pages depending on various variables eg the whole site could have a different look depending on the season. Salivating yet? [:D]



c1sissy -> RE: Fluid or Fixed? (2/22/2004 10:00:46)

quote:

BTW Paulie stick with it, its worth it,


Paulie, Your FRIEND, Gorilla is so right with this. CSS is great. I just wish that I could learn it faster. If you can grasp ASP, which I also tried to learn, but droped it to focus on the xhtml and css better, then you would be able to get CSS.

I think most of us that are posting in here are learning as well, and we are learning this together and helping each other out with it. We must be doing ok because Nancy or Gorilla only seem to jump in when we appear to have something wrong.[;)] Or maybe they sense the total frustration that we sometimes feel.

I would suggest learning CSS, bandwidth savings alone should convince you that it is worth it![;)]



paulie -> RE: Fluid or Fixed? (2/22/2004 10:23:00)

quote:

BTW Paulie stick with it, its worth it, imagine (in your particular case) using your asp skills to serve up differently styled pages/section of pages depending on various variables eg the whole site could have a different look depending on the season. Salivating yet?


Yes, that's the part that keeps me interested. Just the other day, I was tinkering with an ASP script that would allow the user to change the look of the page just by selecting a radio button on a form, and I actually got it to work! It could come in handy for folks who want to view a site with a larger font size, or to allow the user to change "skins". I can activiate a different style sheet based on their selection or as you suggested, the server clock.

It's mostly the nit-picky syntax of CSS and the heirarchical relationships of inheritance that I need to wrap my brain around. I think I'm going to make this my next area of focus though, because I like the efficiency of controlling lots of variables from a single place. It's just frustrating sometimes that we have to maintain so many different skill sets just to build a basic page - html, javascript, server-side script, css...

I've been using the style assistant as a syntax guide, but I need to go through some tutorials and develop a basic framework to apply, and then build on that as my understanding of it grows.

Maybe I'll earn my fourth muffin here in the CSS Forum![:D]

quote:

If you can grasp ASP, which I also tried to learn, but droped it to focus on the xhtml and css better, then you would be able to get CSS.

Deb - maybe we can help each other along. I've often admired your dedication to learning CSS, and thought you would really enjoy the power of ASP if you decided to learn server-side scripting.



c1sissy -> RE: Fluid or Fixed? (2/22/2004 10:37:03)

quote:

It's mostly the nit-picky syntax of CSS and the heirarchical relationships of inheritance that I need to wrap my brain around.


Paulie, this is what I am working on right now, and not making much progress. [&o] But I know if I really really focus on it that I'll get it. Like Nancy said, it is sort of a recall of the can't get the includes in front page. lol.

quote:

Deb - maybe we can help each other along


I'm all for it!

quote:

I've often admired your dedication to learning CSS,

[sm=icon_redface.gif]

Thank you.

quote:

and thought you would really enjoy the power of ASP if you decided to learn server-side scripting


I was using the wrox books for learning, and was wizing through this, UNTIL, I hit variables. I was getting all the questions correct except for maybe 1.5 in the quizes that they have at the end of the chapters. lol, even though variables was only I believe chapter 3!

But, I figured that would come in time, and that the thing I needed to really focus on and understand totally is the coding, xhtml etc... Then maybe the ASP would be a bit better in understanding.

Not sure if that makes sense or not, lol



Kitka -> RE: Fluid or Fixed? (2/22/2004 10:40:08)

quote:

Maybe I'll earn my fourth muffin here in the CSS Forum!


That's a huge number of posts (and learning) to go - muffins only start at 1000 posts! [;)][:D]



paulie -> RE: Fluid or Fixed? (2/22/2004 10:51:17)

quote:

muffins only start at 1000 posts!


Well, okay. Four stars then! Geez, it's taken me about three years to get where I am...



c1sissy -> RE: Fluid or Fixed? (2/22/2004 10:59:29)

quote:

ORIGINAL: paulie

quote:

muffins only start at 1000 posts!


Well, okay. Four stars then! Geez, it's taken me about three years to get where I am...


It won't take long when you start posting for css help, lol. And soon,you'll be answering questions as well![;)]



Kitka -> RE: Fluid or Fixed? (2/22/2004 11:04:11)

quote:

And soon,you'll be answering questions as well!


Listen up here! c1sissy speaks from real experience [;)][:D]



c1sissy -> RE: Fluid or Fixed? (2/22/2004 11:19:56)

quote:

ORIGINAL: Kitka

quote:

And soon,you'll be answering questions as well!


Listen up here! c1sissy speaks from real experience [;)][:D]


[sm=lol.gif][sm=lol.gif][sm=lol.gif]

Yes, I have finally reached the big 3000! And am working on answering questions, though not too sure if they are always correct. BUT I am finally at the point where I am trying to answer without being in fear of being wrong! And I don't mind saying when I am not sure about something, or to be corrected on something.

Ahhh well, now time to hit the world, food shopping time if all here plan on eating this week. roflol



Kitka -> RE: Fluid or Fixed? (2/22/2004 11:28:39)

quote:

BUT I am finally at the point where I am trying to answer without being in fear of being wrong!


A perfect point to be at - so long as we are open to learning, and don't fear correction, nothing is lost. It is when we are rigid and fixed in our opinions that we do not progress. Being open to new concepts is wonderful.

You are an inspiration c1sissy! [:)]

I sympathise with your need to go food shopping, tomorrow for me or I starve [:o][:D]



c1sissy -> RE: Fluid or Fixed? (2/22/2004 11:52:04)

quote:

I sympathise with your need to go food shopping, tomorrow for me or I starve

[sm=lol.gif][sm=lol.gif]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.6103516