|
|||
Responsive Webseite
Hallo, ich habe auf meiner Webseite die Navigationspunkte nochmal mit diesen blauen Abschnitten unterteilt. Leider läuft der Text dazwischen, wenn die Seite zusammengeschoben wird, über die jeweiligen blauen Begrenzungen hinaus.
Wie kann ich die Begrenzungen (blauen Abschnitte mit den Navigationspunkten) flexibel gestalten? D. h. an den jeweiligen Inhalt anpassen? Ich habe nur das Grundgerüst hochgeladen. Vielen Dank im voraus für Eure Hilfe! Soelg HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Ferienwohnung Zellmer</title> <meta name="author" content=""> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <link href="lightbox/dist/css/lightgallery.css" rel="stylesheet"> <!--Lightbox--> <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="css/ie.css"> <![endif]--> <script src="js/responsive-nav.js"></script> </head> <style> .inhalt { width: 65%; height: auto; background-color: lightgrey; margin: 0 auto; } </style> <body> <div class="container"> <header> <a href="#home" class="logo" data-scroll>Ferienwohnung</a> <nav class="nav-collapse"> <ul> <li class="menu-item active"><a href="#home" data-scroll>Willkommen</a></li> <li class="menu-item"><a href="#zimmer" data-scroll>Zimmer</a></li> <li class="menu-item"><a href="#galerie" data-scroll>Galerie</a></li> <li class="menu-item"><a href="#kontakt" data-scroll>Kontakt</a></li> <li class="menu-item"><a href="#anreise" data-scroll>Anreise</a></li> </ul> </nav> </header> </div> <main> <div class="bild_beschriftung"> <img src="images/angermuende_markt.jpg" alt="Marktplatz Angermünde"> <span>Ferienwohnung</span> <span class="zellmer">Zellmer Angermünde</span> <span class="kleinstadt_charme">Kleinstadt mit Charme</span> <span class="schrift_marktplatz">Marktplatz Angermünde</span> </div> <section id="home"> <h1 class="ueberschriften">Willkommen</h1> <div class="inhalt"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><br /> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br /> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /></p> </div> </section> <section id="zimmer"> <h1 class="ueberschriften">Zimmer</h1> </section> <section id="galerie"> <h1 class="ueberschriften">Galerie</h1> </section> <section id="kontakt"> <h1 class="ueberschriften">Kontakt</h1> </section> <section id="anreise"> <h1 class="ueberschriften">Anreise</h1> </section> <a href="#" class="back-to-top"><img class="pfeil" src="images/pfeil_nach_oben.png" alt="Pfeil" /></a> </main> <script src="js/fastclick.js"></script> <script src="js/scroll.js"></script> <script src="js/fixed-responsive-nav.js"></script> <script src="js/sticky_nav.js"></script> <!--Sticky Navigation scrollen--> <script type="text/javascript" src="js/scroll_top.js"></script> <!--Button nach oben--> <script type="text/javascript"> $(document).ready(function(){ $('#lightgallery').lightGallery(); }); </script> <script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script> <script src="lightbox/dist/js/lightgallery-all.min.js"></script> <script src="lightbox/lib/jquery.mousewheel.min.js"></script> </body> </html> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXX [CODE css] 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, menu, nav, section, summary, hgroup { margin: 0; padding: 0; border: 0; } @font-face { font-family: 'helvetica-light.ttf'; src: url(Helvetica/Helvetica-light.ttf); } 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; } img { max-width: 100%; height: auto; } .logo { display: none; } /* ------------------------------------------ RESPONSIVE NAV STYLES --------------------------------------------- */ .nav-collapse ul { margin: 0 2em 0 0; padding: 0; width: 100%; display: block; list-style: none; } .nav-collapse li { width: 100%; display: block; text-align: center; } .nav-collapse li a { color: #FFFFFF; letter-spacing: 1.5px; font-family: 'helvetica-light.ttf'; } .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; } } /* ------------------------------------------ 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; } /* Foto und Bildbeschriftung Willkommen */ .foto_willkommen { max-width: 100%; height: auto; } .bild_beschriftung { display: block; position: relative; } .bild_beschriftung span { position: absolute; bottom: 15em; left: 1em; padding: 0 5px 0px 5px; font-size: 3.6vw; font-family: Geramond sans-serif; /*color:#F0EDCD;*/ color: white; text-align: center; /*background: #404040; /* Fallback IE 6-8*/ background-color: rgba(229, 182, 124, 0.6); /*background-color: #BE2B24;*/ } .bild_beschriftung .zellmer { position: absolute; margin: 0 0 10.5em 3.5em; left: 1em; padding: 0 5px 0px 5px; background-color: rgba(40, 40, 40, 0.5); font-size: 2vw; color: #D9C1A3; } .bild_beschriftung .kleinstadt_charme { position: absolute; margin: 0em 0 22.5em 6em; left: 1em; padding: 0 5px 0px 5px; font-family: 'helvetica-light.ttf'; font-weight: lighter; background-color: rgba(40, 40, 40, 0.5); font-size: 1.3vw; } .bild_beschriftung .schrift_marktplatz { position: absolute; margin: 0em 0 -10em 50em; left: 1em; padding: 0 5px 0px 5px; background-color: rgba(40, 40, 40, 0.5); font-size: 1.5vw; font-family: 'helvetica-light.ttf'; color: #D9C1A3; } section { border-bottom: 1px solid #999; text-align: center; padding: 0.5px 0 0 0; height: 800px; width: 100%; } #home { margin-top: -5px; } #zimmer, #galerie, #kontakt, #anreise { padding: 1px 0 0 0; } h1 { margin-bottom: .5em; } .ueberschriften { background-color: #669999; padding: 30px; color: #FFFFFF; clear: both; letter-spacing: 1.5px; font-family: 'helvetica-light.ttf'; } p { width: 90%; margin: 0 auto; } /* ------------------------------------------ FIXED HEADER --------------------------------------------- */ /* STICKY NAVIGATION SCROLLEN*/ .container header { /*Sticky Navigation*/ position: relative; top: 0; background: #404040; /* Fallback IE 6-8 */ background-color: rgba(40, 40, 40, 0.1); transition: transform 800ms ease, background 900ms ease; -webkit-transition: transform 800ms ease, background 900ms ease; } .container header.scrolled { position: fixed; top: -70px; background: #404040; /* Fallback IE 6-8 */ background-color: rgba(40, 40, 40, 0.1); transform: translateY(70px); transition: transform 800ms ease, background 900ms ease; -webkit-transition: transform 800ms ease, background 900ms ease; } .container header a:hover { /* hover Effekt navi scroll */ background-color: rgba(40, 40, 40, 0.5); } .container header a:active, .container header .active a { /*background-color: #E2C49A;*/ background-color: rgba(229, 182, 124, 0.7); } /* STICKY NAVIGATION SCROLLEN ENDE */ .container header { 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: lighter; line-height: 55px; padding: 0 20px; /*color: #D9C1A3;*/ float: left; letter-spacing: 1px; } .container .nav-collapse a { background-color: rgba(20, 20, 20, 0.2); } /* ------------------------------------------ MASK --------------------------------------------- */ .mask { -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; transition: opacity 500ms; background: rgba(0,0,0,0); /*background-color: gray;*/ /* Permalink - use to edit and share this gradient: Ultimate CSS Gradient Generator - ColorZilla.com */ /* Permalink - use to edit and share this gradient: Ultimate CSS Gradient Generator - ColorZilla.com */ background: rgb(181,189,200); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progidXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 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: 0.5px solid white; text-decoration: none; padding: 0.7em 1em; color: #FFFFFF; width: 100%; float: left; } .nav-collapse a:active, .nav-collapse .active a { background: #E2C49A; /*border-bottom: 0.5px solid #FFFFFF; padding-bottom: 2px;*/ } @media screen and (min-width: 40em) { .nav-collapse a { /*border-left: 1px solid white;*/ padding: 1em 1em; text-align: center; border-top: 0; float: left; margin: 0; } } @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; z-index: 4; } .nav-toggle.active:before { font-size: 24px; content: "\78"; /* Close icon */ cursor: pointer; color: #fff; } /* ------------------------------------------ PFEIL NACH OBEN --------------------------------------------- */ div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 20em; right: 0px; opacity: 0.9; text-decoration: none; color: #000000; background-color: rgba(235, 235, 235, 0.80); font-size: 1px; padding: 5px; display: none; border-radius: 3px } .back-to-top:hover { background-color: rgba(135, 135, 135, 0.30); } .pfeil { width: 30em; height: auto; } /* ------------------------------------------ PFEIL NACH OBEN ENDE --------------------------------------------- */ [/CODE] |
Sponsored Links |
Stichwörter |
abschnitte flexibel, responsive design |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Floaten Responsive Webseite | Soelg | CSS | 6 | 13.04.2017 14:09 |
responsive Webseite | runner | CSS | 4 | 14.09.2015 22:45 |
Kundeninteresse an Responsive Layout | heiko_rs | Offtopic | 18 | 24.05.2013 14:37 |
CSS-Styles werden bei einem Linksprung von Webseite A auf Webseite B nicht geladen | Fools | (X)HTML | 3 | 13.09.2010 12:57 |
Webseite lässt sich im Mozilla nicht scrollen | xxxarndxxx | CSS | 3 | 30.10.2007 11:58 |