• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Box verschieben CSS

2

2fersen

Neues Mitglied
Hey Leute,

ich tüftel die ganze Zeit schon daran, wie ich die untere graue Box direkt unter die andere graue Box positionieren kann. Ist womöglich jemand so nett der mir dies bezüglich schnell helfen könnte?

HTML: 
<!DOCTYPE HTML>
    <html>

    <head>
      <link href='https://fonts.googleapis.com/css?family=Poiret+One|Varela+Round' rel='stylesheet' type='text/css'>
      <meta charset="utf-8">
      <link rel="stylesheet" href="meinestyles.css">
      <style>
 #mywrapper main * {
        margin: 0;
        padding: 0;
      }
 #mywrapper main , header , footer { width:100%; margin:0px  auto; padding:10px; font-family: 'Poiret One'; line-height:20px;  letter-spacing:1px; box-sizing:border-box;}     
      #mywrapper main,
      header,
      footer {
        margin: 0px auto;
        padding: 10px;
        font-family: 'Varela Round';
        line-height: 20px;
        letter-spacing: 1px;
        box-sizing: border-box;
      }   
      
      #mywrapper main {
        background:white;
      }
      
      #mywrapper header {
        background:white;
        color: Black;
        padding: 1em;

        font-weight: bold;
        text-align: center;
        border:0px solid grey;
      }
        
      #mywrapper section {
        padding: 10px 0;
        text-align: center;
      }
  
      #mywrapper article {
        text-align: center;
        background: lightgrey;
        padding: 2px;
        margin-right: 10px;
        width:50%;
        font-weight: 300;
      }
      
      #mywrapper article h1 {
        font-size: 2vw;
        border: 1px solid grey;
        
      }
      

      #mywrapper article a {
        color: #8B4513;
        font-weight: bold;
      }
      
      #mywrapper .descripe h3 {
        padding: 10px;
        font-weight: bold;
        font-size: 1.2em;
      }
      
      #mywrapper h3 {
        padding: 10px;
        font-weight: bold;
        font-size: 1.8em;
        line-height: 2.0;
      }
      
      #mywrapper p {
        padding: 10px;
      }
      
      #mywrapper footer{
        padding: 10px;
        background: transparent;
        text-align: right;
        color: black;}
      
      #mywrapper footer a {
        color: brown;
      }
 
      
      #mywrapper caption {
        background:lightgrey;
        color: #fff;
        padding: 5px;
        text-align: left;
      }
       #mywrapper h1 {
        background:orange;
        padding: 15px;
        font-family: 'Poiret One';
      }     
      #mywrapper .gal {
        margin: 5px 0;
        border-top: 2px solid #eee;
        border-bottom: 2px solid lightgrey;
      }
      
      #mywrapper .gal ul {
        display: flex;
      }
      
      #mywrapper .gal li {
        width: 30%;
        margin: 1px;
    
        display: flex;
        align-items: center;
      }
      
      #mywrapper .gal a {
        display: block;
        padding: 2px;
        outline: none;
      }
      
      #mywrapper .flex {
        display: flex;
        width:100%;
      }
      
      #mywrapper .descripe {
        padding: 1em;
        text-align: left;
        
       width:100%;
      }
      
      #mywrapper .info {
        background:lightgrey;
        font-weight: bold;
        color: #fff;
        display: flex;
        align-items: center;
        font-family: sans serif;
      }
      
      #mywrapper .col-66 {
        width: 50%;
        height: 30%;
          
      }
      
      #mywrapper .col-34 {
        width: 49%;
      }
      
          #mywrapper .col-38 {
        list-style : none;
        width: 49%;
        font-weight: 900;
        font-family: 'Poiret One';
      }
      
       #mywrapper #ausen2,
       #mywrapper #ausen5{
        background:orange;
      }
      
      #mywrapper .fa {
        color: black;
      }
      
      #mywrapper .weiss {
        color: #fff;
      }
      
      #mywrapper .none {
        display: none;
      }
      
  @media (max-width: 800px) {
        #mywrapper main,
        #mywrapper header,
        #mywrapper footer,
        section {
          /*width: 100px;*/
        }
        #mywrapper .flex,
        #mywrapper .info,
        #mywrapper .col-66,
        #mywrapper .col-34,
        .gal ul,
        .gal li {
        
          flex-direction: column;
          margin: 5px 0;
          border: none;
          box-sizing: border-box;
        }
      }
      
 
      
      .gal li {
        width: 20%;
      }
 
      li img {
        width: 100%;
        border: 0px solid lightgrey;
      }
 
      
      #mywrapper .flex .col-33 {
        background:lightgrey;
         background:none;
    
      }
      
       #mywrapper .flex .col-38 {
        background:lightgrey;
      }
      
    
      * {

        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        box-sizing: border-box;
      }
      
      body {
 
        padding: 10px;
        float: left;
        background:white;
      }
      

      #gal {
        float: left;
        height: auto;
        overflow: hidden;
width:105%;
      }
      
      #gal #ausgabe {
  
        width: 500%;
        float: left;
        position: relative;
        left: 0;
    
        -moz-transition: 1s;
        -o-transition: 1s;
        -webkit-transition: 1s;
      }

        #gal a {
        position: relative;
        float: left;
        width: 20%;
 
      }
      
      #gal img {
        float: left;
        width: 100%;
      }
      
      #ausgabe img {
        width: 20%;
        float: left;
      }
      
      #gal a img {
        padding: 0 0 1px 1px;

      }
      
      #gal a:focus:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 1px;
        bottom: 1px;
            background: rgba(255, 255, 255, .3);
 
      }
      
      #gal a:focus ~ #ausgabe {
        left: -0%;
      }
      
      #gal a + a:focus ~ #ausgabe {
        left: -100%;
      }
      
      #gal a + a + a:focus ~ #ausgabe {
        left: -200%;
      }
      
      #gal a + a + a + a:focus ~ #ausgabe {
        left: -300%
      }

      #gal a + a + a + a +a:focus ~ #ausgabe {
        left: -400%
      }

 #Zahlungsarten{
    position:relative;
    top: 10%;
    left: 20%;
}

  #Punkte{
    position:relative;
  top: 120px;
}         
 

#mywrapper #ausen1{
font-size: 15px;
text-align: left;
line-height: 2.0;
padding-left: 10px;
}       
    </style>
    </head>

    <body>
      <div id="mywrapper">
        <header>
          <h1>Ausgefallene 3D Raddiergummis</h1></header>
        <main>
          <section class="flex">
            <article class="descripe col-66 ">
              <h3><h2 style="text-align: center;">TEST</h2></h3>
                <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                
            </article>
              
              

            <article class="col-33 info">
            <div>
                <div id="gal">
                  <a tabindex="0" href="#a2"><img src="https://www1.xup.in/exec/ximg.php?fid=43556290" alt="bild1" /> </a>
                  <a tabindex="0" href="#a2"><img src="https://www1.xup.in/exec/ximg.php?fid=43556290" alt="bild2" /> </a>
                  <a tabindex="0" href="#a3"><img src="https://www1.xup.in/exec/ximg.php?fid=96224303" alt="bild3" /> </a>
                  <a tabindex="0" href="#a4"><img src="https://www1.xup.in/exec/ximg.php?fid=98391488 " alt="bild4" /> </a>
                  <a tabindex="0" href="#a5"><img src="https://www1.xup.in/exec/ximg.php?fid=43556290" alt="bild5" /> </a>

                  <div id="ausgabe">
                    <img src="https://www1.xup.in/exec/ximg.php?fid=43556290" alt="bild1" />
                    <img src="https://www1.xup.in/exec/ximg.php?fid=98391488" alt="bild2" />
                    <img src="https://www1.xup.in/exec/ximg.php?fid=43556290" alt="bild3" />
                    <img src="https://www1.xup.in/exec/ximg.php?fid=98391488" alt="bild4" />
                    <img src="https://www1.xup.in/exec/ximg.php?fid=43556290" alt="bild5" />
                  </div>
                </div>


              </div>
            </article>
              
          </section>
            <article class="descripe col-66 ">
              <h3><h2 style="text-align: center;">TEST</h2></h3>
<ul style="list-style-position: inside;">

<p>guten Abend</p>
        <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                    <p>asd</p>
                <p>asd</p>
                
            </article>
        </main>
      </div>
    </body>

    </html>


Freue mich auf eure Antworten
 
Werbung:
CSS: 
#mywrapper section {
    padding: 10px 0;
    text-align: center;
}
Wie du siehst, hast du 10px padding oben und unten.
Pass es einfach an.
 
Danke für die Antwort, wenn ich den Padding Wert verändere, ändert sich nicht sonderlich viel.

Ich hatte die Frage auch falsch formuliert, ich will die zweite graue Box unter der anderen Box neben der Gallerie haben. Das wäre toll

Freue mich auf eure Antworten.
 
Werbung:
Du hast ja Flexboxen in deinem CSS-Code bereits verwendet. Dann verwende sie doch auch nochmal!
Ich glaube, das hier sollte als instanz reichen:
http://jsfiddle.net/Aaron3219/pLo60can/4/

Ein kleiner Tipp:
Verzichte, wenn möglich, bitte auf float.
Es gibt nur eine Hand voll Situationen, wo float tatsächlich angebracht ist.
Viele Leute benutzen es aber noch, um Elemente nebeneinander auszurichten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben