nicht angemeldet
Okay,
danke für die Seite als Tipp.
Wie gesagt habe ich auch schon eine Seite erstellt und mittlerweile auch jQuery implementiert.
Jedoch ist bei mir nun einfach oben links der Menu-Button, egal bei welcher Fenstergröße, und verbleibt ohne Funktion wenn man ihn klickt. Damit es anschaulicher für euch ist, hier die komplette HTML+CSS-Datei:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="icon" href="images/lllins.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.menubutton').click(function() {
$('nav').slideToggle('slow');
});
});
</script>
<title>Microsoft</title>
</head>
<body>
<section id="menubar">
<ul>
<li><a class="menubutton" href="#menu"><img src="images/menu.png"></a>
</ul>
</section>
<header>
<h1>Microsoft</h1>
</header>
<nav class="nav">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="steckbrief.html">Steckbrief</a></li>
<li><a href="geschichte.html">Geschichte</a></li>
<li><a href="microsoft_heute.html">Microsoft heute</a></li>
<li><a href="quellen.html"class="active">Quellen</a></li>
</ul>
</nav>
<section id="main">
<article>
<h2>Quellen</h2>
<p>Letzter Zugriff am 14.01.2018:</p>
<ol>
<li><a href="https://de.wikipedia.org/wiki/Microsoft">Wikipedia(Microsoft)</a></li>
<li><a href="https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2017/02/17/104290057-Bill_Gates_paris.1910x1000.jpg">Bild von Bill Gates</a></li>
<li><a href="http://altairclone.com/">Altair 8800-Bild</a></li>
</ol>
<p>Letzter Zugriff am 26.01.2018:</p>
<ol>
<li><a href="https://www.finance-monthly.com/Finance-Monthly/wp-content/uploads/2017/06/IBM-banner.jpg">IBM-Logo</a>
<li><a href="https://de.wikipedia.org/wiki/IBM">Wikipedia (IBM)</a></li>
<li><a href="https://cdn2.macworld.co.uk/cmsdata/features/3452845/iPad-iPhone-Office-Suite.jpg">MS Office Logo</a></li>
</ol>
<p>Letzter Zugriff am 27.01.2018:</p>
<ol>
<li><a href="https://kurtsh.files.wordpress.com/2016/03/image.png">Redmond Campus Bild</a></li>
<li><a href="https://upload.wikimedia.org/wikipedia/de/timeline/3fa73ef79ced3f95c4f536b1bd6023bf.png">Umsatzstatistik</a></li>
<li><a href="https://de.wikipedia.org/wiki/Bill_Gates">Wikipedia (Bill Gates)</a></li>
</ol>
</ol>
</article>
<aside>
<section>
<h2>Infos zur Nutzung von urheberrechtlich- geschützten Bildern</h2>
Alle verwendeten Bilder sind gemäß §53, Abs.1 UrhG zur nicht-kommerziellen Nutzung im schulischen Bereich freigegeben.
</section>
<section>
<h2>Textfeld</h2>
<img src="images/cortanagif.gif" alt="msgif">
</section>
<section>
<h2>Kategorien</h2>
<ul>
<li>abc</li>
<li>abc</li>
<li>1234567890</li>
</ul>
</aside>
</section>
<footer>
<ul>
<li>© Microsoft</li>
<li>Validator Certificate</li>
<li>Sonstiges</li>
</ul>
</footer>
</body>
</html>
CSS:
/* Style allgemein*/
body {
background: lightgray;
font-size: 100%;
margin:0em;
padding:0em;
font-family: Helvetica;
}
h1 {
font-size: 3.0em;
line-height: 3.8em;
font-family: Helvetica;
font-weight: 100;
color:#E2DBDB;
margin:0em;
}
h2 {
font-size: 1.563em;
line-height: 1.8em;
font-weight: bold;
color:#2F2B2C;
margin:0em;
padding:1.25em;
text-align: left;
}
p {
font-size: 1.24em;
line-height: 1.75em;
font-weight: 100;
color:#2F2B2C;
margin:0em;
padding:1.25em;
text-align: justify;
}
ul {
margin:0px;
padding:0px;
}
li {
list-style: square;
font-weight: 100;
color:#2F2B2C;
line-height: 1.25em;
margin: 0;
padding: 0em;
text-align: justify;
margin:0.313em 0em 0.313em 0em;
font-size: 1.23em;
}
img {
width: 90%;
height: auto;
max-width: 100%;
margin-left: 12px;
}
iframe {
width: 90%;
height: auto;
margin-left: 14px;
margin-bottom: 12px;
}
a {
text-decoration: none;
}
#sbl {
margin-bottom: 1.4em;
margin-top: 1.4em;
}
/* On Top Bar */
#menubar {
display: block;
background: #FFFFFF;
}
#menubar ul {
display: block;
width: 2em;
padding: 0.9em;
}
#menubar ul li {
display: inline;
}
#menubar ul li a.menubutton {
}
/* Header */
header {
display: block;
font-size: 1.19em;
background:#2F2C2C;
text-align: center;
}
/* Navigation */
nav {
display: block;
height: 3.3em;
background:#FFFFFF;
text-align: center;
}
nav ul {
display: block;
}
nav ul li {
display: inline;
margin: 0em 0.188em 0em 0.188em
}
nav ul li a {
color:#454040;
font-size: 1.125em;
line-height: 2.5em;
padding: 0.563em 0.938em 0.375em 0.983em;
}
nav ul li a:hover {
background-color:#DBD9D8;
border-bottom: 0.188em solid #E7590B;
}
nav ul li a.active {
border-bottom: 0.188em solid #E7590B;
}
/* Content Bereich */
#main {
display:block;
width: 96%;
max-width: 980px;
margin: 1.25em auto;
padding: 0em;
}
#main article {
display:inline-block;
width: 65.3%;
background: #FFFFFF;
vertical-align: top;
margin: 0em;
padding: 0em;
text-align: center;
}
#main article img {
max-width: 560px;
box-shadow: 0px 0px 10px -5px #4C4948;
border-radius: 5px;
}
#main aside {
display:inline-block;
width: 30.6%;
margin-left: 3%;
padding: 0em;
vertical-align: top;
}
#main aside section {
margin-bottom: 1.563em;
background: white;
border-bottom: 0.188em solid #E7590B;
}
#main article h2 {
padding: 1em 1.8em 1em 1.8em
}
#main aside section ul{
padding: 0em 1.875em 1.25em 2.5em;
}
/* Footer ds1*/
footer {
display:block;
background:#2F2C2C;
text-align: center;
color: #FFFFFF;
}
footer ul {
display: block;
width: 100%;
max-width: 980px;
text-align: left;
margin: 0px auto;
}
footer ul li {
display: inline;
font-size: 0.8em;
line-height: 2.8em;
color: white;
padding: 0em 0.625em 0em 0.6235em;
}
footer ul li a {
color: #E2DBDB
}
footer p {
color: #FFFFFF;
text-align: right;
}
footer a {
color: white;
}
/* Mobile Devices Style */
@media screen and (max-width:800px) {
body {
font-size: 90%;
}
}
@media screen and (max-width:600px) {
#main aside, #main article {
width: 100%;
display: block;
margin: 0.25em 0em 0.625em 0em;
}
}
@media screen and (min-width:550px) {
}
@media screen and (max-width:550px) {
body {
font-size: 86%;
}
menubar ul li a.menubutton {
}
nav {
display: none;
height: auto;
}
nav ul {
display: block;
margin: 0.3em 0em 0.3em 0em;
}
}
Vielleicht erkennt ja irgendjemand ein Problem und findet eine Lösung.
Vielen Dank im Voraus!
Gunnar Bittersmann