div divisée en grande ne peut pas le rendre plus petit

J'essaie de faire une div pleine largeur qui est dans une enveloppe plus petite. C'est une extension sur ce question:div divisée en grande ne peut pas le rendre plus petit

Le problème est que mon div est maintenant trop grand. La hauteur est trop élevée et je ne trouve pas le moyen de la changer. site web: http://ndvibes.com c'est le violet en bas.

code:

.feedback { 
 
    background-color: #8904B1; 
 
    margin: 0 auto; 
 
    color: #ffffff; 
 
    position: relative; 
 
    z-index: 2; 
 
    padding: 10px 0; 
 
} 
 

 
.feedback-wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
.feedback-wrapper:before, 
 
.feedback-wrapper:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100vw; 
 
    background-color: #8904B1; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 

 
.feedback-wrapper:before { 
 
    left: -100%; 
 
} 
 

 
.feedback-wrapper:after { 
 
    right: -100%; 
 
} 
 

 
.feedback span { 
 
    text-align: center; 
 
    display: block; 
 
}

<div class="outer-space"> 
 
    <div class="wrapper"> 
 
    <!--MORE CODE FOR WEBSITE---> 
 
    <div class="feedback-wrapper colorChange purple" id="test"> 
 
     <div class="feedback"> 
 
     <span>"Nooit zo een snelle service gehad"</span> 
 
     <span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span> 
 
     <span>"Eindelijk mijn online website gemoderniseerd"</span> 
 
     <span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Voici une jsFiddle de la page Web complète parce que le problème ne se produit pas dans le Stackoverflow bout de code: https://jsfiddle.net/v0x6g29c/

Source

2017-06-12 O' Niel

Quelle est exactement votre question ici? qu'essayez-vous d'accomplir? Cliquez sur le – Nick

@ Nick jsFiddle lorsque vous exécutez le code en bas, vous voyez un div violet/rose qui est trop élevé. Comment puis-je le rendre plus petit en hauteur, donc c'est juste assez haut pour le texte (et un peu de rembourrage)? Image: http://i.imgur.com/lo54OtP.png –

https://jsfiddle.net/vsrmjwkr/ quelque chose comme ça? il suffit d'ajouter la hauteur: auto à .feedback – Nick

Cela devrait fonctionner:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<!DOCTYPE html> 
<html> 

    <head> 
    <link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/general.css"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="shortcut icon" type="image/png" href="/images/favicon.png"> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <!-- include Google's AJAX API loader --> 
    <script src="http://www.google.com/jsapi"></script> 
    <!-- load JQuery and UI from Google (need to use UI to animate colors) --> 
    <script type="text/javascript"> 
     google.load("jqueryui", "1.5.2"); 

    </script> 

    <script src="/js/general.js"></script> 
    <link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/index.css"> 


    <title>NDVibes - Webdeveloper</title> 
    </head> 

    <body> 
    <div class="outer-space"> 
     <div class="wrapper"> 
     <div class="header"> 
      <div class="myNavbar-wrapper"> 
      <div class="myNavbar"> 
       <ul> 
       <li><a class=active href="/">Home</a></li> 
       <li><a href="/panel">Uw website</a></li> 
       <li><a href="/about">Over</a></li> 
       <li><a href="/portfolio">Portfolio</a></li> 
       <li><a href="/contact">Contact</a></li> 
       </ul> 
      </div> 
      </div> 
     </div> 

     <div class="image-wrapper"> 
      <img src="/images/big_image.png" /> 
     </div> 

     <h1 class="bigTitle"> 
       Webdeveloper since 2017 
      </h1> 

     <div class="positives"> 
      <div class="point"> 
      <img src="/images/fast.png" /> 
      </div> 
      <div class="point"> 
      <img src="/images/responsive.png" /> 
      </div> 
      <div class="point"> 
      <img src="/images/secure.png" /> 
      </div> 
     </div> 

     <div class="btn-wrapper"> 
      <a href="/panel"> 
      <div class="btn colorChange purple"> 
       Geef mij die website! 
      </div> 
      </a> 
      <br> 
      <span> 
        Geen enkel probleem! klik gewoon op de knop en ik zal zo snel mogelijk reageren. 
       </span> 
     </div> 

     <div class="feedback-wrapper colorChange purple" id="test"> 
      <div class="feedback"> 
      <span>"Nooit zo een snelle service gehad"</span> 
      <span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span> 
      <span>"Eindelijk mijn online website gemoderniseerd"</span> 
      <span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span> 
      </div> 
     </div> 

     <div class="footer"> 
      Copyright &copy; 2017 - <span id="year">2017</span> Niel Duysters 
     </div> 
     </div> 
    </div> 
    <!---------------GOOGLE ANALYTICS-----------------> 
    <script> 
     (function(i, s, o, g, r, a, m) { 
     i['GoogleAnalyticsObject'] = r; 
     i[r] = i[r] || function() { 
      (i[r].q = i[r].q || []).push(arguments) 
     }, i[r].l = 1 * new Date(); 
     a = s.createElement(o), 
      m = s.getElementsByTagName(o)[0]; 
     a.async = 1; 
     a.src = g; 
     m.parentNode.insertBefore(a, m) 
     })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); 

     ga('create', 'UA-46774773-2', 'auto'); 
     ga('send', 'pageview'); 

    </script> 

    </body> 

