Mailinglist Archive: opensuse-web (7 mails)

< Previous Next >
Template:Point_here (was: Re: [opensuse-web] incomplete tumbleweed instructions)

@wiki team: this mail includes a proposal for a major change for
Template:Point_here to fix a display bug (hidden content).

(Sorry for switching mailinglists again, but this is something I
have to bring up on the -wiki mailinglist.)

on Dienstag, 3. Mai 2011, Felix Miata wrote:
picture worth many words:

But, what about new people not
fully knowledgeable about overcoming dumb web page design? Why do
web page designers insist on arbitrary widths that can't hold their
content, and don't allow overflow to be accessible?

I just checked this. <pre> already has overflow:auto (which means it
gets scrollbars if needed).

The problem is the <table style="width:98%;"> (icon + text right of it)
which is wider than the <div> around.

Additionally, the <div> around the table uses
<div style="overflow:hidden; [...]">
Changing it to "overflow:auto;" adds a scrollbar - it looks quite ugly,
but at least works ;-) Nevertheless, it isn't the best solution.

The overflow:hidden comes from which us used on all portals.

I played around a bit, and IMHO this is at least some strange behaviour:
The <pre> can widen the <td> around it - even if the parent element has
a width restriction set :-/
I'm not sure if this is valid behaviour or a browser bug - but then it
would be a bug in (at least) Firefox and Konqueror.

The good news: I can offer a fully working solution (with the scrollbar
only at the <pre>), but it requires a full rewrite of Template:Point_here.
On the positive side, we would get rid of the table layout ;-)

Instead of the table, use the following code:

<div style="overflow:hidden; margin:.2em;"><!-- do we really need
overflow:hidden? -->

<div style="margin-left:15px; width: 48px; float:left;">
<!-- begin icon column content -->
class="image"><img height="48" width="48" alt="Icon-
<!-- end icon column content -->
</div><div style="margin-left:70px; border-left:1px solid #babdb6;
padding-left:.5em; padding-top:1px;">
<!-- padding-top:1px looks silly, but with 0px the border starts 10px
below :-( -->
<!-- begin text column content -->
<p><b>How to try Tumbleweed?</b>
<ul><li> Add Tumbleweed to your YaST or zypper installation repositories and
enable autorefresh:
<pre>zypper ar --refresh \ \
<ul><li> Do a distro update from Tumbleweed as needed. The first time you will
need to accept the GPG key:
<pre>zypper dup --from Tumbleweed
<!-- end text column content -->
<div style="clear:left"></div> <!-- just to be sure -->

I did not count pixels ;-) but it looks about the same as the table-based
version - with the advantage that <pre> gets scrollbars if needed :-)

@Wiki team: The Point_here template is used on every portal page, which also
means changing it could break a lot of pages ;-) Therefore I'm asking first:
- Are you ok with changing the Point_here template to the code listed above?
- Are there any side effects or "special" portal pages I should be aware of?


Christian Boltz
XSLT ist eine Art awk auf Bäumen und hat alle Nachteile von awk.
Wenn man vorher nur Shell konnte, ist es allerdings die Erleuchtung.
[Kristian Köhntopp in suse-linux-faq]
To unsubscribe, e-mail: opensuse-web+unsubscribe@xxxxxxxxxxxx
For additional commands, e-mail: opensuse-web+help@xxxxxxxxxxxx

< Previous Next >