Auf Thema antworten 2026

Beitrag

<blockquote data-quote="sindyho0374" data-source="post: 2697596" data-attributes="member: 466868">Hier mal der Code:[HTML]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;de&quot;&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp; &lt;meta charset=&quot;utf-8&quot;&gt;&nbsp; &nbsp; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;&nbsp; &nbsp; &lt;title&gt;Titel&lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;css/styles.css&quot;&gt;&nbsp; &nbsp; &lt;!--[if lt IE 9]&gt;&nbsp; &nbsp; &nbsp; &lt;script src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie.css&quot;&gt;&nbsp; &nbsp; &lt;![endif]--&gt;&nbsp; &nbsp; &lt;script src=&quot;js/responsive-nav.js&quot;&gt;&lt;/script&gt;&nbsp; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp; &lt;header&gt;&nbsp; &nbsp; &nbsp; &lt;nav class=&quot;nav-collapse&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img class=&quot;logo&quot; src(&quot;images/small.png&quot;)&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#home&quot; data-scroll&gt;Startseite&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#about&quot; data-scroll&gt;Über uns&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#services&quot; data-scroll&gt;Leistungen&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#muster&quot; data-scroll&gt;Muster&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &lt;/nav&gt;&nbsp; &nbsp; &lt;/header&gt;&nbsp; &nbsp; &lt;section id=&quot;home&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;h1&gt;Startseite&lt;/h1&gt;&nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp; &lt;section id=&quot;about&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;h1&gt;About&lt;/h1&gt;&nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp; &lt;section id=&quot;projects&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;h1&gt;Projects&lt;/h1&gt;&nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp; &lt;section id=&quot;services&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;h1&gt;Blog&lt;/h1&gt;&nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &lt;section id=&quot;muster&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;h1&gt;Geschnetz&lt;/h1&gt;&nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp; &lt;script src=&quot;js/fastclick.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &lt;script src=&quot;js/scroll.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &lt;script src=&quot;js/fixed-responsive-nav.js&quot;&gt;&lt;/script&gt;&nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]und hier die CSS:[CODE]/* =============================================**&nbsp;&nbsp; FIXED RESPONSIVE NAV**&nbsp;&nbsp; (c) 2014 @adtileHQ*&nbsp;&nbsp; http://www.adtile.me*&nbsp;&nbsp; http://twitter.com/adtilehq**&nbsp;&nbsp; Free to use under the MIT License.** ============================================= */body, div,h1, h2, h3, h4, h5, h6,p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,fieldset, form, label, legend, th, td,article, aside, figure, footer, header, hgroup, menu, nav, section,summary, hgroup {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; border: 0;}a:active,a:hover {&nbsp; outline: 0;}@-webkit-viewport { width: device-width; }@-moz-viewport { width: device-width; }@-ms-viewport { width: device-width; }@-o-viewport { width: device-width; }@viewport { width: device-width; }/* ------------------------------------------&nbsp; RESPONSIVE NAV STYLES--------------------------------------------- */.nav-collapse ul {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; width: 100%;&nbsp; display: block;&nbsp; list-style: none;}.nav-collapse li {&nbsp; width: 100%;&nbsp; display: block;}.js .nav-collapse {&nbsp; clip: rect(0 0 0 0);&nbsp; max-height: 0;&nbsp; position: absolute;&nbsp; display: block;&nbsp; overflow: hidden;&nbsp; zoom: 1;}.nav-collapse.opened {&nbsp; max-height: 9999px;}.disable-pointer-events {&nbsp; pointer-events: none !important;}.nav-toggle {&nbsp; -webkit-tap-highlight-color: rgba(0,0,0,0);&nbsp; -webkit-touch-callout: none;&nbsp; -webkit-user-select: none;&nbsp; -moz-user-select: none;&nbsp; -ms-user-select: none;&nbsp; -o-user-select: none;&nbsp; user-select: none;}@media screen and (min-width: 40em) {&nbsp; .js .nav-collapse {&nbsp; &nbsp; position: relative;&nbsp; }&nbsp; .js .nav-collapse.closed {&nbsp; &nbsp; max-height: none;&nbsp; }&nbsp; .nav-toggle {&nbsp; &nbsp; display: none;&nbsp; }}/* ------------------------------------------&nbsp; DEMO STYLES--------------------------------------------- */body {&nbsp; -webkit-text-size-adjust: 100%;&nbsp; -ms-text-size-adjust: 100%;&nbsp; text-size-adjust: 100%;&nbsp; color: #37302a;&nbsp; background: #fff;&nbsp; font: normal 100%/1.4 sans-serif;}section {&nbsp; border-bottom: 1px solid #999;&nbsp; text-align: center;&nbsp; padding: 100px 0 0;&nbsp; height: 800px;&nbsp; width: 100%;}h1 {&nbsp; margin-bottom: .5em;}p {&nbsp; width: 90%;&nbsp; margin: 0 auto;}/* ------------------------------------------&nbsp; FIXED HEADER--------------------------------------------- */header {&nbsp; background: #f4421a;&nbsp; position: fixed;&nbsp; z-index: 3;&nbsp; width: 100%;&nbsp; left: 0;&nbsp; top: 0;}.logo {&nbsp; -webkit-tap-highlight-color: rgba(0,0,0,0);&nbsp; text-decoration: none;&nbsp; font-weight: bold;&nbsp; line-height: 55px;&nbsp; padding: 0 20px;&nbsp; color: #fff;&nbsp; float: left;}/* ------------------------------------------&nbsp; MASK--------------------------------------------- */.mask {&nbsp; -webkit-transition: opacity 300ms;&nbsp; -moz-transition: opacity 300ms;&nbsp; transition: opacity 300ms;&nbsp; background: rgba(0,0,0, .5);&nbsp; visibility: hidden;&nbsp; position: fixed;&nbsp; opacity: 0;&nbsp; z-index: 2;&nbsp; bottom: 0;&nbsp; right: 0;&nbsp; left: 0;&nbsp; top: 0;}.android .mask {&nbsp; -webkit-transition: none;&nbsp; transition: none;}.js-nav-active .mask {&nbsp; visibility: visible;&nbsp; opacity: 1;}@media screen and (min-width: 40em) {&nbsp; .mask {&nbsp; &nbsp; display: none !important;&nbsp; &nbsp; opacity: 0 !important;&nbsp; }}/* ------------------------------------------&nbsp; NAVIGATION STYLES--------------------------------------------- */.fixed {&nbsp; position: fixed;&nbsp; width: 100%;&nbsp; left: 0;&nbsp; top: 0;}.nav-collapse,.nav-collapse * {&nbsp; -webkit-box-sizing: border-box;&nbsp; -moz-box-sizing: border-box;&nbsp; box-sizing: border-box;}.nav-collapse,.nav-collapse ul {&nbsp; list-style: none;&nbsp; width: 100%;&nbsp; float: left;}@media screen and (min-width: 40em) {&nbsp; .nav-collapse {&nbsp; &nbsp; float: right;&nbsp; &nbsp; width: auto;&nbsp; }}.nav-collapse li {&nbsp; float: left;&nbsp; width: 100%;}@media screen and (min-width: 40em) {&nbsp; .nav-collapse li {&nbsp; &nbsp; width: auto;&nbsp; }}.nav-collapse a {&nbsp; -webkit-tap-highlight-color: rgba(0,0,0,0);&nbsp; border-top: 1px solid white;&nbsp; text-decoration: none;&nbsp; background: #f4421a;&nbsp; padding: 0.7em 1em;&nbsp; color: #fff;&nbsp; width: 100%;&nbsp; float: left;}.nav-collapse a:active,.nav-collapse .active a {&nbsp; background: #b73214;}@media screen and (min-width: 40em) {&nbsp; .nav-collapse a {&nbsp; &nbsp; border-left: 1px solid white;&nbsp; &nbsp; padding: 1.02em 2em;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; border-top: 0;&nbsp; &nbsp; float: left;&nbsp; &nbsp; margin: 0;&nbsp; }}.nav-collapse ul ul a {&nbsp; background: #ca3716;&nbsp; padding-left: 2em;}@media screen and (min-width: 40em) {&nbsp; .nav-collapse ul ul a {&nbsp; &nbsp; display: none;&nbsp; }}/* ------------------------------------------&nbsp; NAV TOGGLE STYLES--------------------------------------------- */@font-face {&nbsp; font-family: &quot;responsivenav&quot;;&nbsp; src:url(&quot;../icons/responsivenav.eot&quot;);&nbsp; src:url(&quot;../icons/responsivenav.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;),&nbsp; &nbsp; url(&quot;../icons/responsivenav.ttf&quot;) format(&quot;truetype&quot;),&nbsp; &nbsp; url(&quot;../icons/responsivenav.woff&quot;) format(&quot;woff&quot;),&nbsp; &nbsp; url(&quot;../icons/responsivenav.svg#responsivenav&quot;) format(&quot;svg&quot;);&nbsp; font-weight: normal;&nbsp; font-style: normal;}.nav-toggle {&nbsp; -webkit-font-smoothing: antialiased;&nbsp; -moz-osx-font-smoothing: grayscale;&nbsp; text-decoration: none;&nbsp; text-indent: -300px;&nbsp; position: relative;&nbsp; overflow: hidden;&nbsp; width: 60px;&nbsp; height: 55px;&nbsp; float: right;}.nav-toggle:before {&nbsp; color: #fff; /* Edit this to change the icon color */&nbsp; font: normal 28px/55px &quot;responsivenav&quot;; /* Edit font-size (28px) to change the icon size */&nbsp; text-transform: none;&nbsp; text-align: center;&nbsp; position: absolute;&nbsp; content: &quot;\2261&quot;; /* Hamburger icon */&nbsp; text-indent: 0;&nbsp; speak: none;&nbsp; width: 100%;&nbsp; left: 0;&nbsp; top: 0;}.nav-toggle.active:before {&nbsp; font-size: 24px;&nbsp; content: &quot;\78&quot;; /* Close icon */}[/CODE]</blockquote>

