Hey, ich brauche mal eure Hilfe in Sachen HTML/CSS (eigtl. nur CSS).
Ich bekomme bei meinem Footer das Kotzen, da ich zwei, mehr oder weniger kleine, Probleme habe.
Hier seht ihr einen Auszug vom Footer.
Ich habe einen kleinen streifen als separate div-Klasse, die automatisch die Farbe wechselt. Dieser Klasse ist dem Footer untergeordnet.
Leider fehlt da noch ein klein wenig nach links (rot eingezeichnet) und wenn ich es mit margin versuche, gehen xy und yz ebenfalls nach links. Das ist aber nicht gewollt.
#footer {
background-color: #3F3F3F;
margin-top: 50px;
padding-left: 20px;
padding-right: 20px;
position: fixed;
text-align: left;
bottom:0px;
height: 100px;
width:100%;
}
#colorize {
width: 100%;
height: 3px;
bottom: 0px;
display: inline-block;
background-color: #3F3F3F;
/* name der keyframes animation (siehe unten) */
-webkit-animation-name: colorize;
animation-name: colorize;
/* dauer von 0 - 100% */
-webkit-animation-duration: 10s;
animation-duration: 10s;
/* schleife wiederholt sich unendlich */
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
/* art der animation */
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes colorize {
0% {
background-color: #47D2E9;
}
50% {
background-color: #3761b5;
}
100% {
background-color: #47D2E9;
}
}
@keyframes colorize {
0% {
background-color: #47D2E9;
}
50% {
background-color: #3761b5;
}
100% {
background-color: #47D2E9;
}
}<div id="footer">
<div id="colorize" />
<div id="cont">
<a href=#">xy</a><br>
<a href="#">yz</a>
</div>
</div>
</div>Ich möchte diesbezüglich keine Lösungsansätze, die das mit Tabellen lösen würden.
---------------------------------
Zu meinem zweiten Problem, ebenfalls im Bild zu sehen, sind die Bilder rechts weiter unten als xy und yz links.
Ich möchte beides auf gleicher höhe, möglichst zentral, haben.
Wie?
#social {
text-align: right;
padding-right: 40px;
display: inline-block;
float:right;
}
Bitte keine Lösungen, die ausschließlich den richtigen Code enthalten. Das hilft mir nicht weiter.
Entweder ihr erklärt dazu warum ihr das so macht, oder lasst es bleiben.
Denn sonst lerne ich nicht dazu.
Don't judge the noob.
