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

Text richtig einrichten

L

Lvkas08

Neues Mitglied
Hallo, ich habe ein Problem mit dem Text, neben dem Bild. Und zwar verschiebt er sich aufgrund der länge des Textes, wie man auf dem Bild sehen kann ich hätte es gerne so, dass es wie bei dem unteren Bild aussieht, dass der Text ein wenig abstand zum Bild hat nur er ändert sich aufgrund der länge des Textes
Screenshot_1.jpg
 
HTML:
<body>
<section id="menubar">
<a class="menubutton" href="../Homeseite.html"><img src="../Bilder/bohrung.jpg"><img src="../Bilder/Logo.jpg"><img src="../Bilder/bohrung2.jpg"></a>
</section>
<header>
</header>
<nav class="nav">
<ul>
<li><a href="../Homeseite.html">Start</a></li>
<li><a href="../Gallerie/Gallerie.html">Gallerie</a></li>
<li><a href="../Dienstleistungen/Dienstleistungen.html">Dienstleistungen</a></li>
<li><a href="DienstleistungenG.html" class="active">Dienstleistungen-Test</a></li>
<li><a href="../Kontakt/Kontakt.html" >Kontakt</a></li>
</ul>
</nav>
<section id="main">
<article>
<h2 class="dienstleistungen">Dienstleistungen</h2>
<hr align="left" width="100%" color="black">

<div class="wrapper">
<div class="wrapper-image">
<img src="Bilder/kreissage.jpg">
</div>
<div class="wrapper-text">
<h6 class="wrapper-title">Kreissaege</h6>
<br><br>
<p class="wrapper-p">• Kreissaege in den Grössen von test bis test</p>
<br>
<p class="wrapper-p">• Test-Beispieltext für die Zuleitung von Beispielen, Beispiel und Beispiel</p>
</div>
</div>

<hr align="left" width="100%" color="black">

<div class="wrapper">
<div class="wrapper-image">
<img src="Bilder/kreissage.jpg">
</div>
<div class="wrapper-text">
<h6 class="wrapper-title">Andere Säge</h6>
<br><br>
<p class="wrapper-p">• Dieser beispieltext, um zu gucken</p>
<br>
<p class="wrapper-p">• dann noch mehr Beispieltext für </p>
</div>
</div>
<div class="placeholder"></div>
</article>
</section>
<footer>
<div class="main-content">
<div class="left box">
<h2 class="textfooter2">Kontakt</h2>
<div class="content">
<span class="textfooter">Dienstleistungen</span><br><span class="textfooter">12345 Musterweg</span><br><span class="textfooter">Muster-Strasse 1</span>
</div>
</div>
<div class="center box">
<h2 class="textfooter2">Addresse</h2>
<div class="content">
<div class="phone">
<span class="textfooter">0177/1111111</span>
</div>
<div class="email">
<span class="textfooter">[email protected]</span>
</div>
</div>
</div>
</footer>
<div class="footer1">
<ul>
<li>&copy; 2021 Dienstleistungen</li>
<li><a href="../Datenschutz/Datenschutz.html" class="active1">Datenschutz</a></li>
<li><a href="../Impressum/Impressum.html" class="active1">Impressum</a></li>
</ul>
</div>
</body>
</html>


Style:
body {
font-size: 100%;
margin: 0em;
padding: 0em;
font-family: 'Arial';
}

ul {
margin: 0px;
padding: 0px;
}

a {
text-decoration: none;
color: gray;
}

a:hover{
color: black;
}

a.active1:hover{
color: gray;
}

.dienstleistungen{
text-align: center;
font-weight: bolder;
}

/*header*/
#menubar {
display: flex;
background: #DCDCDC;
background: url("../Bilder/betonwand.jpg");
}
#menubar img{
width: 70%;
}

header {
display: flex;
background-image: url("../Bilder/Logo.jpg");
margin: 0em auto;
padding: 0em auto;
text-align:center;
}
a.menubutton {
text-decoration: none;
color: gray;
display: flex;
}
a.menubutton img {
flex: 1;
min-width: 0;
}

/*Navigation*/

nav {
height: 2.5em;
background:#3104B4;
text-align: center;
border: 1px solid #3104B4;

}

nav ul{
display:block;
}

nav ul li{
display: inline;
margin:0em 0.118em 0em 0.118em;
}

nav ul li a{
color: #E2DBDB;
font-size:1.125em;
line-height: 2.5em;
padding: 0.563em 0.938em 0.375em 0.983em;
transition: 0.2s;
-webkit-transition: background 0.2s;
}

nav ul li a:hover{
background: #DBD9D8;
border-bottom: 0.188em solid #0101DF;
}

nav ul li a.active{
background: #DBD9D8;
color: #2F2D2C;
}
#navbar{
display: block;
width: 50%;
max-width: 980px;
margin: 0 auto;
}
/*wrapper*/
.wrapper{
display: flex;
}
.wrapper-title{
text-align: left;
font-size: 22px;
margin: auto;
padding: 0px;
font-family: 'Arial';
font-weight: normal;
color: #0040FF;
}
.wrapper-p{
text-align: left;
margin: 0em;
padding: 0;
font-size: 18px;
}
.wrapper-image{
display: flex;
width: 50%;
}
.wrapper-image img{
width: 400px;
}
.placeholder{
margin: 1em;
}
/*config area*/

#main{
display:block;
width:50%;
max-width: 980px;
padding: 0em;
margin: 0em auto;

}

#main article{
display: inline-block;
padding: 20px 40px 40px 40px;
background: #FFFFFF;
vertical-align: top;
margin: 0em;
padding: 0em;
text-align: center;
}

#main article img{
max-width: 560px;
box-shadow: 0px 0px 10px -5px #FFFFFF;
border-radius: 5px;
}

#main aside{
display:inline-block;
width: 30.6%;
margin-left: 3%;
padding: 0em;
vertical-align: top;
}

#main aside section{
margin-bottom: 1.563em;
background: #FFFFFF;
border-bottom: 0.188em solid royalblue;
}

#main article h2{
padding: 1em 1.8em 1em 1.8em;
}

#main aside section ul{
padding:0em 1.875em 1.25em 2.5em;
}

/*Footer*/
footer{
bottom: 0px;
width: 100%;
background: #3104B4;
}
.main-content{
display: flex;
}
.main-content .box{
flex-basis: 50%;
padding: 10px 20px;
}
.box h2{
font-size: 1.125rem;
font-weight: 600;
text-transform: uppercase;
}
.box .content{
margin: 20px 0 0 0;
position: relative;
}
.box .content:before{
position: absolute;
content: '';
top: -10px;
height: 2px;
width: 100%;
background: #1C1C1C;
}

.left .content p{
text-align: justify;
}
.center .content .fas{
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
}

.textfooter p{
text-align: justify;
}

.textfooter{
color: #E2DBDB;
padding: 20px;
height: 2px;
line-height: 45px;
position: relative;
}

.textfooter2{
color: #E2DBDB;
}
.footer1{
display:block;
background: #3104B4;
text-align: center;
}

.footer1 ul{
display: block;
width: 100%;
max-width: 960px;
text-align: left;
margin: 0px auto;
}

.footer1 ul li {
display: inline;
font-size: 0.8em;
line-height: 2.8em;
color: #E2DBDB;
padding: 0em 0.625em 0em 0.625em;
}

.footer1 ul li a{
color: #E2DBDB;
}

@media screen and (max-width: 200px) {
footer{
position: relative;
bottom: 0px;
}
.main-content{
flex-wrap: wrap;
flex-direction: column;
}
.main-content .box{
margin: 5px 0;
}
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben