Design Westbrook anpassen

Hallo Miteinander,
ich habe noch ein paar Probleme mit der Menüleiste von Design Westbrook.
Problem 1:
Ich habe sie zwar schon zentriert, würde aber die Leiste, sprich die Tabs gerne größer haben, damit sie auf Smartphones gleich besser anzutippen sind.
Problem 2:
Auf Smartphones lässt sich nur Ebene 1 antippen Ebene 2 oder 3 sind nicht erreichbar, wie kann ich das anpassen?
Hat jemand Lösungsvorschläge für mich?
Danke für eure Mühen
Jögg

Hi,

nun, um das besser umsetzen zu können, müßte man das Design Responsive gestalten. Das Menü der momentanen Desktop Lösung ist nicht dafür ausgelegt. Eine andere und einfachere Variante ist das Plugin "Smartphone" einzusetzen.

Dafür musst Du lediglich:

1.) unter den Websiten-Eigenschaften: Datei --> Website- und FTP-Eigenschaften ... --> Erstellen --> erweiterter Erstellungsoptionen --> Sites für mobile Endgeräte --> checkbox "Smartphone" häckchen setzen

2.) Plugin "Smartphone" auf der Startseite einbauen

3.) Webseite erzeugen und veröffentlichen

Danach wird neben der PC-Variante auch eine Smartphone-Seite generiert auf die Umgeleitet wird - das kann je nach Einstellung des Plugins der Besucher selbst bestimmen ...

BEISPIEL >>

Dein Weg ist vergleichsweise hierzu mit wesentlich mehr Aufwand verbunden ...

Viel Erfolg !

Ich nutze das Design (modifiziert, habe es damals gekauft) bei unserer Vereinsseite und habe für die Smartphones das Plugin integriert. Jetzt kann jeder selbst entscheiden, welche Variante er anschauen möchte.

Schöner wäre es, wenn ihr solche Anfragen habt, dies bildlich darzustellen bzw. einen Link eures Objektes zur Veranschaulichung bereitzustellen.

Na, ja, so schwer ist das wohl auch nicht... 

Zu Deinem Problem 1:

Die Höhe der Navigation kannst Du ja hier in der style_design.css unter "height" einstellen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#menu {
	width: 100%;
	height: 40px;
	position: fixed;
	background: url(<cc :print value="&pic.menu.png.filename">) repeat-x;
	top: 0;
	left: 0;
	min-width: 1120px;
	font-size: 13px;
	z-index: 10;
}
 
#menu ul {
	height: 30px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	z-index: 20;
}

 Die Grafik dafür musst Du dann natürlich an Deine gewählte Grösse anpassen, kannst sie aber auch weg lassen und direkt mit Farbwerten arbeiten...

...und die Höhe für die Dropdown-Navigation ist hier unter "line-height" zu ändern, wobei Du auch den ersten Padding-Wert einbeziehen musst

1
2
3
4
5
6
7
8

#menu li a {
	padding: 6px 10px;
	display: block;
	text-decoration: none;
	color: #ffffff;
	outline: none;
	line-height: 18px;
}

Dann noch zu Deinem Problem 2:

Thomas hat die "Reparatur" der Navigation auf seiner Seite sehr gut erklärt: >LINK<

Das Design Westbrook ist zwar nicht dabei, aber durch seine Erklärung weiss man genau was zu tun ist...

..nämlich in der style_design.css dies ergänzen

1
2
3
4
5
6
7
8
9
10

#menu li ul,
#menu li li ul,
#menu li.hover li ul {
        display: none;
}
 
#menu li.hover ul,
#menu li.hover li.hover ul {
        display: block;
}

Hallo Miteinander,

erstmal herzlichen Dank für die Antworten.

Leider komme ich nicht weiter, ich habe den Rat von "Harlekin8" befolgt und habe das Smartphone Plugin eingebaut, aber beim Aufruf der Seite passiert nichts, ich kann nichts auswählen.

Auch den Vorschlag von "Webchaot" habe ich angenommen und alles so eingetragen wie beschrieben, Seite neu erstellt und Hoch geladen aber nichts hat sich verändert. Aber das wäre eigentlich das wo ich hin will.

