zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive Webseite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.04.2018, 21:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard 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&uuml;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]
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.05.2018, 05:14
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

ich gerade kein Fehler finden. Auchg beim zusammen schieben sieht es soweit gut aus
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
abschnitte flexibel, responsive design

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Floaten Responsive Webseite Soelg CSS 6 13.04.2017 13:09
responsive Webseite runner CSS 4 14.09.2015 21:45
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 13:37
CSS-Styles werden bei einem Linksprung von Webseite A auf Webseite B nicht geladen Fools (X)HTML 3 13.09.2010 11:57
Webseite lässt sich im Mozilla nicht scrollen xxxarndxxx CSS 3 30.10.2007 10:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:19 Uhr.