1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

anordnung divs

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von ro ci, 15 April 2018 um 22:11 Uhr.

  1. ro ci

    ro ci Neues Mitglied

    Registriert seit:
    31 März 2018
    Beiträge:
    6
    Punkte für Erfolge:
    1
    Hi,

    ich habe eine html/CSS struktur wie siehe unten. Mein Problem sind die div elemente intro und moreintro.

    beide stehen nebeneinander (float). Meine Fragen sind:

    a) die rechte Box moreintro soll zentriert sein relativ zur Box intro. Die Box intro ist nämlich an sich viel größer. wie schaffe ich das ohne mit margins zu arbeiten? wenn ich eine margin top einfüge in box .moreintro dann verschiebt sie sich leider komplett in die nächste zeile.

    danke!

    CSS:
    .borderwelcome {

    border-top: 3px solid #8FBC8F;
    border-bottom: 3px solid #8FBC8F;
    border-left: 3px solid #8FBC8F;
    border-right: 3px solid #8FBC8F;
    }
    .intro {
    width: 50%;
    float: left;
    box-sizing: border-box;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;

    }

    .moreintro {border-top: 2px dashed #8FBC8F;
    font-size: 100%;
    font-weight: bold;

    float: left;
    box-sizing: border-box;
    background-color: #E2A9F3;
    height: auto;
    position: center;
    width: 50%;
    }
    HTML:
    <div class="container">
    <header>
    <div class="main-title">
    <p>Welcome t</p>
    </div>
    <div class="navigation">
    <nav class="navigation">
    <ul class="group">
    <li> <a href="studies.html"> <strong>Studies</strong> </a></li>
    <li>
    <a href="favorite places.html"> <strong>Favorite places</strong></a>
    </li>
    <li>
    <a href="form example.html"> <strong>Forms</strong></a>
    </li>
    <li>
    <a href="tables.html"> <strong>Tables</strong></a>
    </li>
    </ul>
    </nav>
    </div>
    </header>

    <div class="borderwelcome group">

    <div class="intro">
    <h1>This is me</h1>
    <p class="nebenabschnitt">....</p>
    <div class="navigationwelcome">
    <ul>
    <li> ...click here:
    <a href="studies.html"> <strong>Studies </strong> </a></li>
    <li> ... click here:
    <a href="favorite places.html"> <strong>Favorite places</strong> </a>
    </li>
    </ul>
    </div>
    </div>

    <div class="moreintro">
    <h1>
    ...Click <a href="Motivation(HTML).html"> here </a> for motivation.
    </h1>
    </div>

    <div class="general">
    <p> ... </p>

    <h1>Learning to ...</h1>

    <p>
    ...
    </p>



    </p>

    </div>
    </div>
    <footer>
    <p> Copyright 2018 Rocio Gonzalez Palomo </p>
    </footer>

    </div>
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Sailor

    Sailor Aktives Mitglied

    Registriert seit:
    14 Juli 2017
    Beiträge:
    239
    Punkte für Erfolge:
    28
    Das solltest du mit Flex-Box hinbekommen...
    https://www.w3schools.com/css/css3_flexbox.asp
    Dazu musst da aber wohl deine Struktur etwas anpassen...
    <div class="flex-container">
    <div class="intro">
    dein Inhalt
    </div>
    <div class="moreintro">
    dein Inhalt
    </div>
    </div>

    und im CSS dem
    .flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    }

    Vielleicht musst du das CSS noch etwas anpassen - sollte aber aus dem Link ersichtlich sein, was da geht!
     
  3. Sailor

    Sailor Aktives Mitglied

    Registriert seit:
    14 Juli 2017
    Beiträge:
    239
    Punkte für Erfolge:
    28
    Habe mal deinen Code entsprechend ergänzt / geändert:
    HTML:
    1. <!DOCTYPE html>
    2.  
    3. .borderwelcome {
    4.    border: 3px solid #8FBC8F;    /* reicht so, muss nicht 4mal gemact werden */
    5. }
    6. .flexcontainer {                 /* das ist neu */
    7.    display: flex;
    8.    justify-content: center;
    9.    align-items: center;
    10. }
    11. .intro {
    12.    width: 50%;
    13. /*   float: left;*/             /* das muss weg */
    14.    box-sizing: border-box;
    15.    height: auto;
    16.    padding-left: 5px;
    17.    padding-right: 5px;
    18. }
    19. .moreintro {
    20.    border-top: 2px dashed #8FBC8F;
    21.    font-size: 100%;
    22.    font-weight: bold;
    23. /*   float: left;*/             /* das muss weg */
    24.    box-sizing: border-box;
    25.    background-color: #E2A9F3;
    26.    height: auto;
    27. /*   position: center;*/        /* das ist sowieso falsch und muss weg */
    28.    width: 50%;
    29. }
    30. </head>
    31.  
    32.  
    33. <div class="container">
    34.   <header>
    35.     <div class="main-title">
    36.       <p>Welcome t</p>
    37.     </div>
    38.     <div class="navigation">
    39.       <nav class="navigation">
    40.         <ul class="group">
    41.           <li><a href="studies.html"> <strong>Studies</strong> </a></li>
    42.           <li><a href="favorite places.html"> <strong>Favorite places</strong></a></li>
    43.           <li><a href="form example.html"> <strong>Forms</strong></a></li>
    44.           <li><a href="tables.html"> <strong>Tables</strong></a></li>
    45.         </ul>
    46.       </nav>
    47.     </div>
    48.   </header>
    49.  
    50. <div class="borderwelcome group">
    51.  
    52. <div class="flexcontainer">   <!-- Hier beginnt der Flex-Bereich -->
    53.  
    54.   <div class="intro">         <!-- das linke Element im Flex-Bereich -->
    55.     <h1>This is me</h1>
    56.     <p class="nebenabschnitt">....</p>
    57.     <div class="navigationwelcome">
    58.       <ul>
    59.         <li> ...click here:<a href="studies.html"> <strong>Studies </strong> </a></li>
    60.         <li> ... click here:<a href="favorite places.html"> <strong>Favorite places</strong> </a></li>
    61.       </ul>
    62.     </div>
    63.   </div>                       <!-- Ende linker Container im Flex-Bereich -->
    64.  
    65.   <div class="moreintro">      <!-- das rechte Element im Flex-Bereich -->
    66.     <h1>...Click <a href="Motivation(HTML).html"> here </a> for motivation.</h1>
    67.   </div>                      <!-- Ende rechter Container im Flex-Bereich -->
    68.  
    69. </div>                        <!-- Ende Flex-Bereich -->
    70.  
    71.  
    72.   <div class="general">
    73.     <p> ... </p>
    74.  
    75.     <h1>Learning to ...</h1>
    76.  
    77.     <p>...</p>
    78.  
    79.   </div>
    80. </div>
    81. <p> Copyright 2018 Rocio Gonzalez Palomo </p>
    82.  
    83. </div>
    84. </body>
    85. </html>
    passt das?