nicht angemeldet
Hallo
Ein Link reicht mir.
Ein Link wird nicht ausreichen. Zumal wenn du selbst schreibst
verstehe das alles nicht
HTML im Zusammenspiel mit CSS ist inzwischen sehr komplex geworden, da die Arten der Ausgabegeräte immer vielfältiger geworden ist.
Die Zeiten von "Ich kann eine oder zwei Programmiersprachen, dann mache ich Webseiten mal so nebenbei." sind schon seit Jahren vorbei.
Du kannst mal nach folgenden Begriffen suchen:
- HtML5
- CSS3
- Flexbox
- CSS3 Selektoren
Als erstes fiel mir auf, daß der Text in der dritten Spalte rechtsbündig war.
Das war gewollt, da so der Platz am besten ausgenutzt wird.
folgendes geändert
Das ist nicht sinnvoll, da durch die width-Angaben Flexbox größtenteils außer Betrieb gesetzt wird.
Ich habe mal eine Lösung mit linksbündigen "Spalten" erstellt:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Navigation 02</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Meine persönlichen Grundeinstellungen für alle Seiten*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: Sans-Serif;
font-size: 120%;
}
body {
margin: 0;
}
}
/* ==================================================== */
/* ***Ab hier beginnen die Angaben zur Problemlösung*** */
/*Spezielle Einstellungen*/
@media all {
.ilinks {
width: 90%;
margin: 1rem auto;
}
.ilinks a {
color: blue;
display: flex;
}
.ilinks a:hover {
background-color: hsla(37, 100%, 92%, 1);
}
.ilinks a>* {
margin: 0.3rem 0;
}
.ilinks a :nth-child(1) {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 4rem;
}
.ilinks a :nth-child(2) {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 1px;
}
.ilinks a :nth-child(3) {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 10rem;
}
}
/* *** Ende der Angaben zur Problemlösung*** */
/* ===================================================== */
/* Vorlage zum Kopieren für Media Queries */
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<div class="ilinks">
<a href="#cdu">
<span>Nr. 1</span>
<span>Christlich Demokratische Union Deutschlands</span>
<span>CDU</span>
</a>
<a href="#spd">
<span>Nr. 2</span>
<span>Sozialdemokratische Partei Deutschlands</span>
<span>SPD</span>
</a>
<a href="#gruen">
<span>Nr. 3</span>
<span>Bündnis 90 / Die Grünen</span>
<span>Grüne</span>
</a>
<a href="#linke">
<span>Nr. 4</span>
<span>Die Linke</span>
<span>Die Linke</span>
</a>
<a href="#fdp">
<span>Nr. 5</span>
<span>Freie Demokratische Partei</span>
<span>FDP</span>
</a>
</div>
</body>
</html>
Statt der p-Elemente habe ich diesmal span-Elemente verwendet. Das CSS ist so ausgelegt, dass es egal ist ob p- oder span-Elemente verwendet werden.
Gruss
MrMurphy
Auge
Matthias Apsel
Der Martin
MudGuard
Tabellenkalk
Camping_RIDER