[QUOTE="sindyho0374, post: 2697596, member: 466868"] Hier mal der Code: [HTML]<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Titel</title> <link rel="stylesheet" href="css/styles.css">  <script src="js/responsive-nav.js"></script> </head> <body> <header> <nav class="nav-collapse"> <ul> <img class="logo" src("images/small.png")> <li class="active"><a href="#home" data-scroll>Startseite</a></li> <li><a href="#about" data-scroll>Über uns</a></li> <li><a href="#services" data-scroll>Leistungen</a></li> <li><a href="#muster" data-scroll>Muster</a></li> </ul> </nav> </header> <section id="home"> <h1>Startseite</h1> </section> <section id="about"> <h1>About</h1> </section> <section id="projects"> <h1>Projects</h1> </section> <section id="services"> <h1>Blog</h1> </section> <section id="muster"> <h1>Geschnetz</h1> </section> <script src="js/fastclick.js"></script> <script src="js/scroll.js"></script> <script src="js/fixed-responsive-nav.js"></script> </body> </html>[/HTML] und hier die CSS: [CODE]/* ============================================= * * FIXED RESPONSIVE NAV * * (c) 2014 @adtileHQ * http://www.adtile.me * http://twitter.com/adtilehq * * Free to use under the MIT License. * * ============================================= */ body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, hr, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, summary, hgroup { margin: 0; padding: 0; border: 0; } a:active, a:hover { outline: 0; } @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } /* ------------------------------------------ RESPONSIVE NAV STYLES --------------------------------------------- */ .nav-collapse ul { margin: 0; padding: 0; width: 100%; display: block; list-style: none; } .nav-collapse li { width: 100%; display: block; } .js .nav-collapse { clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; overflow: hidden; zoom: 1; } .nav-collapse.opened { max-height: 9999px; } .disable-pointer-events { pointer-events: none !important; } .nav-toggle { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } @media screen and (min-width: 40em) { .js .nav-collapse { position: relative; } .js .nav-collapse.closed { max-height: none; } .nav-toggle { display: none; } } /* ------------------------------------------ DEMO STYLES --------------------------------------------- */ body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; color: #37302a; background: #fff; font: normal 100%/1.4 sans-serif; } section { border-bottom: 1px solid #999; text-align: center; padding: 100px 0 0; height: 800px; width: 100%; } h1 { margin-bottom: .5em; } p { width: 90%; margin: 0 auto; } /* ------------------------------------------ FIXED HEADER --------------------------------------------- */ header { background: #f4421a; position: fixed; z-index: 3; width: 100%; left: 0; top: 0; } .logo { -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration: none; font-weight: bold; line-height: 55px; padding: 0 20px; color: #fff; float: left; } /* ------------------------------------------ MASK --------------------------------------------- */ .mask { -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; transition: opacity 300ms; background: rgba(0,0,0, .5); visibility: hidden; position: fixed; opacity: 0; z-index: 2; bottom: 0; right: 0; left: 0; top: 0; } .android .mask { -webkit-transition: none; transition: none; } .js-nav-active .mask { visibility: visible; opacity: 1; } @media screen and (min-width: 40em) { .mask { display: none !important; opacity: 0 !important; } } /* ------------------------------------------ NAVIGATION STYLES --------------------------------------------- */ .fixed { position: fixed; width: 100%; left: 0; top: 0; } .nav-collapse, .nav-collapse * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .nav-collapse, .nav-collapse ul { list-style: none; width: 100%; float: left; } @media screen and (min-width: 40em) { .nav-collapse { float: right; width: auto; } } .nav-collapse li { float: left; width: 100%; } @media screen and (min-width: 40em) { .nav-collapse li { width: auto; } } .nav-collapse a { -webkit-tap-highlight-color: rgba(0,0,0,0); border-top: 1px solid white; text-decoration: none; background: #f4421a; padding: 0.7em 1em; color: #fff; width: 100%; float: left; } .nav-collapse a:active, .nav-collapse .active a { background: #b73214; } @media screen and (min-width: 40em) { .nav-collapse a { border-left: 1px solid white; padding: 1.02em 2em; text-align: center; border-top: 0; float: left; margin: 0; } } .nav-collapse ul ul a { background: #ca3716; padding-left: 2em; } @media screen and (min-width: 40em) { .nav-collapse ul ul a { display: none; } } /* ------------------------------------------ NAV TOGGLE STYLES --------------------------------------------- */ @font-face { font-family: "responsivenav"; src:url("../icons/responsivenav.eot"); src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"), url("../icons/responsivenav.ttf") format("truetype"), url("../icons/responsivenav.woff") format("woff"), url("../icons/responsivenav.svg#responsivenav") format("svg"); font-weight: normal; font-style: normal; } .nav-toggle { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; text-indent: -300px; position: relative; overflow: hidden; width: 60px; height: 55px; float: right; } .nav-toggle:before { color: #fff; /* Edit this to change the icon color */ font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */ text-transform: none; text-align: center; position: absolute; content: "\2261"; /* Hamburger icon */ text-indent: 0; speak: none; width: 100%; left: 0; top: 0; } .nav-toggle.active:before { font-size: 24px; content: "\78"; /* Close icon */ } [/CODE] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?