Hallo,
Ich habe ein Problem mit dem Layout.
So sieht es aktuell aus: http://prntscr.com/azfrda
Folgendes so anders sein
1. da soll ein Abstand Zwischen der Menü Leiste sein und dem Border von <Article>
2. Die Jeweiligen Antworten auf die Fragen sollen auf einer Höhe sein z.B Name Fabian Nachname
3. Border von Article soll über die Fragen plus Antworten gehen
4. footer soll ganz Unten sein
5. Die Bilder sollen die selbe höhe und Abstände haben ( ist nur eins was aus der Reihe springt und weiß nicht wie ich es beheben soll)
Ich habe viele Sachen ausprobiert nichts hat geklappt und ich verstehe einfach nicht wieso nicht....
Hier ist alles der teil von der CSS:
Hier die HTML
Vielen dank im Voraus
gruß Phänox
Hier sind die Bilder
Ich habe ein Problem mit dem Layout.
So sieht es aktuell aus: http://prntscr.com/azfrda
Folgendes so anders sein
1. da soll ein Abstand Zwischen der Menü Leiste sein und dem Border von <Article>
2. Die Jeweiligen Antworten auf die Fragen sollen auf einer Höhe sein z.B Name Fabian Nachname
3. Border von Article soll über die Fragen plus Antworten gehen
4. footer soll ganz Unten sein
5. Die Bilder sollen die selbe höhe und Abstände haben ( ist nur eins was aus der Reihe springt und weiß nicht wie ich es beheben soll)
Ich habe viele Sachen ausprobiert nichts hat geklappt und ich verstehe einfach nicht wieso nicht....
Hier ist alles der teil von der CSS:
CSS:
article{
border: solid green;
height: 90%;
padding-top: 1rem;
}
#hallo{
color: inherit;
text-decoration: inherit;
text-decoration: none;
background-color: transparent;
padding: 0px;
margin: 0px;
display: inline;
width: 0px;
font-size: 2rem;
}
#hallo:hover{
color: #ffffff;
}
nav{
height: 4rem;
}
.Informationen{
background-color: black;
}
.Informationen>div{
width: 33%;
}
.Informationen>div li{
color: green;
padding-left: 14rem;
font-size: 2rem;
padding-bottom: 0.5rem;
display: block;
}
.Informationen>section{
width: 66%;
float: right;
color: green;
}
.Informationen>section li
{
color: green;
padding-left: 14rem;
font-size: 2rem;
padding-bottom: 0.5rem;
display: block;
}
.Informationen>section img{
height:auto;
width: 8rem;
}
.Informationen>section
{
padding-left: 1.5rem;
}
.Informationen>section ul{
padding-bottom: 50rem;
}
.Informationen>section li figure{
width: 10rem;
text-align: center;
padding-left: 0.1rem;
border: solid;
display: inline-block;
}
.Informationen>section li figure p {
text-align: center;
width: auto;
display: inline-block;
}
footer{
width: 50%;
padding-left: 30rem;
}
.Ende>p{
color: green;
font-size: 1.5rem;
border: solid green;
text-align: center;
}
HTML:
<article>
<header class="spieler">
<div>
<p>Profilbild</p>
<figure>
<img src="[URL]https://www.html.de/attachments/305896-jpg.4398/[/URL]" alt="Bruno Phänox">
</figure>
</div>
<section>
<h2>Fabian</h2>
<p>In-Game: <a href="[URL]http://euw.op.gg/summoner/userName=scarze[/URL]" id="hallo"> eXo Scarze</a></p>
</section>
</header>
<nav class="Informationen">
<div>
<ul>
<li> Name</li>
<li> Alter</li>
<li> Elo </li>
<li> Champion Pool</li>
</ul>
</div>
<section>
<ul>
<li> Fabian Nachname</li>
<li> 20 jahre Alt</li>
<li> Diamond</li>
<li><figure> <img src="Bilder/Irelia_Splash_4.jpg"><p>Irelia</p></figure> <figure><img src="Bilder/Fiora_4.jpg"><p>Fiora</p></figure>
<figure> <img src="Bilder/mrc2ct4l6qqnyi5oiyrw.jpg"><p>Poppy</p></figure><figure> <img src="Bilder/rse-banner.jpg"><p>Renekton</p></figure></li>
</ul>
</section>
</nav>
</article>
<footer class="Ende">
<p> Fabian ist 20 Jahre alt und spielt seid 4 jahren league of Legends. Er ist in unserem Team der Top laner.
Der Top-Laner muss stark im 1 vs 1 sein und gute Wave-Controll besitzen in beiden Punkten ist Fabian ein sehr Starker Spieler.
Wir sind froh ihn in unserem Team zu haben, weiter so Fabi!</p>
</footer>
</body>
</html>Vielen dank im Voraus
gruß Phänox
Hier sind die Bilder
Anhänge
Zuletzt bearbeitet von einem Moderator:
