1. Zuhause
  2. Frage und Antwort
  3. Zentriert div zu groß kann es nicht kleiner machen

Zentriert div zu groß kann es nicht kleiner machen

2017-06-12 7 views
0

Ich versuche, eine div-Breite zu machen, die in einem kleineren Wrapper ist. Es ist eine Erweiterung auf dieser question:Zentriert div zu groß kann es nicht kleiner machen

Das Problem ist, dass mein div ist jetzt zu groß. Die Höhe ist zu hoch und ich kann keinen Weg finden, es zu ändern. website: http://ndvibes.com ist es der lila auf der unterseite.

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>

hier ein JSFiddle der vollständigen Webseite, weil das Problem nicht auftritt, in dem Stackoverflow Code-Schnipsel: https://jsfiddle.net/v0x6g29c/

Quelle

2017-06-12 O' Niel

+0

Was genau ist Ihre Frage hier? Was versuchst du zu erreichen? – Nick

+0

@Nick Klicken Sie auf den JSFiddle, wenn Sie den Code unten ausführen, sehen Sie ein lila/rosa div, das zu hoch ist. Wie kann ich es in der Höhe kleiner machen, also ist es gerade hoch genug für den Text (und ein bisschen Polsterung)? Bild: http://i.imgur.com/lo54OtP.png –

+0

https://jsfiddle.net/vsrmjwkr/ sowas? einfach Höhe hinzufügen: Auto zu .feedback – Nick

Antwort

1

Dies sollte funktionieren:

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/

Quelle

2017-06-12 07:43:47 Nick

+0

Du bist ein Held !!!!!!!!!!! –

+0

Etwas zu beachten: aus irgendeinem Grund, auch wenn links: -500% wurde auskommentiert, der Browser war immer noch auf das Element anwenden. Ich habe es auf Geige mit wichtig gemacht, aber überprüfen Sie in Ihrem speziellen Fall. Wichtig könnte nicht notwendig sein.Wie auch immer, froh, dass es jetzt funktioniert;) – Nick

+0

Danke! Aber wenn du dich nicht darum kümmerst, würdest du mir auch einen Tipp geben, wie ich das Div etwas tiefer legen kann? http://i.imgur.com/undefined.png –

1

prüfen diese und lassen Ich weiß es.

.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>

Quelle

2017-06-12 07:24:19 Hash

+0

Das ist wirklich sehr nahe, aber mein Text ist weg: https://jsfiddle.net/v0x6g29c/1/ –

+0

@O 'Niel hat es bearbeitet :) – Hash

Verwandte Themen

 Verwandte Themen