Was mache ich falsch? Habt ihr einen Tip?

Hier meine Seite: www.ckcmorenden.eu

Vielen Dank

Jögg

Bitte auch immer die URL verlinken, damit man nur zu klicken braucht.

Hast du diese genannte Seite auch mit dem Smartphone aufgerufen ?

Was genau hast Du denn gemacht, Jögg...???

Wenn ich mir Deine Seite und Deine CSS ansehe, dann hast Du lediglich bei #menu die "height" auf 160px gestellt, sonst überhaupt nichts...

Die Abarbeitung meines Vorschlags ist also "sehr unvollständig" und kann so nicht funktionieren...

Und wie Alois Preis schon schrieb: Der Smartphone-Tipp von harlekin8 funktioniert ja...

Offensichtlich nicht, denn wenn man die Seite mit einem Smartphone aufruft wird tatsächlich gefragt ob man die mobiele oder die normale Seite ansehen will.

...was ja genau zeigt, dass der Plugin-Einbau gemäss 1-3 von Ingo funktioniert hat... 

In der Konfiguration kann man dann ja auswählen, ob automatisch die mobile Version verwendet werden soll oder als zweite Möglichkeit die der Abfrage, die hier zur Anwendung kommt...

Wie schon geschireben. Ich nutze das Design auch, zwar mofiiziert, aber das hat meiner Meinung nach mit dem Plugin nichts zu tun. Und bei mir funktioniert es.

Dass du eine modifizierte Version verwendest Klaus hat mit dem Plugin tatsächlich nichts zu tun. Es ist aber sehr gut möglich dass Helge bereits bei der Modifizierung dieses Problem festgestellt hat und das schon vom Anfang an beseitigt hat. Das wissen wir ja nicht, aber es geht hier auch nicht um deine Modifikation sondern um das original Siquando-Design

Was ist denn mit deiner 3.Ebene los? Die sollte ja wohl nicht direkt unter die 2. Ebene sondern wohl eher daneben?

Füge mal bei

1
2
3

#menu li li ul {
	border: 1px solid #444444;
}

 folgende Zeile dazu

1

margin:-30px 0 0 200px

Schau mal per FTP ob überhaupt ein Ordner mobile/smartphone angelegt wird.

Ich hab es mal so wie bei mir ergänzt und da kommt bei dir nichts?

http://www.ckcmorenden.eu/mobile/smartphone/index.php

so ist es bei mir:

http://www.duhlendorf.com/mobile/smartphone/index.php

Was funktioniert denn hieran nicht??

http://www.ckcmorenden.eu/mobile/smartphone/

Eine Seite muß doch nicht zwingend auf .php enden, wenn kein PHP-benötigendes Plugin verwendet wird.

Obwohl ich es wirklich sehr begrüße dass auch mal ein Anderer als die Teammitarbeiter versucht einen Fragestellenden zu helfen, wäre es vielleicht gut wenn der User der antwortet sich vorab schon mal fragt ob er zur Hilfe wirklich etwas beitragen kann.

In diesem Fall rufen, zumindest bei mir, Klaus' Antworten nur noch mehr Fragezeichen auf weil sie nicht wirklich mit dem Anfangsthema etwas zu tun haben und somit die Antworten m.M.n. für den Fragestellenden auch nicht wirklich hilfreich sind.

Wenn der Fragestellenden die Antworte gegeben in den Beiträge 2, 4 und 12 anwendet sollte m.M.n, sein "Problem" nicht länger existieren.

... Wer "Smartphone"-Verhalten (od andere Geräte) testen möchte allerdings keins besitzt, ist mit Chrome sehr gut bedient. Normaleweise arbeite ich mit FF, aber für Mobile Engeräte ist Chrome deutlich nützlicher. Es simuliert sogar das Touch-Verhalten - da wo ein Touch-Event erwartet wird, erscheint ein runder Punkt statt des üblichen Mauscursor.

