![]() into the defined outmost container “div#outer_cont” and the additionally introduced internally nested container “div#main_cont”,.To be able to keep up the transparency during a later responsive element reordering we need to insert such background layer (DIV) elements We firstly define DIV containers which serve us as transparent background stripes of all column elements of our fluid design. To make everything a bit more challenging we shall also show how one can add transparent background layers to each column of the original fluid layout and how we manage such transparency layers together with responsive width adaptions of the web page.Įxtending the HTML code by tags for transparency layers We shall see in this article that our achievements now allow for almost trivial measures to gain the correct aspired responsiveness: You just need to change a few “float” and “margin” properties. For small view port widths we would like to move our left sided vertical menu directly below the text area – an objective we had already defined in the first article and which will be met by the measures discussed in the present article. Important – transition to a range of significant smaller view port widths. We have, however, not yet shown how to manage a second – and more ![]() In the last article we also discussed some additional, conventional measures to make the different content column blocks appear as separate optical elements floating above a common background (picture). We have demonstrated how to handle a first responsive transition in viewport width by moving one of the columns downward and adapt our content areas in width – without loosing fluidity. What we have achieved is that by using some compensating CSS tricks we can now choose a certain – unusual, but in a responsive context required – tag order in the HTML code without destroying the optical features and the fluidity of our multi-column page layout. With a bit of abstraction the discussed recipe will in general allow for any required tag order for the DIV-containers in the code. Of course we had to compensate by more complicated CSS definitions.Īmong other things we used negative margin definitions to optically place floated elements where we needed them to be on the screen – despite an unusual tag position in the HTML code. We showed how we could re-nest and rearrange the DIV-container tags into the required code order – without changing the original optical and fluid layout. In the second article of this series we therefore discussed a special situation for which we required a specific vertical reordering of existing elements. In such a situation, however, the last tag (of the sequence of floated elements) in the code represents the element which is moved downwards in the browser’s viewport first. make use of the automatic handling of floated elements by the browser for situations when the horizontal viewport space gets too small for displaying all floated elements in just one row. Under normal circumstances you do NOT want to create major HTML block elements twice and switch them alternately on and off just to become responsive.įor getting the right vertical ordering effect you would e.g. For reasons of coding efficiency the vertical rearrangement of previously horizontally distributed containers should be achieved just by changing some CSS properties like “position”, “margin” or “float” when the view port gets smaller than some predefined values. Typically, in a responsive approach you rearrange the content columns into a vertical order instead of the original horizontal sequence, because you want to make use of a maximum of the view port width for each of the information and navigation containers. However, the natural tag order may lead to conflicts when you want to reposition the column like page elements in a fluid and additionally responsive approach to our multi-column layout. The CSS properties of the containers require no special attention – everything is straightforward. In your HTML code you would define and describe the tags of the floated container elements in just this natural sequence. Such floated content elements could be a vertical navigation column, a main information block with text and a right column with teaser text elements. You need to encapsulate floated page elements in a container. and to control the vertical heights of optical background elements for the different columns.to both use a fluid design with multiple content columns in horizontal direction and.We discussed a problem that may arise when you want to make a fluid design responsive. Responsive fluid multi-column layouts – the DIV order problem – II Responsive fluid multi-column layouts – the DIV order problem – I
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |