Darstellungsprobleme mit Div

sudteam

hallo leute

bin das erste mal hier weil ich hilfe benötige

mein problem, ich habe eine schlichte html seite alles noch neu und daher leer also somit auch ohne fehler, bis auf eine sache,
ich habe mir über google vier div´s rausgesucht und wollte die bei mir in einen div container packen.
naja drinn ist der code ja aber irgendwie zerreisst es mir dadurch den zweiten content div was ich ja eigentlich als "wrapper" für die vier kleineren div´s nutze.

ich hoffe ich habe mein problem ordentlich beschrieben und wäre froh wenn mir da jemand bei helfen könnte.

ich gebe mal noch die html bzw css codes mit

mfg sudteam

HTML

<!DOCTYPE html><html><head><title>CSS Portal - Layout</title><!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body>    <div id="wrapper">        <div id="headerwrap">        <div id="header">            <p>This is the Header</p>        </div>       </div>     <div id="navigationwrap">     <div id="navigation">            <p>This is the Menu</p>        </div>       </div>     <div id="contentwrap">     <div id="content">          <p> This is the Content 1 </p><hr />       </div>     <div id="content2">     <p> This is the Content 2 </p>          <div class="abox">          <p>ILorem ipsum dolor sit amet, consectetur adipiscing elit.Donec dictum semper felis, ac fringilla turpis tristique non. </p><div class="button"><a href="#">Read More</a>          </div>        </div>            <div class="abox">          <p>ILorem ipsum dolor sit amet, consectetur adipiscing elit.Donec dictum semper felis, ac fringilla turpis tristique non. </p><div class="button"><a href="#">Read More</a>        </div>      </div>          <div class="abox">        <p>ILorem ipsum dolor sit amet, consectetur adipiscing elit.Donec dictum semper felis, ac fringilla turpis tristique non. </p><div class="button"><a href="#">Read More</a></div>      </div>        <div class="abox">        <p>ILorem ipsum dolor sit amet, consectetur adipiscing elit.Donec dictum semper felis, ac fringilla turpis tristique non. </p><div class="button"><a href="#">Read More</a>      </div>    </div>       </div>     <div id="footerwrap">     <div id="footer">            <p>This is the Footer</p>          <!--  <a class="tooltips" href="#">CSS Tooltips<span>Tooltip</span></a>-->        </div>       </div>      </div>     </div></body></html>

CSS

Code

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {     margin:0;
    padding:0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #333
}




p {
    padding: 10px;
}




#wrapper {
    margin: 0 auto;
    width: 1000px;
}
#headerwrap {
    width: 1000px;
    float: left;
}




#header {
    height: 200px;
    background-image: url(../images/header.png);
    clear: both;
}




#navigationwrap {
    width: 1000px;
    float: left;
    margin: 0px auto;
}




#navigation {
    width: 998px;
    height: 50px;
    background: #FFCC33;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #ebb81f;
    clear: both;
}




#contentwrap {
    width: 1000px;
    float: left;
    margin: 10px auto;
}




#content {
    width: 979px;
    background: #FFFFFF;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    border-bottom: 0px solid #ebebeb;
    padding: 10px;
    clear: both;
}




#content2 {
    width: 979px;
    background: #FFFFFF;
    border-top: 0px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    padding: 10px;
    clear: both;
}




/* Beginn 4 Div´s */




.abox {
    float: left;
    width: 180px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: left;
    margin-top: 30px;
    margin-left: 20px;
    text-shadow: -1px 1px #C0C0C0;
    background-image: url(../images/abox_sep.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 20px;
    background-attachment: scroll;
    background-color: #F4F4F4;
    padding-left: 10px;
    padding-top: 10px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 0px 2px #000000;
    -webkit-box-shadow:0px 0px 2px #000000;
    box-shadow:0px 0px 2px #000000;
    padding-bottom: 5px;
}




/* Ende 4 Div´s */












#footerwrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
    clear: both;
}




#footer {
    width: 1000px;
    height: 40px;
    background: #33FF66;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border: 1px solid #1feb52;
    margin: 0px;
}




/* Beginn ToolTips */




a.tooltips {
    position: relative;
    display: inline;
}




a.tooltips span {
    position: absolute;
    width: 140px;
    color: #FFFFFF;
    background: #000000;
    height: 12px;
    line-height: 12px;
    text-align: center;
    visibility: hidden;
    border-radius: 8px;
}




a.tooltips span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}




a:hover.tooltips span {
    visibility: visible;
    opacity: 0.8;
    bottom: 30px;
    left: 50%;
    margin-left: -76px;
    z-index: 999;
}




/* Ende ToolTips */

Alles anzeigen

MrMurphy

Hallo

Zitat

aber irgendwie zerreisst es mir dadurch den zweiten content div

Das ist keine Problembeschreibung mit der wir etwas anfangen können.

Dass die Webseite nicht wie von dir gewünscht angezeigt wird ist klar. Aber nicht was du erreichen willst.

Zitat

somit auch ohne fehler

Das stimmt leider nicht. Wenn du eine fehlerfreie HTML5-Webseite erstellen möchtest musst du auch die HTML5-Regel einhalten. Dazu gehört zum Beispiel div-Elemente nur noch zu verwenden, wenn es keine geeigneteren gibt.

Oder auf unnötige Container / Elemente zu verzichten.

Technisch kannst du zwar deine Divitis beibehalten, sachlich handelt es sich aber um Fehler.

Ich vermute dass du float verwendest ohne die Grundlagen dafür gelernt zu haben. Zum Beispiel, das gefloatete Elemente aus dem Dokumentfluss genommen werden.

Zudem war float nur eine Notlösung. Aktuell und langfristig sollte zum Layout besser Flexbox verwendet werden, das im Gegensatz zu float direkt zum Layouten entwickelt wurde.

Gruss

MrMurphy

sudteam

ok ja das stimmt was du da schreibst also wo das hier steht "This is the Content 2" sollten in eigentlich auch die vier kleineren divs mit drin sein und das ganze wie du sagst zentriert und auch so das ber border von content2 um die vier divs geht.
center sollten dann aber nur die vier kleineren divs sein und nicht der text darüber.

hoffe das hilft weiter

MrMurphy

Hallo

Die Ursache des Problems ist wie von mir vermutet die Tatsache, dass float Elemente aus dem Dokumentenfluss nimmt.

Mal ein paar Infos dazu:

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

und

http://www.thestyleworks.de/basics/float-rule.shtml

und

http://little-boxes.de/lb1/IV-css-positionierung.html

Insgesamt empfehle ich dir aber Flexbox zu verwenden.

Gruss

MrMurphy

sudteam

mit dem komme ich leider nicht klar aber danke dir

MrMurphy

Hallo

Ich habe trotzdem mal ein Beispiel erstellt, zumal auch andere User deinen Beitrag lesen werden.

Flexbox hilft zudem bei vielen Problemen, für die es bisher keine sinnvolle Lösungen gab. Zum Beispiel dass die Container einer Zeile immer gleich hoch sind, egal wieviel Text sie enthalten. Oder dass in diesem Beispiel die Links "Weiterlesen" sich immer am unteren Rand des Containers befinden, egal wieviel Leerraum darüber ist.

Zunächst einmal der HTML-Quelltext mit deutlich weniger Containern, passenden HTML5-Elementen und damit einer viel größeren Übersicht und Wartbarkeit::

Code

<header class="hauptheader">
      <h2>header</h2>
   </header>
   <nav class="hauptnav">
      <h2>Navigation</h2>
   </nav>
   <main class="main">
      <aside class="mainaside">
         <h2>aside</h2>
      </aside>
      <article class="mainarticle">
         <h2>Ali Sprüche</h2>
         <section class="card">
            <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Die Menschen begreifen nicht, was sie hatten, bis es weg ist. Wie Präsident Kennedy, es gab niemanden wie ihn. Wie die Beatles, es wird nie wieder etwas wie sie geben. Wie mein Elvis Presley. Ich war der Elvis des Boxens.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
            <a href="#">Weiterlesen</a>
         </section>
      </article>
   </main>
   <footer class="hauptfooter">
      <p>Originaldiskussion: <a href="http://www.forum-hilfe.de/threads/57995-Darstellungsprobleme-mit-Div">http://www.forum-hilfe.de/</a></p>
   </footer>

Alles anzeigen

Jetzt die entscheidenden CSS-Angaben für die Seite, wobei die Flexbox-Angaben nur einen geringen Teil einnehmen und der Rest auch bei anderen Lösungen erforderlich ist:

Code

/*Grundlayout*/
   @media all {
      body {
      }
      body>* {
         max-width: 1000px;
         margin: 0 auto;
      }
   }


   /*.hauptheader*/
   @media all {
      .hauptheader {
         /*background-color: gold;*/
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid transparent;
      }
      .hauptheader {
      }
   }


   /*.hauptnav*/
   @media all {
      .hauptnav {
         background-color: #FC3;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid #EBB81F;
      }
      .hauptnav {
      }
   }


   /*.main*/
   @media all {
      .main {
         /*background-color: gold;*/
         max-width: calc(1000px + 0.5rem);
         border: 1px solid #EBEBEB;
         border-radius: 0.4rem;
         margin: 0.5rem auto 0 auto;
      }
      .main {
      }
   }


   /*.mainaside*/
   @media all {
      .mainaside {
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-bottom: 2px solid gray;
         margin: 0;
      }
      .mainaside {
      }
   }


   /*.mainarticle*/
   @media all {
      .mainarticle {
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         margin: 0;
         display: flex;
         flex-wrap: wrap;
      }
      .mainarticle h2 {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0.5rem - 2px - 0.5rem);
      }
      .mainarticle .card {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0.5rem - 2px - 0.5rem);
      }
      .mainarticle {
      }
   }
   @media only screen and (min-width: 600px) {
      .mainarticle .card {
         flex-basis: calc(50% - 0.5rem - 2px - 0.5rem);
      }
   }
   @media only screen and (min-width: 1000px) {
      .mainarticle .card {
         flex-basis: calc(25% - 0.5rem - 2px - 0.5rem);
      }
   }


   /*.card*/
   @media all {
      .card {
         background-color: #F4F4F4;
         box-shadow: 0 0 2px #000;
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid gray;
         border-radius: 0.4rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
         display: flex;
         flex-direction: column;
      }
      .card p {
         margin: 0.5rem 0.25rem auto 0.25rem;
      }
      .card a {
         text-align: center;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      .card {
      }
   }


   /*.hauptfooter*/
   @media all {
      .hauptfooter {
         background-color: #3F6;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid #1FEB52;
         margin: 0.5rem auto 0 auto;
      }
   }

Alles anzeigen

Und der komplette Quelltext zum direkten Erstellen einer Datei:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layoutproblem 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>


   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);


   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';


   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import 'https://fonts.googleapis.com/css?family=Roboto';


   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);


   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-top: 0.01px solid transparent;
         margin: 0;
      }
   }


   /*Schriften 01*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
      figcaption {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }


   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0;
      }
      img {
         /*text-align: bottom;*/
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }


   /*Grundlayout*/
   @media all {
      body {
      }
      body>* {
         max-width: 1000px;
         margin: 0 auto;
      }
   }


   /*.hauptheader*/
   @media all {
      .hauptheader {
         /*background-color: gold;*/
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid transparent;
      }
      .hauptheader {
      }
   }


   /*.hauptnav*/
   @media all {
      .hauptnav {
         background-color: #FC3;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid #EBB81F;
      }
      .hauptnav {
      }
   }


   /*.main*/
   @media all {
      .main {
         /*background-color: gold;*/
         max-width: calc(1000px + 0.5rem);
         border: 1px solid #EBEBEB;
         border-radius: 0.4rem;
         margin: 0.5rem auto 0 auto;
      }
      .main {
      }
   }


   /*.mainaside*/
   @media all {
      .mainaside {
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-bottom: 2px solid gray;
         margin: 0;
      }
      .mainaside {
      }
   }


   /*.mainarticle*/
   @media all {
      .mainarticle {
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         margin: 0;
         display: flex;
         flex-wrap: wrap;
      }
      .mainarticle h2 {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0.5rem - 2px - 0.5rem);
      }
      .mainarticle .card {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0.5rem - 2px - 0.5rem);
      }
      .mainarticle {
      }
   }
   @media only screen and (min-width: 600px) {
      .mainarticle .card {
         flex-basis: calc(50% - 0.5rem - 2px - 0.5rem);
      }
   }
   @media only screen and (min-width: 1000px) {
      .mainarticle .card {
         flex-basis: calc(25% - 0.5rem - 2px - 0.5rem);
      }
   }


   /*.card*/
   @media all {
      .card {
         background-color: #F4F4F4;
         box-shadow: 0 0 2px #000;
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid gray;
         border-radius: 0.4rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
         display: flex;
         flex-direction: column;
      }
      .card p {
         margin: 0.5rem 0.25rem auto 0.25rem;
      }
      .card a {
         text-align: center;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      .card {
      }
   }


   /*.hauptfooter*/
   @media all {
      .hauptfooter {
         background-color: #3F6;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid #1FEB52;
         margin: 0.5rem auto 0 auto;
      }
      .hauptfooter {
      }
   }


   /*Spezielle Einstellungen*/
   @media all {
   }


   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }


   </style>
</head>
<body>
   <header class="hauptheader">
      <h2>header</h2>
   </header>
   <nav class="hauptnav">
      <h2>Navigation</h2>
   </nav>
   <main class="main">
      <aside class="mainaside">
         <h2>aside</h2>
      </aside>
      <article class="mainarticle">
         <h2>Ali Sprüche</h2>
         <section class="card">
            <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Die Menschen begreifen nicht, was sie hatten, bis es weg ist. Wie Präsident Kennedy, es gab niemanden wie ihn. Wie die Beatles, es wird nie wieder etwas wie sie geben. Wie mein Elvis Presley. Ich war der Elvis des Boxens.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
            <a href="#">Weiterlesen</a>
         </section>
      </article>
   </main>
   <footer class="hauptfooter">
      <p>Originaldiskussion: <a href="http://www.forum-hilfe.de/threads/57995-Darstellungsprobleme-mit-Div">http://www.forum-hilfe.de/</a></p>
   </footer>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

sudteam

da kann ich nur sagen hut ab und mich natürlich auch für eine solche vorlage von dir bedanken.

sudteam

ich hätte da noch eine frage zu deinem layout, und zwar kann ich die 4 container auch dynamisch von der höhenangabe machen und dennoch den "weiterlesen link immer unten behalten?
weil wenn ich zb. li in die boxen einfüge rutscht alles aus der box auserhalb unter die box.

ich sag schon mal danke für die mühe und hilfe

ps ich hab mich mal bissel durchgegooglet aber iwi sehe ich mit dem flx-zeug noch nicht so durch.

MrMurphy

Hallo

Ich kann dein Problem nicht nachvollziehen.

Zitat

zwar kann ich die 4 container auch dynamisch von der höhenangabe machen und dennoch den "weiterlesen link immer unten behalten

Das Verhalten haben die Container doch.

Alle Container einer Reihe sind immer gleich groß und der Weiterlesen-Link ist immer ganz unten.

Zitat

weil wenn ich zb. li in die boxen einfüge rutscht alles aus der box auserhalb unter die box

Das kann nicht sein. Inhalt kann nur aus der Box rutschen wenn du den HTML-Quelltext sachlich falsch erstellst oder CSS-Anweisungen verwendest, die den Dokumentenfluß zerreißen.

Ohne Link zu deiner Seite kann ich dir leider nicht konkret helfen.

Gruss

MrMurphy

sudteam

hey Mr.

ich habe dir das ganze mal online gestellt da ich die ganze zeit nur local arbeite.
http://local.php-designs.de/flex/

ich weiss nicht was ich da falsch mache

gruss sud

