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

anordnung divs

ro ci

ro ci

Neues Mitglied
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:
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!
 
Habe mal deinen Code entsprechend ergänzt / geändert:
HTML: 
<!DOCTYPE html>
<html>
<head>

<style>
.borderwelcome {
   border: 3px solid #8FBC8F;    /* reicht so, muss nicht 4mal gemact werden */
}
.flexcontainer {                 /* das ist neu */
   display: flex;
   justify-content: center;
   align-items: center;
}
.intro {
   width: 50%;
/*   float: left;*/             /* das muss weg */
   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;*/             /* das muss weg */
   box-sizing: border-box;
   background-color: #E2A9F3;
   height: auto;
/*   position: center;*/        /* das ist sowieso falsch und muss weg */
   width: 50%;
}
</style>
</head>

<body>

<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="flexcontainer">   <!-- Hier beginnt der Flex-Bereich -->

  <div class="intro">         <!-- das linke Element im Flex-Bereich -->
    <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>                       <!-- Ende linker Container im Flex-Bereich -->

  <div class="moreintro">      <!-- das rechte Element im Flex-Bereich -->
    <h1>...Click <a href="Motivation(HTML).html"> here </a> for motivation.</h1>
  </div>                      <!-- Ende rechter Container im Flex-Bereich -->

</div>                        <!-- Ende Flex-Bereich -->


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

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

    <p>...</p>

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

</div>
</body>
</html>
passt das?
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben