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