JEFFRY A. DECOLA

MY PHP CONTAINERS

GITHUB REPO

DYNAMIC ITEMS CONTAINER

Displays items (e.g. menu or picture) that will center and collapse properly on smaller screens

Code written in php

EXAMPLE 1

Navigation Bar using Classes

EXAMPLE 2

A group of four items (middle aligned)

This is the text in item1

This is the text in item2


This is more of the text in item2


This is even more of the text in item2

This is the text in item3

This is the text in item4a

This is the text in item4b

EXAMPLE 3

Two groups of items (top and bottom aligned)

GROUP1 - text in item1

GROUP1 - text in item2


This is more of the text in item2


This is more more of the text in item2

GROUP1 - text in item3

GROUP1 - text in item4a

GROUP1 - text in item4b

GROUP2 - text in item1

GROUP2 - text in item2


This is more of the text in item2

GROUP2 - text in item3

GROUP2 - text in item4a

GROUP2 - text in item4b

GROUP2 - text in item5

This is even more text in item5

EXAMPLE 4

Pictures

Sunflower-Green-Field-in-Mountain-Pics-low

Also can be used to display images

HOW IT WORKS

Screen width is in red

box_container

box_items_container

box_item 1

box_item 2

box_item 3







HTML 

            
            <div class="box_container">

                <div class="box_items_container">

                    <div class="box_item">
                        <p> box_item 1 </p>
                    </div>

                    <div class="box_item">
                        <p> box_item 2 </p>
                    </div>

                    <div class="box_item">
                        <p> box_item 3 </p>
                    </div>

                </div>

            </div>

CSS 

            
            .box_container {
                text-align: center;
            }

            .box_items_container{
                height: inherit;
                left: 50%;
                position: relative;
            }

            .box_item {
                display: inline-block;
                left: -50%;
                position: relative;
            }