Blog

My central div does not go up it is fixed on bottom, why?RSS

3 replies

Last post Jan 20, 2017 05:59 AM by AngelinaJolie

‹ Previous Thread|Next Thread ›

Shortcuts

grafic.web

Member

306 Points

1663 Posts

My central div does not go up it is fixed on bottom, why?

Jan 18, 2017 10:34 AM|grafic.web|LINK

Hi, i have 3 div and the central div show his content fixed on the bottom, when i i would love to have it full height, showing the white box for the same size of the pictures ont the side...

This is the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
    <title>On parle de votre salon de coiffure sur collectionhair.fr</title>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Roboto Condensed',sans-serif;
        }

        p {
            font-size: 22px;
        }

        a {
            text-decoration: none;
        }

        hr.style14 {
            border: 0;
            height: 1px;
            background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            width: 85%;
        }

        .div__box {
            display: inline-block;
            margin: 2%;
            background-color: #f5f5f5 ;
        }

        .center__title {
            font-weight: 700;
            text-transform: uppercase;
            color: #3e3e41;
        }

        .div__box__img {
            max-width: 230px;
            min-width: 230px;
        }

        .div__box__center {
            max-width: 350px;
            min-width: 350px;
        }

        .div__box__inside {
            padding: 2%;
        }

        .div__box__inside__center {
            background-color: #ffffff;
            background: white;
        }

        .ch-btn-go {
            font-family: 'Fjalla One', sans-serif;
            font-size: 0.95em;
            background: #ff0048;
            background-image: none;
            border: 1px solid #ff0048;
            border-radius: 0px;
            color: #ffffff;
            letter-spacing: 3px;
            font-weight: 100;
            text-decoration: none !important;
            text-shadow: none;
            text-transform: uppercase;
            padding: 3%;
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
        }

            .ch-btn-go:hover {
                background: #ffffff;
                color: #ff0048;
                border: 1px solid #ff0048;
                -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -ms-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;
            }


        .div__box__img_more {
            margin: 0;
            padding: 0;
            /*   border: 0.5px solid #303030;*/
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            min-height: 175px;
            min-width: 230px;
            text-align: center;
            position: relative;
            justify-content: center;
            display: block;
            float: left;
            box-sizing: border-box;
            vertical-align: middle;
        }

            .div__box__img_more:hover {
                filter: brightness(120%);
                -webkit-filter: brightness(120%);
                -moz-filter: brightness(120%);
                -o-filter: brightness(120%);
                -ms-filter: brightness(120%);
            }


        .div__box__img_more_autor {
            bottom: 0px;
            position: absolute;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            background: rgba(0,0,0,.6);
            backdrop-filter: grayscale(1) contrast(3) blur(1px);
        }

        .div__box__img_more_autor-h2 {
            font-size: 1.3rem;
            color: #fff;
            text-align: center;
            padding: 1%;
            letter-spacing: 3px;
            text-shadow: 0 0 7px rgba(0,0,0, 0.5);
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4" align="center">
            <p>
                <strong>1er</strong> site de coiffure en ligne
            </p>
            <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                <img src="http://www.collectionhair.com/Content/Images/Collection-Hair-Logo-100.png" alt="CollectionHair Logo" title="CollectionHair Logo" />
            </a>
        </div>
    </div>

    <hr class="style14">

    <div class="row">

        <div class="col-lg-12 col-md-12 col-sm-12" align="center">

            <div align="center" class="div__box div__box__img">
                <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                    <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-SEO.jpg'); margin: 2%;">
                        <div class="div__box__img_more_autor" align="center">
                            <h3 class="div__box__img_more_autor-h2">Visibilité</h3>
                        </div>
                    </div>
                    <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Booking.jpg'); margin: 2%;">
                        <div class="div__box__img_more_autor" align="center">
                            <h3 class="div__box__img_more_autor-h2">Clients</h3>
                        </div>
                    </div>
                </a>
            </div>

            <div align="center" class="div__box div__box__center">
                <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                    <div class="col-md-12 div__box__inside div__box__inside__center">
                        <h1 class="center__title">On parle de votre salon de coiffure sur collectionhair.fr</h1>
                        <p><i class="ch-btn-go">Créer mon compte</i></p>
                    </div>
                </a>
            </div>

            <div align="center" class="div__box div__box__img">
                <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                    <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Costumer.jpg'); margin: 2%;">
                        <div class="div__box__img_more_autor" align="center">
                            <h3 class="div__box__img_more_autor-h2">Reservation</h3>
                        </div>
                    </div>
                    <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Portfolio.jpg'); margin: 2%;">
                        <div class="div__box__img_more_autor" align="center">
                            <h3 class="div__box__img_more_autor-h2">Portfolio</h3>
                        </div>
                    </div>
                </a>
            </div>

        </div>

    </div>


    <hr class="style14">


</body>
</html>

What is wrong?

Your wish is your command!!!

rashmi.padia

Member

63 Points

41 Posts

Re: My central div does not go up it is fixed on bottom, why?

Jan 18, 2017 12:19 PM|rashmi.padia|LINK

Hi,

You try this code for set your central div, as same size of the other div,

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
    <title>On parle de votre salon de coiffure sur collectionhair.fr</title>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Roboto Condensed',sans-serif;
        }

        p {
            font-size: 22px;
        }

        a {
            text-decoration: none;
        }

        hr.style14 {
            border: 0;
            height: 1px;
            background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
            width: 85%;
        }

        .div__box {
            display: inline-block;
            background-color: #f5f5f5 ;
        }

        .center__title {
            font-weight: 500;
            text-transform: uppercase;
            color: #3e3e41;
			width:200px;
			
        }

        .div__box__img {
            max-width: 230px;
            min-width: 230px;
        }

        .div__box__center {
            max-width: 850px;
            min-width: 850px;
        }

        .div__box__inside {
            padding: 43% 2% 10% 2%;
			
        }

        .div__box__inside__center {
            background-color: #ffffff;
            background: white;
			height:25%;
			width:70%;
			margin-top:0%;
		
        }

        .ch-btn-go {
            font-family: 'Fjalla One', sans-serif;
            font-size: 0.95em;
            background: #ff0048;
            background-image: none;
            border: 1px solid #ff0048;
            border-radius: 0px;
            color: #ffffff;
            letter-spacing: 3px;
            font-weight: 100;
            text-decoration: none !important;
            text-shadow: none;
            text-transform: uppercase;
            padding: 2%;
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
        }

            .ch-btn-go:hover {
                background: #ffffff;
                color: #ff0048;
                border: 1px solid #ff0048;
                -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -ms-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;
            }


        .div__box__img_more {
            margin: 0;
            padding: 15%;
            /*   border: 0.5px solid #303030;*/
            width: 25%;
            height: 40%;
            background-repeat: no-repeat;
            background-size: cover;
            min-height: 175px;
            min-width: 230px;
            text-align: center;
            position: relative;
            justify-content: center;
            display: block;
            float: left;
            box-sizing: border-box;
            vertical-align: middle;
        }

            .div__box__img_more:hover {
                filter: brightness(120%);
                -webkit-filter: brightness(120%);
                -moz-filter: brightness(120%);
                -o-filter: brightness(120%);
                -ms-filter: brightness(120%);
            }


        .div__box__img_more_autor {
            bottom: 0px;
            position: absolute;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            background: rgba(0,0,0,.6);
            backdrop-filter: grayscale(1) contrast(3) blur(1px);
        }

        .div__box__img_more_autor-h2 {
            font-size: 1.3rem;
            color: #fff;
            text-align: center;
            padding: 5%;
            letter-spacing: 3px;
            text-shadow: 0 0 7px rgba(0,0,0, 0.5);
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4" align="center">
            <p>
                <strong>1er</strong> site de coiffure en ligne
            </p>
            <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                <img src="http://www.collectionhair.com/Content/Images/Collection-Hair-Logo-100.png" alt="CollectionHair Logo" title="CollectionHair Logo" />
            </a>
        </div>
    </div>

    <hr class="style14">

    <div class="row">

        <div class="col-lg-12 col-md-12 col-sm-12" align="center">

            <div align="center" class="div__box div__box__img">
                <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                    <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-SEO.jpg'); ">
                        <div class="div__box__img_more_autor" align="center">
                            <h3 class="div__box__img_more_autor-h2">Visibilité</h3>
                        </div>
                    </div>
                    <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Booking.jpg'); ">
                        <div class="div__box__img_more_autor" align="center">
                            <h3 class="div__box__img_more_autor-h2">Clients</h3>
                        </div>
                    </div>
                </a>
            </div>

            <div align="center" class="div__box div__box__center">
                <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                    <div class="col-md-12 div__box__inside div__box__inside__center">
                        <h1 class="center__title">On parle de votre salon de coiffure sur collectionhair.fr</h1>
                        <p><i class="ch-btn-go">Créer mon compte</i></p>
                    </div>
                </a>
            </div>

            <div align="center" class="div__box div__box__img">
                <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                    <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Costumer.jpg'); ">
                        <div class="div__box__img_more_autor" align="center">
                            <h3 class="div__box__img_more_autor-h2">Reservation</h3>
                        </div>
                    </div>
                    <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Portfolio.jpg'); margin: 2%;">
                        <div class="div__box__img_more_autor" align="center">
                            <h3 class="div__box__img_more_autor-h2">Portfolio</h3>
                        </div>
                    </div>
                </a>
            </div>

        </div>

    </div>


    <hr class="style14">


</body>
</html>

Thanks,

Rashmi Padia
Software developer
iFour Technolab Pvt. Ltd.

- Reply
grafic.web
Member

306 Points

1663 Posts

Re: My central div does not go up it is fixed on bottom, why?

Jan 18, 2017 01:10 PM|grafic.web|LINK

Hi, this code does not show the good result.

Actually, the picture are even stech..

Your wish is your command!!!

AngelinaJoli...

Contributor

5260 Points

2307 Posts

Re: My central div does not go up it is fixed on bottom, why?

Jan 20, 2017 05:59 AM|AngelinaJolie|LINK

Hi grafic,

grafic.web
My central div does not go up it is fixed on bottom

I suggest that we could refer to my code, it works ;

Here is my code ,and i just added a little bit of code:

Note: The code of my operation has been marked with a slash

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
    <title>On parle de votre salon de coiffure sur collectionhair.fr</title>
    @*<link href="~/Content/bootstrap.css" rel="stylesheet" />*@
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
…still your code
</style>
</head>
<body>
    <div class="container">


        <div class="row">
               <div class="col-lg-4 col-md-4 col-sm-4 col-lg-offset-4 col-md-offset-4 col-sm-offset-4"  align="center"  >
                <p>
                    <strong>1er</strong> site de coiffure en ligne
                </p>
                <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon"
 title="Comment Prendre Possession De Mon Salon" target="_blank">
                    <img src="http://www.collectionhair.com/Content/Images/Collection-Hair-Logo-100.png" alt="CollectionHair Logo" 
title="CollectionHair Logo" />
                </a>
            </div>
        </div>

        <hr class="style14">

        <div class="row">
           
            @*<div class="col-lg-12 col-md-12 col-sm-12" align="center">*@
            <div class="col-lg-12 col-md-12 col-sm-12 ">
                <div class="col-lg-4 col-md-4 col-sm-4" align="center">



                    <div align="center" class="div__box div__box__img">
                        <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" 
title="Comment Prendre Possession De Mon Salon" target="_blank">
                            <div class="col-md-12 div__box__inside div__box__img_more" 
style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-SEO.jpg'); margin: 2%;">
                                <div class="div__box__img_more_autor" align="center">
                                    <h3 class="div__box__img_more_autor-h2">Visibilité</h3>
                                </div>
                            </div>
                            <div class="col-md-12 div__box__inside div__box__img_more" 
style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Booking.jpg'); margin: 2%;">
                                <div class="div__box__img_more_autor" align="center">
                                    <h3 class="div__box__img_more_autor-h2">Clients</h3>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4" align="center">

                    <div align="center" class="div__box div__box__center">
                        <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" 
title="Comment Prendre Possession De Mon Salon" target="_blank">
                            <div class="col-md-12 div__box__inside div__box__inside__center">
                                <h1 class="center__title">On parle de votre salon de coiffure sur collectionhair.fr</h1>
                                <p><i class="ch-btn-go">Créer mon compte</i></p>
                            </div>
                        </a>
                    </div>
                    </div>
                <div class="col-lg-4 col-md-4 col-sm-4" align="center">
                    <div align="center" class="div__box div__box__img">
                        <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon"
 title="Comment Prendre Possession De Mon Salon" target="_blank">
                            <div class="col-md-12 div__box__inside div__box__img_more" 
style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Costumer.jpg'); margin: 2%;">
                                <div class="div__box__img_more_autor" align="center">
                                    <h3 class="div__box__img_more_autor-h2">Reservation</h3>
                                </div>
                            </div>
                            <div class="col-md-12 div__box__inside div__box__img_more" 
style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Portfolio.jpg'); margin: 2%;">
                                <div class="div__box__img_more_autor" align="center">
                                    <h3 class="div__box__img_more_autor-h2">Portfolio</h3>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                </div>

        </div>


        <hr class="style14">
    </div>

</body>
</html>

Here is my screenshot:

Best regards,

Jolie

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›