#1

Christoph

Profi  (79 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://itcosys.com

Hallo,

wie vielleicht einige schon festgestellt haben, wird die Sidebar im Design komplett unetrdrückt, anstatt diese beisielsweise dann unter dem Haupt-Container anzuordnen. Ich möchte euch eine Möglichkeit zeigen, wie Ihr dies umgehen könnt.

Der Nachteil ist, dass diese Sidebar im unteren Bereich keine Schattenkopie ist und sich deshalb auch nicht autoamtisch bei einer Änderung der normalen seitlichen Sidebar mitändert. Wenn ihr eine wirkliche Responsivität nutzen wollt, solltet ihr euch Thomas Designs ansehen smile_winking_16.png

SIQUANDO Pro Web > Datei > Webseite-Eigenschaften > HTML > Am Ende des <body>-Bereiches:

Dort fügt ihr folgenden Code ein:

<style "text/css">
	@media only screen and (max-width: 480px) {
		.sidebarfooter {
			display: inline;
		}	
	}
 
	@media only screen and (min-width: 481px) {
		.sidebarfooter {
			display: none;
		}	
	}
 
	.sidebarfooter{
		padding:5px;
	}
</style>
 
<div class="sidebarfooter">
 
	<!-- Kopierter Quelltext Sidebar -->
 
</div>

 Nun müsst ihr mit einem Browser eurer Wahl eure Webseite öffnen. In diesem Beispiel mutze ich Google Chrome. Nun Rechtsklick und auf Element unetrsuchen klicken. Mit der Lupe wählt ihr nun eure Sidebar aus. In der unteren Code-Ansicht muss <div id="sidebarright">..</div> blau unterlegt sein. Jetzt wieder Rechtsklick darauf und auf kopieren klicken. Den Quelltext fügt ihr an der Stelle, wo das Kommentar "Kopierter Quelltext Sidebar" steht ein. 

Design-Anpassung

Ihr müsst nun sagen, ab welcher Screen-Breite die Sidebar auf dem Endgerät unten eingeblendet werden soll. Ich habe für dieses Beispiel 480px gewählt. Diese Werte könnt ihr im CSS Code auch ganz einfach selber ändern. Max-width steht für: Wenn die Größe kleienr als ... ist, wird die untereSidebar eingeblendet. Min-width steht für: Wenn die Größe größer ist als ... wird die untere Sidebar ausgeblendet.

.sidebarfooter{
	padding:5px;
}

Ich habe einen Innenabsatnd mit dem Befehl Padding von 5px eingefügt, damit die Sidebar nicht so an den Rand gebatscht wird. Hier könnt ihr auch noch weitere Style-Angaben unterbringen. Diese werden dann auf die Sidebar angewendet.

Impressum

Kleiner Tipp: Im Bereich <div class="sidebarfooter">...</div> könnt ihr auch eure Angabe zum Impressum unterbringen.

So siehts dann aus

Auf meiner Seite habe ich das unten eingefügt: http://esip.itcosys.com/ - einfach das Browserfenster kleiner ziehen und ab 480px Breite erscheint das Impressum für Mobil.


Dieser Beitrag wurde bereits 3 mal bearbeitet, zuletzt von »Christoph« (12.05.2015, 09:15)
#2

Volker W.

Administrator  (7823 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#3

Christoph

Profi  (79 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://itcosys.com

#4

Thomas

Moderator  (2303 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

Christoph, unter http://www.w3schools.com/cssref/pr_class_display.asp finde ich „true” als value für „display” nicht.


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#5

Christoph

Profi  (79 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://itcosys.com

856 Aufrufe | 5 Beiträge