Margins and small screens

Hi,

Once again I’d like some feedback on the site
http://www.weltladen-tuebingen.de. The situation is the following: I,
as a real computer freak, have a Big Screen. The lady who is
responsible for the content of the page, however, uses DreamWeaver and
has a small laptop. For her, the page doesn’t look so nice because the
last button on the navigation area is wrapped always. This is due to
the margin specifications in body and in #content. If I leave these
out, however, it doesn’t look as nice on my screen. Is there some
standard solution for this? Like, have the margins shrink if the
viewport gets smaller? Maybe I should just do a horizontal centering of
the #content?

I think I want to get rid of those image-buttons and just put some real
text there. Maybe that would help. A test version at
http://tcl.sfs.uni-tuebingen.de/~hen...te/WebContent/
tells me that that would help, but the problem persists.

Grateful for any suggestions!
H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

re: Margins and small screens

In article <gd4a1u$ota$1@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@sneakemail.comwrote:
More than one button wraps on my screen at a convenient browser size, it
looks fine!

But best thing to do in this situation is to make the navigation a
horizontal list, to use real HTML text and style for that white text on
orange rectangle look. Your images absolutely cry out to be replaced so,
there is nothing about them much that is essentially graphic. Plus you
gain a lot because you can control the relative text size a bit, the
paddings can be in % terms meaning they shrink the more the window is
shrunk widthwise... and other benefits.

--
dorayme

re: Margins and small screens

dorayme schreef:Ah, the thing is she doesn’t like it that it is wrapped!
Why? Or do I understand you wrongly, do you mean I should put it in an
<uland style that list to be flat? How would I do that?
display:inline on both ul and li?

to use real HTML text and style for that white text onAs I did on the test page. You’re right, thanks.

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html

re: Margins and small screens

Hendrik Maryns wrote:Does she think horizontal scrolling is preferable? If so, please try to
explain that that would be bad usability, and the site is for the
benefit of her visitors, not just her. What would be even better is to
abandon the pictures of text for the navigation and use styled plain
text instead. It's not only better for users, because the text will
scale with the visitor's preferred font size, but also better for search
engines. Plain text rules.

BTW, you have failed to set a page background color. My browser default
background is not white, and it shows.

--
Berg

re: Margins and small screens

On 10/15/08 01:36 am, Hendrik Maryns wrote:Yes. Use percentages to set the horizontal margins and padding.
You could also set the width of the buttons using percentage. The
obvious problem, then, is that eventually the size would shrink enough for
text to wrap within the button.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

re: Margins and small screens

In article <gd4e20$u7m$1@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@sneakemail.comwrote:
Well, she is not the intended user of the site... but never mind, if she
is another she who must be obeyed, then consider the other thing I said
about getting rid of fixed width images for the navigation, take a guess
at what someone who needs to look at websites at one click text size up
from normal and measure how many px or ems are involved till one of the
menu items wraps and specify a minimum width for the menu. That is as
about as good as you can do if she must be obeyed!

Yes, you use display: inline. There are many examples, Google up for
one. key things are perhaps:

li {
display: inline;
list-style: none;
}

Carefully style the li further to suit and especially the link elements
that go inside.
--
dorayme

re: Margins and small screens

Op 15-10-08 22:03 heeft Jim Moe als volgt van zich laten horen:Thanks, this works wonderfully.
width: 12.5% on the buttons doesn’t seem to have any effect, but it
looks fine like it is, so don’t bother. I’ll ask again about this if I
get to need it ;-)

Thanks also to all others for the suggestions.
H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
www.lieverleven.be
http://catb.org/~esr/faqs/smart-questions.html

re: Margins and small screens

Op 16-10-08 05:17 heeft dorayme als volgt van zich laten horen:Luckily, she is not, and I am teaching her about web design and
accessability, but she is the one whose good taste I trust more than mine!
Funnyly, display:inline seems to suffice, the list markers are
automatically hidden then.

Cheers, H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
www.lieverleven.be
http://catb.org/~esr/faqs/smart-questions.html

re: Margins and small screens

Hendrik Maryns wrote:In some browsers, no doubt, but that doesn't mean it's true for all
browsers.

--
Berg

re: Margins and small screens

On 2008-10-25, Bergamot <bergamot@visi.comwrote:No doubt, but it is true for all conforming browsers.

re: Margins and small screens

In article <slrngg6i4f.671.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggswrote:
If bullets or numbers (especially for an OL) *were* wanted, perhaps use
a float on li instead. Something like:

li {float: left; margin-right: 60px;}

<ul>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
</ul>

I mention this because whenever someone is talking about how to avoid
something, there are likely to be some interested in how to have that
very thing. Admittedly, these latter are a bit creepy and watch from the
semi darkness, but I digress...

--
dorayme