Hello,
Am Montag, 31. Juli 2006 14:35 schrieb Frank Sundermeyer:
> I polished the graphics a bit, added the openSUSE writing and a
> search box and put it all together with html and css:
>
> http://www.suse.de/~fs/opensuse/splash.html
I like it ;-)
However, I noticed some technical problems:
- when the browser window is very small (say 200 px width), the links
are cut off on the left side, but you can't scroll to left.
This is a known problem of positioning elements with a negative number
of pixels relative to a left:50% element (tested in Konqueror and
Firefox)
- Konqueror allows scrolling to the right even if there is only
whitespace.
I just edited the page a bit to solve these problems (mainly the first
one, the second problem got solved "accidently" by my changes ;-) -
I'll attach both the fixed html [1] and the patch.
As you can see, I changed the outer div to margin-left/right:auto and
the inner div to left:0. You can probably merge the background image to
the outer div (and remove the inner one), I didn't test it.
Oh, and I added the usual "margin:0; padding:0" as <body> style - the
browser defaults are not very usable :-/
Successfully tested in Firefox and Konqueror.
IE might need the usual text-align:center workaround...
Regards,
Christian Boltz
[1] with full image URL added for best viewing experience when opening
the attached file in your browser ;-)
--
Und als nächste dürfen Querschnittgelähmte spammen, Blinde dürfen meinen
Server aufmachen, und wer als Kind im Ostblock aufgewachsen ist darf
HTML-Mails schreiben? Super. Ich hatte mal Mittelohrentzündung, das
sollte reichen, um Outlook benutzen zu dürfen? [Ratti in suse-linux]
--- splash_orig.html 2006-08-01 01:18:42.000000000 +0200
+++ splash.html 2006-08-01 01:30:12.000000000 +0200
@@ -17,6 +17,10 @@
font-size: 80%;
font-weight: normal;
}
+ body {
+ margin:0;
+ padding:0;
+ }
</style>
</head>
<body style="background-color: #fff">
@@ -24,8 +28,8 @@
OpenSUSE.org<br/>
Please select a language
</p>
- <div style="position: absolute; left: 50%; top: 0; width: 0; height: 0;">
- <div style="position: relative; left: -400px; top: 0; height: 600px; width: 800px; background: #fff url(tail_opensuse.png) no-repeat;">
+ <div style="margin-left: auto; margin-right: auto; top: 0pt; width: 800px; height: 600px;">
+ <div style="position: relative; left: 0; top: 0; height: 600px; width: 800px; background: #fff url(http://www.suse.de/~fs/opensuse/tail_opensuse.png) no-repeat;">
<div style="position: absolute; top: 70px; left: 75px; text-align: center;">
<a href="http://en.opensuse.org/"; class="welcome">Welcome<br/><span class="language">(English)</span></a>
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