MrMurphy

Hallo

An Hand deines Beispiels sind die von dir beschriebenen Probleme nicht direkt nachzuvollziehen.

Das

Zitat

li in die boxen einfüge rutscht alles aus der box auserhalb unter die box.

verstehe ich immer noch nicht.

Hierzu

Zitat

dennoch den "weiterlesen link immer unten behalten

habe ich eine Vermutung. Ich habe die Möglichkeit den Weiterlesen-Links (oder auch anderen Inhalt) unten in Containern anzuordnen eigentlich nur hinzugefügt um eine der vielen Möglichkeiten von Flexbox zu zeigen, danach hattest du aber überhaupt nicht gefragt.

Praxisgerecht kannst du zum Beispiel folgenden HTML-Quelltext als Grundlage für die Cards verwenden:

Code

<section class="card">
            <div>
               ...
            </div>
            <div>
               ...
            </div>
         </section>

An Stelle der Punkte kommt dann der Inhalt. Also zum Beispiel

Code

<section class="card">
            <div>
               <h2>SHOUTCAST STREAM<br>TESTER 5 SLOTS</h2>
               <ul>
                  <li>5 Listener</li>
                  <li>gute Server Verwaltung</li>
                  <li>Sendeformate in MP3 und AAC+</li>
                  <li>Paket Wechsel möglich</li>
                  <li>Ideal als Testsream</li>
               </ul>     
            </div>
            <div>
               <a href="#">Weiterlesen</a>
            </div>
         </section>

Alles anzeigen

Du musst also alle (in diesem Fall vier) .card-Container so aufbauen.

Sofern die Höhe mehr Platz bietet als der Inhalt steht das erste div oben und das zweite div möglichst weit unten.

Dazu musst du noch das CSS

Code

.card p {
         margin: 0.5rem 0.25rem auto 0.25rem;
      }
      .card a {
         text-align: center;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }

ersetzen durch

Code

.card>div:nth-child(1) {
         margin: 0 0 auto 0;
      }
      .card>div:nth-child(1) p {
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      .card>div:nth-child(2)  {
         margin: 0 0 0 0;
      }
      .card>div:nth-child(2) a {
         display: block;
         text-align: center;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }

Alles anzeigen

Zur Erläuterung:

Durch

Code

.card {
         ...
         display: flex;
         flex-direction: column;
      }

wird .card zu einem Flex-Container und die direkten Kind-Elemente (und nur die) zu Flex-Items. Das sind in diesem Fall jeweils die beiden div-Elemente.

Durch flex-direction: column stehen sie übereinander, ähnlich wie Block-Elemente. Soweit noch nichts besonderes.

Durch

Code

.card>div:nth-child(1) {
         margin: 0 0 auto 0;
      }

wird dem jeweils ersten div ein unterer margin mit dem Wert auto zugewiesen. Sofern Leerraum zur Verfügung steht werden dadurch alle nachfolgenden Container so weit wie möglich nach unten gedrückt.

Wichtig ist in diesem Zusammenhang der Selektor

Code

statt des üblichen Leerzeichens. Dadurch wird auch dem CSS mitgeteilt, das nur für direkte Kinder-div von .card die dort bestimmten CSS-Anweisungen gelten sollen. Das mit :nth-child(1) das erste div-Element und mit :nht-child(2) das zweite angesprochen werden erklärt sich für den Anfang von selbst.

Gruss

MrMurphy

sudteam

ok ich hab das im css mal ersetzt aber nun sind nur die weiterlesen links nach oben gerutscht aber nicht der eigentliche inhalt der ja immer noch unter der box steht
wenn ich nur schon mal den inhalt wieder in der box habe würde mir das schon reichen.
gruss sud

sudteam

lach entschuldige bitte aber ich habe echt nur das css geändert das hrml voll vergessen naja wie sagt man so schön "wer lesen kann ist klar im vorteil" oder bettrift natürlich mich werde es noch mal versuchen diesmal mit html.

gruss sud

Darstellungsprobleme mit Div

Tags

Benutzer online in diesem Thema