</html>

CSS

.image-wrapper img { 
    display: inline-block; 
    width: 80%; 
    position: relative; 
    left: 50%; 
    transform: translate(-50%, 0); 
} 

.bigTitle { 
    text-align: center; 
    margin-top: -0.5%; 
    margin-bottom: 5%; 
    color: #766F82; 
    font-family: "ValeraRound"; 
} 

.positives { 
    margin-top: 100px; 
} 

.positives .point { 
    width: 30%; 
    float: left; 
    margin-left: 3%; 
} 

.positives .point img { 
    width: 50%; 
    display: block; 
    margin: auto; 
} 

.btn-wrapper { 
    clear: both; 
    float: left; 
    width: 100%; 
    margin-top: 140px; 
    text-align: center; 
} 

.btn-wrapper .btn { 
    padding: 20px; 
    padding-right: 50px; 
    padding-left: 50px; 
    display: inline-block; 
    border-radius: 10px; 
    border: solid 1px #1D1846; 
    /*color: #746982;*/ 
    color: #FFFFFF; 
    font-style: italic; 
    font-size: 22px; 
} 

.btn-wrapper span { 
    display: block; 
    margin-top: 15px; 
    font-style: italic; 
    color: #746982; 
} 

.outer-space { 
    overflow: hidden; 
} 


/* 
.feedback { 
    clear: both; 
    float: left; 
    width: 1000%; 
    position: relative; 
    margin-top: 0; 
    padding-bottom: 40px; 
} 
.feedback-wrapper { 
    position: relative; 
    width:100%; 
    max-width: 600px; 
    margin:0 auto; 
} 
.feedback:before, .feedback:after { 
    content:""; 
    position: absolute; 
    height:20%; 
    width:100vw; 
    background-color: #8904B1; 
    top: 0; 
    z-index: 1; 
} 
.feedback:before { 
    left:-100%; 
} 
.feedback:after { 
    right:-100%; 
} 
.feedback-wrapper span { 
    font-size: 22px; 
    font-family: "Droid Serif"; 
    font-style: italic; 
    color: #E3DBFF; 
    display: block; 
    margin-top: 20px; 
text-align: center; 
} 
*/ 

.feedback { 
    background-color: #8904B1; 
    margin: 0 auto; 
    color: #ffffff; 
    position: relative; 
    z-index: 2; 
    padding: 10px 0; 
    left:0 !important; 
} 

.feedback-wrapper { 
    position: relative; 
    width: 100%; 
    max-width: 600px; 
    margin: 0 auto; 
    display: flex; 
} 

.feedback-wrapper:before, 
.feedback-wrapper:after { 
    content: ""; 
    position: absolute; 
    height: 100%; 
    width: 100vw; 
    background-color: #8904B1; 
    top: 0; 
    z-index: 1; 
} 

.feedback-wrapper:before { 
    left: -100%; 
} 

.feedback-wrapper:after { 
    right: -100%; 
} 

.feedback span { 
    text-align: center; 
    width:100%; 
    display: block; 
    z-index: 5; 
} 


/***Responsive***/ 

@media screen and (max-width: 801px) { 
    .bigTitle { 
    font-size: 120%; 
    } 
    .positives { 
    margin-top: 50px; 
    } 
    .positives .point { 
    float: none; 
    width: 60%; 
    max-width: 225px; 
    min-width: 180px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 10%; 
    } 
    .btn-wrapper { 
    margin-top: 40px; 
    } 
    .feedback { 
    width: 112%; 
    left: -6%; 
    } 
    .feedback-wrapper { 
    width: 90%; 
    position: relative; 
    left: 50%; 
    top: 0; 
    transform: translate(-50%, 0); 
    } 
    .feedback-wrapper span { 
    font-size: 14px; 
    display: block; 
    font-size: 100%; 
    } 
}

