full-width overlay – #2
… exploiting available space, again.
As I was finishing up the first full-width overlay demo page, the following thought popped up somewhere between the ears of this permanently bored web carpenter…
Come to think of it, the expanding container may work equally well, or better, for presenting larger pictures and stuff residing in the side column – expand in the opposite direction that is. File-size is the same no matter where large images resides, and the effect is greater.
Consequently, a new page was assembled, and a copy of the original stylesheet was reworked ever so
slightly. As no problems was found, this “reversed” demo was ready for launch in no time.
(You'll notice that much of the text below is copied from the original page, which is logical since it is all about the same solution.)
The images in the sketchbook alongside here, all have
an inherent width of 1200px. As the side column in this layout only have space for images up to about
460px in width even on the widest screens, wider images will be compressed.
(Usually I do not want to compress images on widest page width, but in this case I have of course made an exception.)
As I do not want to change the basic layout behind this site, I had to come up with simple ways to expand content-containers at will in order to present large images and other types of content that need maximum space.
This is how my expanding containers came about. And, as “one size fits all” usually means that it doesn't fit anything properly, several versions and variants got tested. A few somewhat OK solutions was then packed together and presented here.
Note that the stylesheet for this exploit has a few
more “!important” than most might like, and quite a few more than absolutely necessary.
That's what you get when you load new stuff on top of existing stuff and won't bother to go through every single stylesheet on site looking for conflicts.
The demos are working as intended in my browsers. I have not included vendor-prefixes for transitions, so older browser versions relying on those may show a “jumpy” behavior.
just touching the surface.
My four demos are supposed to show how the “expanding container” techniques used can be made to work when added to the already quite complex styling of a live site. There are more than enough examples in the wild that show how the various techniques work in isolation, and few that show them combined.
The solutions presented on this page contain no surprises, or at least there are no planned surprises here. It is all quite simple stuff that anyone familiar with web design can put together.
It is all about coming up with an idea, and then realize it with regular markup and style. Turning ideas into reality is what I have been doing all my professional life, and the world wide web is well suited for such activities.
mastering web design
When choosing which technique, or combination of techniques, to use for what, and where, one has to be
quite familiar with as many techniques as possible. Nothing beats hands-on experience.
I have over the years coded up several thousand test/demo-pages just to see how things work in combination, which means I have this large, local, library to check up on things in whenever I run into new challenges. Sure helps me get by in the world of web design.
That only a few of my design related pages make it onto the web, has many reasons. One reason is that
I do not often care to make such test/demo-pages “presentable” to a larger audience
of web designers.
Another reason is that most of my test/demo-pages are too complex – too many things combined – to make it easy to write simple descriptions about and around whatever it is.
I am all for sharing ideas, but I am long since past the time when modifying and
simplifying code so it could be easily explained and shared, was of any interest to me. Besides,
I no longer have as much time as I used to for solving other designers' problems.
So, anyone may freely borrow ideas from my site – if they can find anything useful here, but do not expect any help from me to make any of my code work on someone else's site.
When several layers of stylesheets are run through the
CSS cascade, conflicts tend to
show up. To me this is a much welcome bonus, as there isn't much use in developing solutions that
work well in isolation but not in combination with all else on a live site.
CSS conflicts are not to be taken lightly, and “quick fixes” can
cause more damage than good. This site has a simple layout and basic styling, that isn't easily
broken. But, the main stylesheets also carry tons of alternative styles that balance down the
cascade, and these are not so insensitive to conflicts.
CSS conflicts are best solved by going through all relevant styles on site,
and correct whatever the issues are in all instances. Other times the conflicts are best solved by
adjusting the precision and weight of a few selectors and/or property/value pairs in the latest
Targeting through precise selector-chains allow for increased weight without causing further conflicts, which is where my extensive use of
!important comes in. The targeted declarations
hit and override site-wide styles where they should, and do not affect anything anywhere else.
From time to time I go through all stylesheets on site, and “tune in”
declarations that may cause, or be sensitive to, conflicts in the
CSS cascade. So also
From what I can see there aren't any serious conflicts to correct for with the introduction of the “expanding containers” solutions. I do expect some minor cascade-issues as/when I put these solutions through the phases in the collection of site-wide alternative styling, but those issues will be dealt with when they show up.
I am happy with the “expanding containers” concept as such. What remains is to find good uses for it, and that will have to wait till another day.
16.nov.2017 - corrected expansion and layering (z-index) after site-wide design update.
last rev: 16.nov.2017