Erster Versuch responsives Layout mit Brackets - Problem sidebar

Macuser30

Aktives Mitglied
Thread Starter
Dabei seit
23.07.2002
Beiträge
2.397
Reaktionspunkte
74
Hallo, bis jetzt habe ich immer eine hübsche statische Seite mit einer separaten mobilen Seite gebaut.
Jetzt versuche ich mit mit Brackets ein responsives Layout selbst zu basteln. Ich bekomme es irgendwie nicht hin, dass sich beim Zusammenschieben die Sidebar nach unten schiebt.
Mittlerweile habe ich die Sidebar ausgeblendet, das kann aber nicht auf Dauer die Lösung sein.
Für Hilfe wäre ich dankbar, ich will mir nicht unbedingt RW für eine Webseite kaufen.
Code:
@media screen and (max-width : 720px){
    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    li {
        margin-bottom: -1px; /*Abstand vertikal*/
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}

@media only screen and (max-width : 720px)
{
  #rechts {display: none;} /*links ab 720px ausgeblendet*/
}
Es betrifft den letzten Eintrag, er bezieht sich auf #rechts - das ist die Sidebar.

Danke für die Hilfe

M46
 
Zuletzt bearbeitet von einem Moderator:
...öhm, wie sieht denn die Semantik der Seite und das CSS für die anderen Viewports aus? Dass du die Sidebar ausgeblendet hast, hattest du ja schon geschrieben.
Eventuell reicht es, wenn du position auf relative änderst.
 
Klasse, genau dieses war es!!!
Code:
@media only screen and (max-width : 720px)
{
  #rechts {display: none;
    position:relative;}
}
Das ist alles ganz schön kompliziert mit dem responsive Design.... macht aber Spaß, sich da durchzubeissen.
Ich habe das Hauptfenster (#links) mit 70% und die Sidebar (#rechts) mit 30% Breite vom Body.
Beim Zusammenschieben des Browserfensters schiebt sich die Sidebar wunderbar unter das Hauptfenster. Gibt es eine Möglichkeit über CSS, dass die Begrenzung auf 70% und 30% auf die volle Breite des mobilen Gerätes skaliert wird?

Herzlichen Dank!

Nachtrag: eben ging es noch... auf einmal will er nicht mehr, wird nur ausgeblendet.
 
Zuletzt bearbeitet von einem Moderator:
... Du musst das display none rausnehmen.

Wenn du nicht mehr 70/30 willst, stelle die divs auf 100%.
 
Hallo, ich habe es jetzt doch hinbekommen. Ob es nun korrekt ist, keine Ahnung, ich bin kein Profi, vielleicht gibt es einen Anfängerfehler:

CSS für beide DIV`s (PC, Tablet)
Code:
#links {
float:left;
width:80%;
height:auto;
background:#FFFFFF; /* #FFFFFF;(weiss)*/
}

#rechts {
float:left;
width:20%;
height:auto;
}

CSS, was bei Auflösung 720 passieren soll:

[USER=26128]@media[/USER] only screen and (max-width : 720px)
{
  #rechts {
    float:left;
      width: 100%;
  max-width: 100%;

    }
  
    #links {
  width: 100%;
  max-width: 100%;

    }
}
Im Prinzip hat die Sidebar (#rechts) in der Desktop-Darstellung 20%, beim Umbruch werden beide DIV's auf volle Breite gesetzt und #rechts springt nach unten. Es ist wesentlich einfacher eine statische und separate mobile Seite zu basteln. Man kommt als Laie kaum der Entwicklung hinterher.

Viele Grüße M46
 
Zuletzt bearbeitet von einem Moderator:
Freut mich, dass dues hingekriegt hast.
 
…und wenn er nun noch zukünftig die
Code:
-Tags hier verwenden würde, freue ich mich auch.

:teeth:
 
Die, wo Einfügen … im Tooltip zu lesen ist und da dann "Code":

Bildschirmfoto 2018-01-16 um 00.12.19.png


.
 
Ich hätte mal noch eine Frage, die Homepage ist fast fertig. Im Prinzip besteht sie nur aus 9 Seiten und wird nur ein bisschen gelegentlich erweitert. PHP habe ich nur wegen include, damit ich die Navigation und die Fußzeile nicht immer neu machen muss bei Änderung. Parallel habe ich die Seite noch im reinen html belassen. Die Seite soll auf einer Synology zu Hause gehostet werden. Über selfhost.eu ist eine DDNS mit einer Domain verknüpft und landet bei mir. Gibt es eine Entlastung für den Server, wenn ich php deaktiviere? Wird der Server auch dadurch sicherer? Die Navigation ist auf 9 Seiten doch schnell angepasst und php nicht mehr notwendig? Viele Grüße M30
 
Zurück
Oben Unten