By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,466 Members | 1,148 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,466 IT Pros & Developers. It's quick & easy.

Margins and small screens

P: n/a
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
Oct 15 '08 #1
Share this Question
Share on Google+
10 Replies


P: n/a
In article <gd**********@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gt*******@sneakemail.comwrote:
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.
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
Oct 15 '08 #2

P: n/a
dorayme schreef:
In article <gd**********@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gt*******@sneakemail.comwrote:
>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.

More than one button wraps on my screen at a convenient browser size, it
looks fine!
Ah, the thing is she doesn’t like it that it is wrapped!
But best thing to do in this situation is to make the navigation a
horizontal list,
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 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.
As 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
Oct 15 '08 #3

P: n/a

Hendrik Maryns wrote:
>>
>>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.

Ah, the thing is she doesn’t like it that it is wrapped!
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
Oct 15 '08 #4

P: n/a
On 10/15/08 01:36 am, Hendrik Maryns wrote:
>
Once again I’d like some feedback on the site
http://www.weltladen-tuebingen.de. [...]
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?
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)
Oct 15 '08 #5

P: n/a
In article <gd**********@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gt*******@sneakemail.comwrote:
dorayme schreef:
In article <gd**********@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gt*******@sneakemail.comwrote:
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.
More than one button wraps on my screen at a convenient browser size, it
looks fine!

Ah, the thing is she doesn’t like it that it is wrapped!
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!

But best thing to do in this situation is to make the navigation a
horizontal list,

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?
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.
>
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.

As I did on the test page. You’re right, thanks.

H.
--
dorayme
Oct 16 '08 #6

P: n/a
Op 15-10-08 22:03 heeft Jim Moe als volgt van zich laten horen:
On 10/15/08 01:36 am, Hendrik Maryns wrote:
>Once again I’d like some feedback on the site
http://www.weltladen-tuebingen.de. [...]
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?
Yes. Use percentages to set the horizontal margins and padding.
Thanks, this works wonderfully.
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.
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
Oct 25 '08 #7

P: n/a
Op 16-10-08 05:17 heeft dorayme als volgt van zich laten horen:
In article <gd**********@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gt*******@sneakemail.comwrote:
>dorayme schreef:
>>In article <gd**********@newsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gt*******@sneakemail.comwrote:

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.
More than one button wraps on my screen at a convenient browser size, it
looks fine!
Ah, the thing is she doesn’t like it that it is wrapped!

Well, she is not the intended user of the site... but never mind, if she
is another she who must be obeyed,
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!
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!

>>But best thing to do in this situation is to make the navigation a
horizontal list,
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?

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

li {
display: inline;
list-style: none;
}
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
Oct 25 '08 #8

P: n/a

Hendrik Maryns wrote:
Op 16-10-08 05:17 heeft dorayme als volgt van zich laten horen:
>>
li {
display: inline;
list-style: none;
}

Funnyly, display:inline seems to suffice, the list markers are
automatically hidden then.
In some browsers, no doubt, but that doesn't mean it's true for all
browsers.

--
Berg
Oct 25 '08 #9

P: n/a
On 2008-10-25, Bergamot <be******@visi.comwrote:
>
Hendrik Maryns wrote:
>Op 16-10-08 05:17 heeft dorayme als volgt van zich laten horen:
>>>
li {
display: inline;
list-style: none;
}

Funnyly, display:inline seems to suffice, the list markers are
automatically hidden then.

In some browsers, no doubt, but that doesn't mean it's true for all
browsers.
No doubt, but it is true for all conforming browsers.
Oct 25 '08 #10

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-10-25, Bergamot <be******@visi.comwrote:

Hendrik Maryns wrote:
Op 16-10-08 05:17 heeft dorayme als volgt van zich laten horen:

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

Funnyly, display:inline seems to suffice, the list markers are
automatically hidden then.
In some browsers, no doubt, but that doesn't mean it's true for all
browsers.

No doubt, but it is true for all conforming browsers.
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
Oct 25 '08 #11

This discussion thread is closed

Replies have been disabled for this discussion.