XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Floaten Responsive Webseite (http://xhtmlforum.de/showthread.php?t=73209)

Soelg 13.04.2017 11:40

Floaten Responsive Webseite
 
Hallo,
ich habe ein einfaches Grundgerüst für eine Responsive Webseite erstellt.
Wie ist es machbar, dass das "div Element Content" beim zusammenschieben
der Webseite nicht nach unten ausbricht?
Ich habe schon sehr viel probiert und keine Lösung gefunden.

Vielen Dank für die Hilfe!

Beste Grüße
Dieter

Code:

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Content floaten</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<style type="text/css">
body {
    margin: 0em;
    padding: 0em;
    font-size: 62.5%; /* = 10px */
}
p {
    font-size: 1.6em;
    color: #FFFFFF;
}
img {
    max-width: 100%;
    height: auto;
}
/* WRAPPER */
#wrapper {
    max-width: 86em;
    margin: 0px auto;
    border: solid 3px; color: #C1C4D1;
}
/* HEADER */
header {
    width: 100%;
    height: 100px;
    margin-bottom: 0.5px;
    background-color: #858585;
    margin-top: -16px;
}

/* NAV */
nav {
    /*width: 20.8%;*/
    width: 16em;
    height: 520px;
    float: left;
    background-color: #9B9B43;
}
/* CONTENT */
#content {
    width: 81.1%;
    height: 520px;
    background-color: #FEE07A;
    float: right;
    margin: 1px 1px;
}
/* FOOTER */
footer {
    clear: both;
    position: relative;
    width: 100%;
    height: 60px;
    background-color: #800000;
}
</style>


<body>
    <div id="wrapper">
        <header>
            <p>HEADER</p>
        </header>
        <nav>
            <div id="navigation">
              <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Idee</a></li>
                <li><a href="#">Termine</a></li>
                <li><a href="#">Unterrichtskonzept</a></li>
                <li><a href="#">Dozenten</a></li>
                <li><a href="#"></a></li>
              </ul>
            </div>
        </nav>
        <div id="content">
            <p>CONTENT</p>

        </div>
        <footer>
            <p>FOOTER</p>
        </footer>
    </div>
</body>
</html>


MrMurphy 13.04.2017 12:13

Hallo

Grundsätzlich wäre es sinnvoller statt float Flexbox zu verwenden. Dazu sollte der Quelltext etwas angepasst werden.

Aber zu deiner float-Lösung, obwohl du damit noch viel Freude haben wirst:

Du musst die Breite so anpassen, dass nav und #content nebeneinander genügend Platz haben. Dabei sind alle Angaben zu berücksichtigen, die die Breite beeinflussen können, also neben width auch padding, border und margin.

Wenn das Fenster verkleinert wird werden %-Angaben und gegebenenfalls em-Angaben immer neu berechnet.

Das nav-Element ist 16em breit.

#content ist 81,1% + 2px (zweimal 1px) breit.

Das umgebende Element #wrapper ist maximal 86em breit.

Sobald 16em + 81,1% + 2px breiter als 86em werden rutscht #content zwangsweise unter nav.

Das kannst du zum Beispiel mit einer css-calc-Berechnung verhinden.

Du gibst #content eine Breite von 100% und ziehst alle anderen Breiten davon ab. In deinem Beispiel also

Code:

width: calc(100% - 16em - 2px);
(Info: Bei calc sind die Leerzeichen vor und nach den Rechenzeichen wichtig.)

Dann nutzt #content immer die gesamte zur Verfügung stehende Restbreite aus.

Wenn bei nav noch padding, border oder margin oder bei #content noch padding oder border hinzukommen musst du die Berechnung natürlich anpassen.

Gruss

MrMurphy

cloned 13.04.2017 12:35

Um die ganze Berechnung "etwas" zu vereinfachen, immer box-sizing: border-box verwenden. Erleichtert einem so etwas ungemein (auch wenn der Hinweis mit flexbox weiterhin sinnvoll ist)

