HTML - CSS Probleme Kleinigkeiten
Hey, ich habe eine fast fertige Website gebaut. Jedoch gibt ein paar kleine Probleme:
Die Bildbeschriftung soll links und der Mehr Button soll rechts sein und sich nicht gegenseitig beeinflussen.
Über dem Copyright soll eine Linie gezogen werden (Abtrennnung Fußbereich).
Hoffe mir kann da jemand helfen.
Der hier verwendete Code
<head>
<meta charset="UTF-8">
<title>Aufgabe 4</title>
<link rel="stylesheet" type="text/css" href="standard.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
<style>
.wrapper {
display:flex;
flex-direction:column;
margin: auto;
width:100%; }
header{
display:flex;
flex-direction:column;
border-width: 2px;
border-color: black;
border-style: solid;
}
#header1{
display:flex;
}
.aside1 h1{
text-align: center;
border-bottom: solid black 2px;
font-family: 'Coiny', cursive;
}
.aside1 h1 a{
text-decoration: none;
color: black;}
.logo{
display:flex;
flex:1;
width:200px;
}
.aside1{
display:flex;
flex:1;
}
.main-nav{
border-top:2px solid black;
}
.main-nav ul li {
display: inline;
font-size: 15px;
margin-left: 10px;
border: solid 2px black; }
.main-nav ul a {
font-family: 'Coiny', cursive;
text-decoration: none;
color: black;
}
.main-nav ul a:hover, .main-nav ul a.current {
background-color: deepskyblue; }
#content {
width: 100%;
height:200vh;
display:flex;
flex-direction:row;
border: 2px solid black;
}
#links{
display:flex;
justify-content: center;
flex:1;
padding: 10px;
border-right:2px solid black;
}
#links ul {
list-style: none;
display: inline;
text-align: left;
}
#links li {
font-family: 'Coiny', cursive;
font-size: 15px;
width:200px;
text-align:center;
border: solid 2px black;
}
#links a {
text-decoration: none;
color: black;
}
#links a:hover, #links a.current {
background-color: deepskyblue;
}
#rechts{
display:flex;
flex-direction:column;
flex:4;
}
#rechtsoben h2{
text-align:center;
font-family: 'Coiny', cursive;
}
#rechtsoben p {
font-family: 'Indie Flower', cursive;
font-size: 15px;
color: black;
padding:0 10px 0 10px;
}
.farbige_DIVs{
width: 100%;
height: auto;
float: left;
position: relative;}
#gruen{
width: 90px;
height: 70px;
background-color: green;
position: relative;
z-index: 3;
left: 120px;
top: 20px;
border-radius: 10px;}
#rot{
width: 90px;
height: 70px;
background-color: red;
position: absolute;
z-index: -1;
left: 180px;
border-radius: 10px;}
#schwarz{
width: 150px;
height: 100px;
background-color: black;
position: absolute;
z-index: 3;
left: 220px;
top: 100px;
border-radius: 10px;
opacity: 0.5}
#blau{
width: 120px;
height: 90px;
background-color: blue;
position: absolute;
z-index: 10;
left:320px;
bottom: 250px;
border-radius: 10px;
background: linear-gradient(to bottom, blue, darkblue);
box-shadow: 3px 3px 10px black;}
#orange{
width: 180px;
height: 150px;
background-color: orange;
position: relative;
z-index: -1;
left: 300px;
bottom: 50px;
border-radius: 10px;}
.button{
width: 150px;
height:20px;
position: fixed;
left: 300px;
top: 10px;
text-align: center;
border-radius:8px;
box-shadow:2px 2px 2px black;
}
.button a{
text-decoration: none;
color: black;}
.button:hover{
background:#aaaaaa;
box-shadow:2px 2px 2px white;
}
figure img{
text-align: center;
height: 300px;
width:80%;
}
figcaption{
width:78%;
margin-top:-25px;
}
figcaption:hover p,figure:hover h3{
opacity:0;
}
figure h3{
margin-top:-66px;
margin-left:28%;
color: white;
background:rgba(255,255,255,1.5);
}
figure p {
color: white;
padding-top:25px;
margin-top:-15px;
margin-left:-5px;
background:rgba(255,255,255,0.5);
}
.mehr{
height: 60px;
margin-top:-16px;
margin-right:-15px;
border:1px solid black;
width:25%;
background-color: white;
border-radius: 10px;
text-align:center;
cursor:pointer;
}
.mehr:hover{
background:#ffffca;
box-shadow:2px 2px 2px #ffff1a;
}
#con .mehr a{
text-decoration: none;
color:black;
text-align: center;
font-weight:bold;
}
#con{
display:flex;
flex-direction:row;
width:100%;
}
#con p{
padding-left:10px;
}
footer{
width:100%;
border:2px solid black;
}
footer p{
margin-left:100px;
color:black;
font-weight:500;
font-size:15px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div id="header1">
<aside class="logo">
<img src="/image/logo-trans.png" alt="Logo"/>
</aside>
<aside class="aside1"><h1><a href="#top">Homepage</a></h1></aside>
</div>
<div class="main-nav">
<ul>
<li><a href="Startseite.html">Startseite</a></li>
<li><a class="current" href="Aufgaben.html">Aufgaben</a> </li>
</ul>
</div>
</header>
<main id="content">
<article id="links">
<ul>
<li><a href="Aufgabe_2.html">Aufgabe 2</a></li>
<li><a href="Aufgabe_3.html">Aufgabe 3</a></li>
<li><a href="Aufgabe_4.html" class="current">Aufgabe 4</a></li>
<li><a href="">Aufgabe 5</a></li>
<li><a href="">Aufgabe 6</a></li>
</ul>
</article>
<article id="rechts">
<div id="rechtsoben"> <h2>Aufgabe 4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p></div>
<figure>
<img src="/image/kermit_.jpg" alt="Flower"/> <h3>Lorem ipsum dolor</h3>
<figcaption> <div id="con">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam Lorem ipsum dolor sit amet.</p><span class="mehr"><a class="ww" href="Aufgabe_2.html"><br>Mehr>></a></span></div></figcaption>
</figure>
</div>
</div>
<div id="rechtsunten">
</div>
</article>
</main>
<button class="button"><a href="#top">Zum Seitenanfang</a></button>
<footer>
<p>Copyright YXYZ</p>
</footer>
</div>
</body>
</html>