Dafür müsst Ihr lediglich, auf das mobile Symbole klicken. Bei jedem gewählten Gerät muss dann die "Seite" einmal neugeladen werden, danach kann man das sehr gut beurteilen. Funktioniert wie bei jedem Browser gleich: rechte MT, Element untersuchen, dann taucht auch so ein unscheinbares Mobile-Gerät Symbol auf ...

 

Hallo Wissende,

erstmal vielen Dank für die vielen Vorschläge, ich kam nicht eher dazu mir alles genau anzusehen jetzt bin ich ein Stückchen schlauer oder auch nicht..

Zu Punkt eins mit der mobilen Version, es funktioniert, allerdings nicht mit jedem Browser, soviel habe ich jetzt heraus gefunden.

Mit dem anderen Punkt, das ich die Menüleiste etwas höher und die unteren Ebenen auch klckbar sind, bekomme ich leider nicht hin. Sobald ich auf den Pfeil neben dem Tab klicke sieht man kurz den nächste Menü Ebene, aber es macht immer gleich die Hauptseite auf, an die Unterseite kommt man nicht. Auch für die Höhe bin ich anscheinend zu unwissend. Kann man hier jemand unter die Arme greifen?

Und noch eine Frage kann man aus der Kontextspalte heraus auf Absätze verlinken? Ich würde gerne im einer Kontextspalte mit normalen Textabstaz eine kleines Menü anlegen. Die einzelnen Einträge sollen mit der jeweiligen Bildergalerie verknüpft werden. Zumindest stelle ich mir das so vor, geht das?

Ich bin für jede Anregung dankbar!

Gruß

Jörg

zu deinen unteren Ebenen: siehe mein Beitrag 12

Doch! Die mobile Umleitung via Plugin Smartphone funktioniert nur nicht mit jedem Smartphone, sondern ausschließlich mit iOS- und Android-basierten Geräten.

Abhilfe für diese Einschränkung schafft diese Anleitung.

Hallo Volker,

danke für deinen Tip, aber es liegt auch am Browser bei meinem Blackberry OS10, geht es im Blackberry Browser nicht, aber mit dem Chrome oder Firefox schon.

Nochmals Danke!

Gruß

Jörg

Liebe Conny,

ich habe deinen Rat befolgt und habe den Code eingefügt, bemerke aber keine Veränderung.

Was mache ich falsch?

Danke

Jörg

Hallo Jörg,

gehört nicht zum Thema. Ist mir nur aufgefallen.

Hast du deinen Fanshop per iFrame eingebunden? Versuch da ma die Breite zu ändern, damit man nicht scrollen muss.

Weiß ich nicht. Du hast diese Zeilen gefunden? Im Original Westbrook findest du sie in der style_design.css in Zeile 309. Eintragen musst du

1
2
3
4

#menu li li ul {
	border: 1px solid #444444;
	margin:-30px 0 0 200px
}

 dann abspeichern und hoch laden...

Hallo Conny,

ich habe alles gemacht wir du geschrieben hast, aber eine Änderung kann ich jetzt nicht feststellen.

Was genau soll die Anpassung bewirken?

Vielen Dank

Jörg

Wie in Beitrag 12 geschrieben, dass die 3. Ebene NEBEN die 2. Ebene erscheint anstatt darunter.

Ach so alles klar, aber mein Problem auf den Smartphones, dass die Ebene 2 und 3 nicht anklickbar sind löst das leider nicht. Hast du hierzu vielleicht auch eine Idee?

Und weißt du vielleicht ob man eine Verlinkung auf den Absatz Bildergalerie machen kann? Denn ich habe eine Verlinkung darauf gesetzt aber es passiert nichts, als ob der Link in die Leere geht.

LG

Jörg

Walti hat dir die Lösung für das anklickbar sein der Ebenen doch bereits ausführlich in Beitrag 4 beschrieben? Da kann ich wirklich nix mehr dazu sagen.

Und eröffne bitte jede neue Frage ein neues Thema. Denn die Verlinkung der Bildgalerie hat nix mehr mit dem Anfangsthema zu tun. Außerdem können andere User mit ein ähnliches Problem die Antworten dann viel einfacher über die Suche finden.

Alles klar, werde es mir merken.

Danke