https://www.paulirish.com/2012/box-s...order-box-ftw/

cloned 13.04.2017 12:35

Um die ganze Berechnung "etwas" zu vereinfachen, immer box-sizing: border-box verwenden. Erleichtert einem so etwas ungemein (auch wenn der Hinweis mit flexbox weiterhin sinnvoll ist)

https://www.paulirish.com/2012/box-s...order-box-ftw/

MrMurphy 13.04.2017 12:41

Hallo

Den Hinweis auf border-box habe ich vorsätzlich weggelassen, weil einige Browser grade im Zusammenhang mit Flexbox grundsätzlich den Standard content-box verwenden und damit ein neues Problemfeld eröffnet wird, mit dem Anfänger schnell überfordert sind.

Gruss

MrMurphy

MrMurphy 13.04.2017 13:35

Hallo

Nachdem das Problem gelöst ist als Appetithappen noch eine Beispiellösung mit Flexbox.

Die Beispiellösung ist responsive. Der gesamte Quelltext (auch das CSS) befindet sich in der Datei und kann somit eins zu eins kopiert und übernommen werden.

Die Farben habe ich beibehalten, da sie für Beispieldateien sinnvoll sind.

Auf unnötige und problembehaftete Angaben wie height wurde verzichtet.

Mein HTML dazu sieht so aus

Code:

  <header class="pageheader">
      <h1>Flexbox statt float</h1>
  </header>
  <nav id="navigation" class="main-menu">
      <a href="#">Home</a>
      <a href="#">Idee</a>
      <a href="#">Termine</a>
      <a href="#">Unterrichtskonzept</a>
      <a href="#">Dozenten</a>
  </nav>
  <main id="content" class="main-area">
      <h2>Hier sollte ein vollständiger Text stehen, zum Beispiel aus Wikipedia</h2>
  </main>
  <footer class="pagefooter">
      <p>footer</p>
  </footer>

Das entscheidende CSS sieht so aus:

Code:

  /*Grundlayout*/
  @media all {
      body {
        max-width: 1400px;
        padding: 0rem;
        margin: 0rem auto;
      }
  }
  @media only screen and (min-width: 800px) {
      body {
        display: flex;
        flex-wrap: wrap;
      }
      .pageheader,
      .pagefooter {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
      }
      .main-menu {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: calc(10rem - 1rem - 0px - 0rem);
      }
      .main-area {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: calc(100% - 10rem - 1rem - 0px - 0rem);
      }
  }

  /*.pageheader*/
  @media all {
      .pageheader {
        background-color: #858585;
        padding: 0.5rem;
      }
      .pageheader h1 {
        color: white;
      }
  }
  @media only screen and (min-width: 0px) {
  }

  /*.main-menu*/
  @media all {
      .main-menu {
        background-color: #9B9B43;
        padding: 0.5rem;
      }
      .main-menu a {
        display: block;
      }
  }
  @media only screen and (min-width: 0px) {
  }

  /*.main-area*/
  @media all {
      .main-area {
        background-color: #FEE07A;
        padding: 0.5rem;
      }
  }
  @media only screen and (min-width: 0px) {
  }

  /*.pagefooter*/
  @media all {
      .pagefooter {
        background-color: #800000;
        padding: 0.5rem;
      }
      .pagefooter p {
        color: white;
      }
      .pagefooter a {
        color: white;
      }
  }
  @media only screen and (min-width: 0px) {
  }

Ein komplette Datei zum direkten Testen stelle ich für einige Tage auch bereit:

Beispieldatei

Gruss

MrMurphy

Soelg 13.04.2017 14:09

Floten Responsive Webseite
 
Hallo MRMurphy,

ja, eine wunderbare und sehr gut durchdachte Lösung, die ich ausgezeichnet finde.
Herzlichen Dank für Deine großartige Hilfe und den Code. Ich werde nun versuchen, meine Webseite auf dieser Struktur aufzubauen. Sehr genial von Dir gemacht!!!

Beste Grüße
Dieter


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:09 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023