https://jsfiddle.net/8ohnsf28/

Source

2017-06-12 07:43:47 Nick

Vous êtes un héros !!!!!!!!!!! –

Quelque chose à garder à l'esprit: pour une raison ou une autre, même s'il restait: -500% a été commenté, le navigateur l'appliquait toujours à l'élément. Je l'ai fixé sur le violon en utilisant! Important, mais vérifiez dans votre cas spécifique. Important pourrait ne pas être nécessaire.Quoi qu'il en soit, heureux que cela fonctionne maintenant;) – Nick

Merci! Mais si vous ne vous embêtez pas, pourriez-vous me donner un indice sur la façon de placer le div un peu plus bas? http://i.imgur.com/undefined.png –

Vérifiez cela, et laissez moi sais.

.image-wrapper img { 
 
    display: inline-block; 
 
    width: 80%; 
 
    position: relative; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
} 
 

 
.bigTitle { 
 
    text-align: center; 
 
    margin-top: -0.5%; 
 
    margin-bottom: 5%; 
 
    color: #766F82; 
 
    font-family: "ValeraRound"; 
 
} 
 

 
.positives { 
 
    margin-top: 100px; 
 
} 
 

 
.positives .point { 
 
    width: 30%; 
 
    float: left; 
 
    margin-left: 3%; 
 
} 
 

 
.positives .point img { 
 
    width: 50%; 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
.btn-wrapper { 
 
    clear: both; 
 
    float: left; 
 
    width: 100%; 
 
    margin-top: 140px; 
 
    text-align: center; 
 
} 
 

 
.btn-wrapper .btn { 
 
    padding: 20px; 
 
    padding-right: 50px; 
 
    padding-left: 50px; 
 
    display: inline-block; 
 
    border-radius: 10px; 
 
    border: solid 1px #1D1846; 
 
    /*color: #746982;*/ 
 
    color: #FFFFFF; 
 
    font-style: italic; 
 
    font-size: 22px; 
 
} 
 

 
.btn-wrapper span { 
 
    display: block; 
 
    margin-top: 15px; 
 
    font-style: italic; 
 
    color: #746982; 
 
} 
 

 
.outer-space { 
 
    overflow: hidden; 
 
} 
 

 

 
/* 
 
.feedback { 
 
    clear: both; 
 
    float: left; 
 
    width: 1000%; 
 
    position: relative; 
 
    left: -500%; 
 
    margin-top: 0; 
 
    padding-bottom: 40px; 
 
} 
 
.feedback-wrapper { 
 
    position: relative; 
 
    width:100%; 
 
    max-width: 600px; 
 
    margin:0 auto; 
 
} 
 
.feedback:before, .feedback:after { 
 
    content:""; 
 
    position: absolute; 
 
    height:20%; 
 
    width:100vw; 
 
    background-color: #8904B1; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 
.feedback:before { 
 
    left:-100%; 
 
} 
 
.feedback:after { 
 
    right:-100%; 
 
} 
 
.feedback-wrapper span { 
 
    font-size: 22px; 
 
    font-family: "Droid Serif"; 
 
    font-style: italic; 
 
    color: #E3DBFF; 
 
    display: block; 
 
    margin-top: 20px; 
 
text-align: center; 
 
} 
 
*/ 
 

 
.feedback { 
 
    background-color: #8904B1; 
 
    margin: 0 auto; 
 
    color: #ffffff; 
 
    position: relative; 
 
    z-index: 2; 
 
    padding: 10px 0; 
 
    left:0 !important 
 
} 
 

 
.feedback-wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 600px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
} 
 

 
.feedback-wrapper:before, 
 
.feedback-wrapper:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100vw; 
 
    background-color: #8904B1; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 

 
