nicht angemeldet
Hallo zusammen,
nachdem mir schon mehrfach hier im Forum weitergeholfen wurde, konnte ich meine Probleme lösen, leider entstanden schnell neue :-)
Konkret habe ich folgende Fragen:
- Wie kann ich den Text (Bsp. NameA, NameB, etc.) innerhalb der jeweiligen Flexbox horizontal zentrieren?
- Wie kann ich das Mutterelement von NameA, NameB, etc. zentrieren? Margin ist da bestimmt falsch, leider habe ich es nicht anders hinbekommen, bin mir aber sicher, dass es besser geht...
- Welche Fehler seht ihr noch?
meine HTML Datei:
<!DOCTYPE html>
<html lang="de">
<head><title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="design.css" rel="stylesheet">
</head>
<body>
<header>
<div align="center"><img src="Schriftzug.gif"></div>
<nav id="navigation">
<nav id="item1">Part A</nav>
<nav id="item2">Part B</nav>
<nav id="item3">Part C</nav>
<nav id="item4">Part D</nav>
<nav id="item5">Part E</nav>
</nav>
</header>
<main role="main">
<p></p>
<div id="Personen">
<div id="PersonA">NameA</div>
<div id="PersonB">Name</div>
<div id="PersonC">Name</div>
<div id="PersonD">Name</div>
<div id="PersonE">Name</div>
<div id="PersonF">Name</div>
<div id="PersonG">Name</div>
<div id="PersonH">Name</div>
<div id="PersonI">Name</div>
<div id="PersonJ">Name</div>
<div id="PersonK">Name</div>
<div id="PersonL">Name</div>
<div id="PersonM">Name</div>
<div id="PersonN">Name</div>
<div id="PersonO">Name</div>
<div id="PersonP">Name</div>
</div>
</main>
</body>
</html>
... und hier die design.css Datei:
html{
height: 100%;
}
body{
height: 100%;
font: 1.2em/140% Calibri,Times,'Times New Roman',serif;
}
main{
height: 100%;
}
nav{
height: 03%;
}
#navigation{
background-color: gray;
border-radius: 25px;
margin-left: 15%;
margin-right: 15%;
width: 70%;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: center;
display: -webkit-flex;
display: flex;
}
#item1, #item2, #item3, #item4, #item5{
width: 14%;
background-image: -webkit-gradient(linear,left top,right top,color-stop(0.37, #FF0000), color-stop(0.73, #248041));
background-image: -o-linear-gradient(right, #FF0000 37%, #248041 73%);
background-image: -moz-linear-gradient(right, #FF0000 37%, #248041 73%);
background-image: -webkit-linear-gradient(right, #FF0000 37%, #248041 73%);
background-image: -ms-linear-gradient(right, #FF0000 37%, #248041 73%);
background-image: linear-gradient(to right, #FF0000 37%, #248041 73%);
text-align: center;
border-left: 1px solid white;
border-right: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid white;
height: 100%;
}
#Personen{
background-color: gray;
width: 70%;
margin-left: 15%;
margin-right: 15%;
height: 70%;
align-content: center;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
border-radius: 25px;
display: -webkit-flex;
display: flex;
}
#PersonA, #PersonB, #PersonC, #PersonD, #PersonE, #PersonF, #PersonG, #PersonH{
background: #006400;
width: 20%;
height: 20%;
padding-right: 45px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 25px;
display: -webkit-flex;
display: flex;
}
#PersonI, #PersonJ, #PersonK, #PersonL, #PersonM, #PersonN, #PersonO , #PersonP{
background: #FF0000;
width: 20%;
height: 20%;
padding-right: 45px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 25px;
display: -webkit-flex;
display: flex;
}
/* exemplarisch, es werden natürlich immer neue Bilder eingesetzt für Person1-16 */
#PersonA, #PersonB, #PersonC, #PersonD{ /* und so weiter */
background-image: url("PersonA.png");
background-repeat:no-repeat;
background-position:50% 0%;
}
Vielen Dank schon eimmal. Es ist toll, dass man hier so bereitwillige Unterstützer findet.
Einen schönen Restmontag noch,
Blackpanther23
Gunnar Bittersmann
JürgenB
Matthias Apsel