Announcement

**Christian Marquardt** · 09.10.2014, 10:32

Nutze Firefox und Firebug und schau dir mit letzterem an, was passiert wenn du das Fenster verkleinerst. Ändere dann darin das CSS. Und wenn du obiges CSS erstellt hast, müsstest du doch wissen woran es liegt? Problem scheint eher zu sein, dass der Content neben dem Menü sich dem Fenster nicht anpasst, davo ausgehend, dass du ein 2-spaltiges Layout erzeugt hast. Andernfalls ma versuchen das Menü zu centern, wenn es sich um ein Menü oben in der Seite handelt

**Synytrix** · 09.10.2014, 13:36

Erstmal dnake für die Hilfe.
Also ich habe wirklich viel ausprobiert und bin zu keinem wirklichem ergebnis gekommen.
Bei der Google Suche kam auch mehrmals der Vorschlag eine feste größe einzustellen.
Das hat auch nicht ganz funktioniert.
Dann bekam ich aber den vorschlag dem <div> container eine feste größe zuzuweisen und siehe da..
Es klappt.

Vielen dank nochmal,
mfg
David ^-^

**Christian Marquardt** · 09.10.2014, 13:52

Ja, diesen dann centern

**Falk Prüfer** · 13.10.2014, 09:17

Hallo,

Originally posted by Synytrix View Post

...Besteht die möglichkeit die größe der Menüpunkte je nach Auflösung des Bildschirms bzw. größe des Browserfensters anzupassen
oder aber Menüpunkte einfach auszublenden, so das man zur Seite scrollen muss um diese wieder zu sehen?

Ja, diese Möglichkeit besteht. Das Ganze kennt man unter dem Begriff "Responsive Webdesign" und wird hauptsächlich zur Anpassung von Webseiten an unterschiedliche Ausgabegeräte (PC, Tablet, Smartphone) verwendet, lässt sich aber auch für die blanke Größenänderung des Browsers einsetzen.
Hier mal ein rudimentäres Beispiel:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Responsive Test</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <meta name="author" content="Falk Prüfer" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    var menuOpen = false;
    jQuery(document).ready(function($){
      $('#menu-button').click(function(e) {
         if (menuOpen) {
           $('#content div.content_layout div.menu-container').hide(600, function(){
             menuOpen = false;
             $('#content div.content_layout div.menu-container').css('display', '');
           });
         }
         else {
           $('#content div.content_layout div.menu-container').show(600, function(){
             menuOpen = true;
           });
         }
      });
    });
  </script>
  <style type="text/css">
    #menu-button {
      display: none;
      cursor: pointer;
    }
    #content div.content_layout div.sub-container {
      float: left;
      width: 70%;
      min-width: 400px;
    }
    #content div.content_layout div.menu-container {
      width: 30%;
      min-width: 200px;

    }
    @media screen and ( max-width: 700px ) {
      #content div.content_layout div.menu-container,
      #content div.content_layout div.sub-container {
        width: 100%;
      }
    }
    @media screen and ( max-width: 400px ) {
      #content div.content_layout {
        position: relative;
      }
      #content div.content_layout div.menu-container {
        display: none;
        position: absolute;
        background-color: white;
      }
      #menu-button, h1 {
        display: inline-block;
        vertical-align: middle;
      }
    }
  </style>
</head>
<body>
  <div id="content">
    <span id="menu-button"><em>&equiv;</em></span>
    <h1>Responsive Test</h1>
    <div class="content_layout">
      <div class="sub-container menu-container">
        <h2>Erster Container</h2>
        <ul>
          <li>Menüpunkt1</li>
          <li>Menüpunkt2</li>
          <li>Menüpunkt3</li>
          <li>Menüpunkt4</li>
          <li>Menüpunkt5</li>
        </ul>
      </div>
      <div class="sub-container">
        <h2>Zweiter Container</h2>
        <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>
      </div>
    </div>
  </div>
</body>
</html>

Bei grosser Auflösung erscheint das "Menü" links neben dem Text und nimmt 30% des Platzes ein. Schiebt man das Browserfenster in der Breite zusammen, so werden zuerst (bei 700px) das Menü und der Text untereinander und in voller Breite dargestellt. Bei weiterer Verringerung der Seitenbreite (unter 400px) verschwindet das Menü und neben der Überschrift wird ein kleiner Button eingeblendet, mit dem sich das Menü auf- und zuklappen lässt.

Gruß Falk

Announcement

Menü an Auflösung anpassen oder Ausblenden lassen.

Menü an Auflösung anpassen oder Ausblenden lassen.

Comment

Comment

Comment

Comment