Sent by francky on 19 July 2006 22:10
Gunlaug Sørtun wrote:
>Jeralyn Merideth wrote:
>
>
>>Any other suggestions anyone?
>>http://216.119.67.187/js/index.htm
>>
>>
>No problem whatsoever. Just pull those top and bottom corner-parts over
>the edge of their container, and style them without a background. Then
>those rounded corners will go with any page-background.
>
>1: adjust position of the main container, by adding... [...]
>
>2: treat the sidebar the same way, by adding... [...]
>
>Now, you are using an ID over and over again, #sidebar, so that should
>be changed into a class since IDs should only appear once in each page.
>
>regards
> Georg
>
>
Hi Jeralyn,
Knowing Georg likes alternatives ;-) , I was carpenting an image variant
to the nifty corners (I don't appreciate the <b></b> things too much -
difficulties with my imagination - like html-Tidy I always want to
delete them in the html ...).
Working as follows:
* paint a small image with the top and bottom corners (172 bytes),
save it as gif with transparent corners outside.
* the html consists of a container, and inside: a top box with the
top corners, then a content box with the content and the solid
background, then a bottom corner box (and then closing of the
first container).
* in your case it is a fixed width column [1], so the left and right
corners don't need to be in a separate box to become liquid: less
div's!
I applicated it only to the sidebar new-items, the content corners can
be treated in a similar way. [2]
Tested in html-validator, css-validator, FF (1.07), IE6, Opera (7.54 and
8.01), the old NS6 .2 ( see [3] ), and Mozilla 1.71.
This is the testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-jeralyn-a.htm>.
:-)
I saw you got it working in the meantime!
Greetings,
francky
btw-1: good looking navbar. :-)
Oh, to get a 2 word item in the same line (if enlarged) , you can
replace the space between by a " ".
btw-2: some 25kB can be saved by reworking the images (see comments in
source code testpage). Modem visitors will be gratefull!
btw-3: noticed a typo in the company-stamp in the header. ;-)
[1]
For a 100% liquid way and more about the image method see: liquid
corners article
<http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm>.
[2]
The 2 corner image parts of the content box can be combined with the img
of the sidebar (with proper positioning): still only 1 img needed.
[3]
Here the "hidden header" (#mainhead h2, in case of disabled images or
disabled css) is always showed in NS6.2 and disturbing the rest of the
lay out. - This is a screenshot
<http://home.tiscali.nl/developerscorner/css-discuss/images/jeralyn-screenshot_NS6.png>.
- As compensation: NS6 is not showung the nifty corners (in the content
column)...
A quick and easy workaround for the hidden header I didn't find. - That
is: 5 or 6 working workarounds, also good for all other browsers ...
except IE.
Maybe the best way is to delete the text from the header image, and make
real text of it (with an adapted h2 style for the first line).
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
