zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.04.2017, 11:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 17
Soelg befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.04.2017, 12:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (13.04.2017 um 12:31 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.04.2017, 12:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.671
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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/
Mit Zitat antworten
  #4 (permalink)  
Alt 13.04.2017, 12:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.671
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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/
Mit Zitat antworten
  #5 (permalink)  
Alt 13.04.2017, 12:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 13.04.2017, 13:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.005
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 13.04.2017, 14:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 17
Soelg befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Antwort

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
responsive Webseite runner CSS 4 14.09.2015 22:45
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 14:37
Navigation li floaten, Unternavi soll auch floaten Fanello CSS 2 23.07.2012 15:40
CSS-Styles werden bei einem Linksprung von Webseite A auf Webseite B nicht geladen Fools (X)HTML 3 13.09.2010 12:57
Wie sieht eine Webseite in verschiedenen Browsern aus TreasureZone Grafik, Design, Typografie 5 18.05.2010 20:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:57 Uhr.