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:
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: progid:DXImageTransform.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] |
ich gerade kein Fehler finden. Auchg beim zusammen schieben sieht es soweit gut aus
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 01:20 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023