nicht angemeldet
flex navigation
AugeIch habe ein Problem mit der Navigation. Ich möchte einen link im mittleren Fenster anzeigen lassen und nicht auf einer neuen Seite. Mein Übungsscipt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Flexbox-3</title>
<style>
body {
display:-webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
header, nav, nav a, article, section, aside, footer {
border-radius: 0px 0.5em 0.5em;
border: 1px solid;
padding: 10px;
margin: 10px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
header {
background: #F1F3F4;
border-color: #d5d5d5;
display:-webkit-flex;
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
}
header * {
-webkit-flex: 1 1 0;
flex: 1 1 0;
}
header img {
-webkit-flex: 0 0 150px;
flex: 0 0 150px;
margin-right: 50px;
}
header nav {
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
}
nav, nav ul, nav li{
margin: 0;
padding: 0;
border: none;
}
nav ul {
display: -webkit-flex;
-webkit-justify-content: space-around;
-webkit-flex-direction: row;
display: flex;
justify-content: space-around;
flex-direction: row;
}
nav li {
list-style-type: none;
margin: 0 10px;
}
nav a {
display:inline-block;
width: 90%;
background: #fffbf0;
border: 1px solid #dfac20;
margin: 0;
text-align: center;
text-decoration: none;
}
nav a:hover {
background-color: #dfac20;
}
section {
background: #F1F3F4;
border-color: slateblue;
}
main {
margin: 20px 0;
padding: 0 15px;
overflow: hidden;
display: flex;
}
article {
background: #ffede0;
border-color: #df6c20;
-webkit-flex: 3 1 0;
flex: 3 1 0;
}
aside {
background: #ebf5d7;
border-color: #8db243;
-webkit-flex: 1 1 0;
flex: 1 1 0;
}
#news {
height:120px;
-webkit-align-self: center;
align-self: center;
}
footer {
background: #e4ebf2;
border-color: #8a9da8;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
}
footer * {
-webkit-flex: 1 1 0;
-webkit-justify-content: space-between;
flex: 1 1 0;
justify-content: space-between;
}
footer p {
text-align:right;
}
</style>
</head>
<body>
<header>
<img src="img/Selfhtml-beispiel-logo.png">
<h1>Seitentitel</h1>
<nav>
<ul>
<li><a href="html/ersteSeite.html">Startseite</a></li>
<li><a href="#ersteSeite">Unterseite 1</a></li>
<li><a href="#link_3.html">Unterseite 2</a></li>
<li><a href="#link_4.html">Kontakt</a></li>
</ul>
</nav>
</header>
<aside>
<h2>Links</h2>
<ul>
<li><a href="ersteSeite.html">Blog</a></li>
<li><a href="#link_2.html">Doku</a></li>
<li><a href="#link_3.html">Forum</a></li>
</ul>
</aside>
<article>
<h2>Ein Layout mit Flexbox</h2>
<p>Flexbox ist eine sehr moderne und einfache Möglichkeit,
responsive und flexible Layouts zu erstellen. Dabei
kommen Sie ohne feste Größenangaben aus und können
auf weitere CSS-Einstellungen wie position, float
oder clear verzichten.
</p>
<p>
Weiterhin kann nicht nur die Größendarstellung,
sondern auch die Reihenfolge der Elemente unabhängig
vom HTML-Code durch CSS festgelegt werden.
</p>
<h3>eine Bitte:</h3>
<p>Wenn Sie mit uns zufrieden sind, sagen Sie's weiter!
<br>
Wenn nicht, sagen Sie's
<a href="mailto:projekt@selfhtml.org ">uns</a>!
</p>
</article>
<aside id="news">
<h2>Top-News</h2>
<p>Gestern gab's Freibier!</p>
</aside>
<footer>
<a href="#kontakt.html">Kontakt</a>
<p>© 2014 by SELFHTML</p>
</footer>
</body>
</html>
-
Hallo
Ich habe ein Problem mit der Navigation. Ich möchte einen link im mittleren Fenster anzeigen lassen und nicht auf einer neuen Seite.
Öhhm, deine Formulierung der Frage ist für mich etwas undurchsichtig.
Willst du, dass nach dem Klick auf einen Link der neue Inhalt in dem mittleren Kasten stehen soll?
… oder …
Willst du einen Link in den mittleren Kasten einfügen?
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, “Wachen! Wachen!