.feedback-wrapper:before { 
 
    left: -100%; 
 
} 
 

 
.feedback-wrapper:after { 
 
    right: -100%; 
 
} 
 

 
.feedback span { 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 

 
/***Responsive***/ 
 

 
@media screen and (max-width: 801px) { 
 
    .bigTitle { 
 
    font-size: 120%; 
 
    } 
 
    .positives { 
 
    margin-top: 50px; 
 
    } 
 
    .positives .point { 
 
    float: none; 
 
    width: 60%; 
 
    max-width: 225px; 
 
    min-width: 180px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: 10%; 
 
    } 
 
    .btn-wrapper { 
 
    margin-top: 40px; 
 
    } 
 
    .feedback { 
 
    width: 112%; 
 
    left: -6%; 
 
    } 
 
    .feedback-wrapper { 
 
    width: 90%; 
 
    position: relative; 
 
    left: 50%; 
 
    top: 0; 
 
    transform: translate(-50%, 0); 
 
    } 
 
    .feedback-wrapper span { 
 
    font-size: 14px; 
 
    display: block; 
 
    font-size: 100%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/general.css"> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="shortcut icon" type="image/png" href="/images/favicon.png"> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
    <!-- include Google's AJAX API loader --> 
 
    <script src="http://www.google.com/jsapi"></script> 
 
    <!-- load JQuery and UI from Google (need to use UI to animate colors) --> 
 
    <script type="text/javascript"> 
 
     google.load("jqueryui", "1.5.2"); 
 

 
    </script> 
 

 
    <script src="/js/general.js"></script> 
 
    <link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/index.css"> 
 

 

 
    <title>NDVibes - Webdeveloper</title> 
 
    </head> 
 

 
    <body> 
 
    <div class="outer-space"> 
 
     <div class="wrapper"> 
 
     <div class="header"> 
 
      <div class="myNavbar-wrapper"> 
 
      <div class="myNavbar"> 
 
       <ul> 
 
       <li><a class=active href="/">Home</a></li> 
 
       <li><a href="/panel">Uw website</a></li> 
 
       <li><a href="/about">Over</a></li> 
 
       <li><a href="/portfolio">Portfolio</a></li> 
 
       <li><a href="/contact">Contact</a></li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="image-wrapper"> 
 
      <img src="/images/big_image.png" /> 
 
     </div> 
 

 
     <h1 class="bigTitle"> 
 
       Webdeveloper since 2017 
 
      </h1> 
 

 
     <div class="positives"> 
 
      <div class="point"> 
 
      <img src="/images/fast.png" /> 
 
      </div> 
 
      <div class="point"> 
 
      <img src="/images/responsive.png" /> 
 
      </div> 
 
      <div class="point"> 
 
      <img src="/images/secure.png" /> 
 
      </div> 
 
     </div> 
 

 
     <div class="btn-wrapper"> 
 
      <a href="/panel"> 
 
      <div class="btn colorChange purple"> 
 
       Geef mij die website! 
 
      </div> 
 
      </a> 
 
      <br> 
 
      <span> 
 
        Geen enkel probleem! klik gewoon op de knop en ik zal zo snel mogelijk reageren. 
 
       </span> 
 
     </div> 
 

 
     <div class="feedback-wrapper colorChange purple" id="test"> 
 
      <div class="feedback"> 
 
      <span>"Nooit zo een snelle service gehad"</span> 
 
      <span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span> 
 
      <span>"Eindelijk mijn online website gemoderniseerd"</span> 
 
      <span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span> 
 
      </div> 
 
     </div> 
 

 
     <div class="footer"> 
 
      Copyright &copy; 2017 - <span id="year">2017</span> Niel Duysters 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!---------------GOOGLE ANALYTICS-----------------> 
 
    <script> 
 
     (function(i, s, o, g, r, a, m) { 
 
     i['GoogleAnalyticsObject'] = r; 
 
     i[r] = i[r] || function() { 
 
      (i[r].q = i[r].q || []).push(arguments) 
 
     }, i[r].l = 1 * new Date(); 
 
     a = s.createElement(o), 
 
      m = s.getElementsByTagName(o)[0]; 
 
     a.async = 1; 
 
     a.src = g; 
 
     m.parentNode.insertBefore(a, m) 
 
     })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); 
 

 
     ga('create', 'UA-46774773-2', 'auto'); 
 
     ga('send', 'pageview'); 
 

 
    </script> 
 

 
    </body> 
 

 
</html>

Source

2017-06-12 07:24:19 Hash

C'est vraiment très proche, mais mon texte est parti: https://jsfiddle.net/v0x6g29c/1/ –

@O « Niel il édité :) – Hash

div divisée en grande ne peut pas le rendre plus petit

Répondre

Questions connexes