Wikidot Community

There are still even narrower screens? God!…. How nerrow than it might be? Can you give me a link to one of your sites with a fixed width to 900px?

I almost always go for a fixed width design rather than a fluid design that has a 100% width whatever the screen size. I find it is much easier to layout images and text and be sure that what the user sees is what I intended. However, the downsides are that if someone has a very small screen they will have scrollbars, as Shane said. The other issue is if they have a screen with a very large resolution because then there will be a lot of blank space.

I don't set the width at 1024px though but something a bit narrower, usually 920px upwards which is a bit wider than Shane uses. Examples of my sites with fixed width are:

http://www.strathpeffervillage.org.uk - 950px wide.
http://www.rfpg.org - 932 px wide
http://highlandskateparks.wikidot.com - will be 975px when it is finished, although it has a much larger background image.

In each case you should be able to view the css at css:theme.

Richard (rurwin) is strongly against fixed width so he might well chip in here with the opposing view. There is no right and wrong here, it's just what works best for the user, the content and (dare I say it) the developer. It is a bit of a balancing act because of the differences in users' screens.

Sorry Rob, I got distracted by work ;-)

There are still even narrower screens? God!…. How nerrow than it might be?

Certainly there are.

Resolution: 320 X 480 HVGA

OK, so that's an Android cell-phone, and I'm not seriously suggesting going quite that far as fixed width, or even that your site should look good at that size. But it is worth noting that smart phones generally do not identify themselves as mobile devices, and the narrower your site can adjust to, the less trouble you will cause for the increasing number of phone-based browsers.

Then again, my screen (one of them) is 1920 pixels wide; any web page becomes hard to read at that width, so I never have my browser full-screen and its size depends on whatever else I might be doing. Usually 800-1024 pixels would be readable, but it would not usually be optimal. It would not be unusual for 1024 to be too wide for my window, whereas 800 would usually waste a significant amount of space.

I built this page as an exploration of how extensible a page could be and still be easy to read. It's a range of about 450-1800 pixels wide and the extreme ends of that are arguable. So 800-1000 is the sweet-spot, and that is where most web-pages are designed.

To my mind, it does not really matter how your page looks at 400 pixels or 1600 pixels, so long as it degrades gracefully. Just design it for 800-1000 pixels wide; that's how 99% of your readers will see it, and the rest will accept a little less perfection in exchange for using their screen space efficiently.

If you buy another keyboard, make sure it has a USB cable. Many of them will have both the older PS/2 connector and USB, but I doubt your laptop has a PS/2 port.

Didn't check, but I doubt it has PS/2. Thanks for the tip, I'll check some keyboarsds wit USB.

Rob, I would appreciate very much your help.

What is crossing my mind is a header picture, which is at 1024px. maybe it should be reduced, too? Althoght I wouldn't make it too much nerrow so, I think 1000px will be ok.

You can try in sandbox category, which at the moment, doesn't have theside bar. Should I put it, in order to see how it looks?

My computer is old (some 4 years already), but the thing is that all my keyboards remain very quickly without letters because I type very much. I guess that normal keybord is more resistant to neverending typing than lapotps, because this is my first one, and this happens to me for the first time… :) All other keyboards lost very quicklu the letters, but the buttons stayed in their places untild the last day….

Anyway, I am planning to change it for something even smaller. I like those notebooks, you can take them with you anywhere in your pocket… :)

Thanks, Rob! Now it is better. I will have to fix the header photo, too, becasue now the letters on the right side don't "breath". One more little question: I prefer the top bar to be a little bit more up. not too much, but more up than it is now. It will also give some space under it, between it and the page content…

I was able to upload it without any problem to the admin:css page. I have applied it to the container background.

Thanks, Rob. Now I should find an appropriate picure for this bacground… This one has too many blank spaces…

Shane, I'll try. :)

Also, the current background image, since it repeats, has definite breaks every time it repeats.

You could try using an image like this with blurred edges and apply modified background attributes. Either of the two might look good.

body{
    background-attachment: fixed;
    background-position: center center;
}

body{
    background-position: center top;
    background-repeat: repeat-y;
}

EDIT:

Now I should find an appropriate picure for this bacground… This one has too many blank spaces…

…Or you could find an alternative (: You managed to post before me.

Thanks, Tim, for the tip. :) Actually I liked that one Rob placed in the first place, but now I don't know where'd it gone… It had a nice bluwish with some shadows, and I really liked it. I'll ask my friend who made me the header, if it is possible to make me something similar. Which dimensions than would be ideal?

Mwa hah hah, I deleted it again. Do you want it back?

….and it's back. It's stored on the admin:css page. It's a version of a background I'm using on my site here.

I really like the result on the http://www.istorijskabiblioteka.com/fixed:width page.

Wow, that does look pretty good!

Some of your pages are quite long, so let me know if you need the blue part of the gradient to extend further down the page.

Thaks Rob, but I am afraid you didn't understand me. I meant, the darkest color along the side (left and right), and degradation goes horizontaly, not vertically. Look at the sides of Community site: it has dark grey all along the pages left and right side and then it becomes lighter and lighter as you m,ove to the left and to the right, not downwards.

I thought of this solution in the first place, but then I remembered of what you have just said: some pages are very long and it wouldn look good on them.

I am sorry for torturing you, I really do :( but thanks a mill for all your help!
:)

Look at the sides of Community site: it has dark grey all along the pages left and right side and then it becomes lighter and lighter as you move to the left and to the right, not downwards

I know, it was me that did that.

OK, I'll have another look at it. It will require 2 separate images.

This will be a bit tricky: the community site is a fluid design and the position of the gradient down the sides is set by padding. With a fixed width design you can't easily do the same thing. I'll give this some thought.

But, can't be something done using 1px, but instead of placing it vertically, to place it horizontally? and then just command it to repeat. The same as in top bar…. Only the repeating will go vertically, not horizontally….

No, it's not that simple. In the top bar the 1px image is a background image. If you want to put the image down the left side of the #header, #content and #footer you can't set it as a background image because a) the header already has a background and b) the gradient will be inside the elements (e.g the #content-wrap) whereas you want it outside like the gradient on the community site.

The best way of doing this is probably using border-image, a CSS3 property. This is what I am working on. Good job It has been a quiet day although I really should be working on other sites!

Just a thought, but on a fixed width design, can you just use one image like this one and apply it to the #container? I cannot edit the page, so I cannot experiment.

#container{
    background-image: url(http://timothyfoster.wikidot.com/local--files/files/bib_back-2.jpg);
    background-repeat: repeat-y;
    background-position: center top;
}

EDIT: That should do it, I think.

Yes that was the solution I was starting to work on as the border-image solution is only working down one side. So providing Brunni doesn't change the width that is the solution we are likely to settle on.

I have added the image and the result is on the fixed:width page. However I got the width of the background image a bit wrong so have had to reduce the width of the other elements. I have to go out now for a while but will fix it later.

I had a few extra minutes so fixed the image. Does that do the job?

I have already changed to 5 and 6. Somehow I would like to keep the old looks with dynamic width. You'll never know… :)

:)

Thanks, again!