Remove From My Forums

Title in a red background div with bottom arrow also background red and on the bottom list of pictures 3 by 3 all same height and wdith

Question
0

Sign in to vote

User1991482975 posted

Hi, i am looking to achive in css the following :

I would love on the top a red box with inside a white title adn just on the center bottom of the div a kind of down arrow also in red backround

and after just above a list of div with backround pictures 3 x3 same size height an width (250 x 250)

also the picture are link and i was thinking to give a color on hover and put inside them a white title of the picture

how to achive?

Saturday, December 17, 2016 8:30 AM

Answers

User-707554951 posted

Hi, grafic.web

Based on your need, I make an sample.

Following code for your reference:

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            display: flex;
            justify-content: center;
        }

        .TitleDiv {
            ;
            background-color: red;
            height: 50px !important;
            width: 600px !important;
            text-align: center;
            padding-top: 10px;
        }

            .TitleDiv:after {
                z-index: 100;
                ;
                top: 98.1%;
                left: 50%;
                margin-left: -10%;
                content: '';
                width: 0;
                height: 0;
                border-top: solid 35px red;
                border-left: solid 30px transparent;
                border-right: solid 55px transparent;
            }

        p {
            font-size: x-large;
            word-spacing: 3px;
            color: white;
            letter-spacing: 2px;
            ;
        }

        .PictureDiv {
            z-index: 50;
            width: 600px;
            height: 400px;
            background-color: cadetblue;
            margin-top: -3px;
        }
        .PictureTable{
            width:600px;
            height:400px;
            border-collapse:collapse;
        }
        .PictureTable,th,td {
    border: 1px solid black;
}
       
        .puzzle1 {
            background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-05-133958-f9449cea-129-650.JPG);
            width: 199px;
            height: 201px;
            background-position: -200px -100px;
   
        }

        .puzzle2 {
            background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-06-132109-835d4935-20161203-180733-650.jpg);
            width: 199px;
            height: 201px;
            background-position: -200px -100px;    
        }

        .puzzle3 {
            background-image: url(http://www.collectionhair.com/Content/UserCreations/2016-12-13-130604-e2d975b0-sposa-650.JPG);
            width: 199px;
            height: 200px;
            background-position: -200px -100px;      
        }

    </style>


 <div class="container">
            <table>
                <tr>
                    <td>
                        <div class="TitleDiv">
                            <p>Title To</p>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="PictureDiv">
                            <table class="PictureTable">
                                <tr>
                                    <td style="width: 20%; height: 200px;">
                                        <div class="puzzle1">
                                        </div>

                                    </td>
                                    <td style="width: 20%">
                                        <div class="puzzle2 ">
                                        </div>


                                    </td>
                                    <td style="width: 20%">
                                        <div class="thumbnail puzzle3 ">
                                        </div>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Peter</td>
                                    <td>Griffin</td>
                                    <td>af</td>
                                </tr>
                                <tr>
                                    <td>Lois</td>
                                    <td>Griffin</td>
                                    <td>aa</td>
                                </tr>
                            </table>

                        </div>
                    </td>
                </tr>
            </table>
        </div>

Output as below:

Best Regards

Cathy

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, December 19, 2016 8:06 AM

Answered by:

Title in a red background div with bottom arrow also background red and on the bottom list of pictures 3 by 3 all same height and wdith

Question

Answers