[Erledigt] Logo-Bereich und Menu im Design campus web 12 fixieren

Hallo,

ich würde gern den Bereich Logo und Menu fixieren, so dass eben beim Scrollen nach unten immer Menu und Logo sichtbar bleibt, ich verwende das Design Campus in web 12 und diese Anpassung ist im Quick Design Editor nicht möglich.

kann man das irgenwie duch Änderungen in den Design-Dateien erreichen ??, wenn ja ist das für jemand mit beschränlkten Kennnisen machbar.

Alternativ könnte mir das jemand gegen Honorar anpssen, dann bitte Nachricht senden.

Dann frage doch mal bei unseren Co-Admin Thomas nach ob dies möglich ist und welche Kosten dafür anfallen.

 Ja, kann man, aber das würde nichts bringen, wenn du dann im Quick Design Editor etwas änderst und dann Design erzeugen klickst, werden die Design-Dateien im Design-Ordner wieder überschrieben und die nicht benötigten Dateien gelöscht.

Es gibt jedoch die Möglichkeit einen passenden <style>-Code als HTML-Code bei den Website-Eigenschaften (Reiter HTML-Optionen) einzusetzen, der dann bedingt das Design anpasst.

Der ganze Style-Code muss mit <style> beginnen und mit </style> aufhören, dazwischen kannst du dann die Eigenschaft position (z.B. mit sticky) wie folgt anwenden , die auf der Wiki-SelfHTML (Kick hier) sehr gut erläutert werden. Da das ganze hier z.B. für den "Oberen Bereich" des Design Campus gelten soll, muss die Position zwischen #sqrtop { und } sein. Zwischen den geschweiften Klammer muss dann position (z.B. position: sticky;) gleich danach top (z.B. top: 0px;) und folgend width (z.B. width: 100%;) definiert werden (das definiert den Oberen Bereich).

Damit das ganze auch im Design schön aussieht, darf die Hintergrundfarbe vom oberen Bereich nicht transparent sein.
Im Quick Design Editor "Allgemein" den Oberen Bereich mit Farbe füllen oder Farb-Code angeben (z.B. E8EBED oder FFFFFF), jedoch nicht transparent.
Tipp: Falls ein "Eyecatcher" eingesetzt wird, diesen an die Position "Über der Navigation" setzen, damit dieser ebenfalls mit fixiert ist. Wenn dieser unter der Navigation ist, dann scrollt dieser über den Oberen Bereich (Navigation) darüber und es sieht nicht schön aus (Allerdings Geschmacksache).

Der ganze Style-Code wird dann so zusammengesetzt:
<style>
#sqrtop {
position: sticky;
top: 0px;
width: 100%;
}
</style>

Wenn dies nicht den gewünschten Effekt bringt, nicht ausreicht oder das ganze im Quick Design Editor selber integriert sein soll, dann empfehle ich, wie bereits Marjorie empfohlen hat, den Co-Admin Thomas um Hilfe zu bitten.

Hallo MuggelClan,

vielen Dank für deine super Hilfe, ich habe das mal probiert.

<style>
#sqrtop {
position: sticky;
top: 0px;
width: 100%;
}
</style>

in html-Eignschaften eingetragen, es funktioniert soweit bis auf das Problem, dass Billder jpg, png und gif über den Logobereicch und Menu laufen, könnte man das mit einem zusätzlichen Befehl verhindern? Aso bei Text funktioniert es ohne Pobleme.

Dann habe ich noch eine wenig rumgespielt, wie man nur die Navigation fixiert, also nicht den Logobereich, irgenwie gelingt mir das nicht, wäre das einfach zu lösen mit weiteren Angaben im obigen Code?

nochmals vielen Dank

Tanja

Hallo Tanja,

das Bilder von einigen Absätze über die Navigation (Oberen Bereich) laufen, ist genau das ist das Problem, das sich nicht einfach so lösen lässt. Da müsste viel mehr z.B. in der Datei "style_design.css" im Designordner angepasst werden. Wobei, wie schon oben erwähnt, bei einer Änderung im Quick Design Editor und anschließendem Klick auf Design erzeugen, diese dann wieder überschreibt. Man dürfte dann das erzeugte Design am besten nicht mehr nachbearbeiten oder vom Quick Design Editor abkoppeln als eigenständiges Design.

Der folgende Code würde nur die Navigation am oberen Rand fixieren:

<style>
#sqrnav {
 position: sticky;
 top: 0px;
 width: 100%;
}
</style>

Vielleicht macht es bei dem Problem mehr Sinn, ein anderes Design zu wählen? 

Kaiser zb. oder Leonidas

Hallo Daniel,

der selben Meinung bin ich auch, ein anderes Design, das ähnlich aussieht und bereits die Navigation fixiert ist, wäre die einfachste Lösung.

Persönlich würde ich mir Wünschen, dass der Quick Design Editor von Siquando entsprechend erweitern würde, da das Fixieren der Navigation eigentlich schon als Standardfunktion zu sehen ist.

ich habe leider kein design gefunden mit fixer navigation und mit quick design editor....habe ich was übersehen,,,welches design sollte das sein?

Leonidas ist ein Design mit fixer Navigation

Hallo Elefant,

probier es mal in der style_design.css innerhalb des #sqrtop:

 position: sticky;
 position: -webkit-sticky;
 top: 0; /* required */
 background:#ffffff;
 z-index:300;
 max-width: 1100px;
 margin: 0 auto; 

Grüße und gesundes neues Jahr @all,

Data

vielen Dank Data,

Frage dazu: wird style_design.css mit quick design editor üerscchrieben oder bleiben die Änderungen?

viele Grüsse

Tanja

Oh man Tanja, ihr macht es einem auch schwer.

Lest doch mal die Vorhergehensweise des Designeditors. Man öffnet oder erstellt ein neues Design. Dies speichert man dann unter einem neuen Namen. In diesem Beispiel habe ich das vorgefertigte Design CAMPUS geöffnet unter neuem Namen CAMPUS3 gespeichert und neues Design erzeugen.

Dann wird das neue Design CAMPUS3 in dein Designordner erzeugt und ist auswählbar. Das neuerzeugte design mit Schreibrechten versehen und künftige Änderungen dort vornehmen. In diesem Fall habe ich dann die style_design.css geöffnet und den Code:

 position: sticky;
 position: -webkit-sticky;
 top: 0; /* required */
 background:#ffffff;
 z-index:300;
 max-width: 1100px;
 margin: 0 auto; 

in dem Abschnitt #sqrtop eingefügt.

Alle künftigen Änderungen immer in dem Designordner vornehmen und nicht mit dem Designeditor. Wenn du Änderungen über den Designeditor vornimmst, werden natürlich alle Änderungen im Designordner natürlich überschrieben!

Grüße Data

Wenn ich das hier so lese, dann muß ich auch mal etwas los werden:

Hier im Forum hält sich aus vielen Beiträgen wie z.B. von dir, MuggelClan und vielen anderen hartnäckig der Mythos, daß getätigte Änderungen am Design vom QuickDesigEditor immer wieder überschrieben werden.

Dies muß nicht so sein! Wenn man es richtig macht, dann übernimmt Siquando auch getätigte Änderungen, nachdem man „Design erzeugen“ gewählt hat.

Dazu muß man folgendes wissen:

Bisher bezog das Design die nötigen detailspezifischen Informationen aus dem Designordner des jeweiligen Designs, z.b. aus den Dateien config.ccml, navigation.ccml, style_content.css, style_design.css und vielen anderen mehr. Allgemeine Informationen wie z.B. paragraph.text, paragraph.table, paragraph.picture etc. wurden nicht aus dem Designordner, sondern aus dem allgemeinen Ordner „common“ bezogen, da sie nicht designspezifisch sind, sondern für alle Designs gelten.

Ab Designs der Version 12, die nun mit dem QuickDesignEditor arbeiten, gilt dabei folgendes zu beachten:

An den allgemeinen Informationen wie z.B. paragraph.text, paragraph.table, paragraph.picture etc. hat sich nichts geändert aus dem allgemeinen Ordner „common“ bezogen.

Detailspezifische Designinformationen wie z.B. Farbeinstellungen, Grössen, Schriften, etc. können nun ja nun neu im QuickDesignEditor selbst getätigt werden, weshalb Siquando ja nun auch keine Varianten mehr zur Verfügung stellt, da dies durch selbständige Änderung überflüssig geworden ist.

Die erforderlichen Grundinformationen beziehen die neuen Designs nun nicht mehr aus dem Designordner des jeweiligen Designs, sondern auch von einer zentralen Stelle, nämlich aus dem Ordner „Design“ aus dem Ordner „designeditor“.

Die Inhalte der bisherigen Dateien config.ccml, navigation.ccml, style_content.css, style_design.css und vielen anderen mehr werden nun auch als allgemeine Templates von hier bezogen, wobei den Dateien noch der Zusatz .tpl verpasst wurde, weshalb sie nun config.ccml.tpl, navigation.ccml.tpl, style_content.css.tpl, style_design.css.tpl, etc. heißen.

Tätigt man z.B. die sqrtop-Änderung in der style_design.css.tpl ein, dann wird sie nach dem Erzeugen seines neuen Designs, also im vorherigen Fall z.B. CAMPUS3 zur Verfügung stehen und auch bei weiteren Speicherungen erhalten bleiben.

Aber aufgepasst!

Diese Änderung ist jetzt in einem „allgemeinen Template“ geschrieben und wirkt sich auf ALLE Desings aus!

Das ist aber überhaupt nicht schlecht, sondern eine sehr gute Verbesserung. Denn dadurch kann man sich nun (wie in einem anderen Beitrag erwähnt aus dem Workshop) eigene erweiterte Eigenschaften schreiben, die man dann nur einmal schreiben muß und nach dem erzeugen des seines neuen Designs ebenfalls in ALLEN Designs zur Verfügung stehen und man seine Änderungen je nach Design unterschiedlich einsetzen kann!

Ich hoffe, daß ich nun mit diesem „Mythos“ etwas aufräumen konnte!

Es lohnt sich also, für die, die es noch nicht gemacht haben, sich in die Tutorials und Workshops einzulesen, denn ab Version 12 nur noch einmal, aber gleich für ALLE Designs schreiben ist doch eine super Verbesserung!

Das war in Web 11 auch schon so

Wer lesen kann, ist klar im Vorteil.

In Web 11 wurden diese Dateien aus dem jeweiligen Designordner bezogen und hatten nur die Endung *.ccml oder *.css, aber nicht *.ccml.tpl oder *.css.tpl! Lediglich allgemeine Dateien wie eben z.B. paragraph.text, paragraph.table, etc. wurden aus dem dortigen allgemeinen Ordner "common" bezogen.

Edit:

Sorry W2DFan, mein Fehler, ich wollte lediglich darauf hinweisen, daß die Dateien geändert haben und anderswo zu finden sind. In Web 10 war es noch nicht so, aber ja, das hatte ja schon in Web 11 geändert, da der QuickDesignEditor ja schon in Web11 gebracht wurde.

Hallo Puntigamer,

vielen Dank für Deine Aufklärung, das ist alles richtig was du schreibst, aber es ist kein Mythos dass bei einer Änderung im Quick Design Editor und anschließendem Klick auf Design erzeugen, der Design-Ordner im SiquandoWeb dann wieder überschrieben wird und sogar den Ordner zuerst von allen Dateien leert. Da entspricht der Wahrheit.

Wie ich schon geschrieben habe, würde ich mir die Funktion Fixieren der Navigation als Auswahl im Quick-Design Editor wünschen und nicht erst in tpl-Dateien mit beschränkten HTML-Kenntnisse herumpfuschen wollen. Da ist meiner Meinung nach das Ziel des Quick-Design Editor, dass auch Leute ohne HTML/CSS-Kenntnisse selber eine Homepage erstellen können und nicht für bereits professionelle Programmierer, die können ja gleich komplette ein eigenes Design passend erstellen und müssen nicht erst in tpl-Dateien schreiben.

Des weiteren müsste dann auch in der tpl-Datei so angepasst geschrieben werden, dass eben eine Auswahlmöglichkeit gibt, ob ich ein fixiertes Menu bzw. fixierte Navigation haben will, oder auch nicht, und natürlich das Programm Quick-Design-Editor angepasst werden. Das ist meiner Meinung Aufgabe von Siquando.

Wenn du also das in den tpl-Dateien schreibst, und möchtest es doch für das nächste Projekt wieder anders haben, finde ich das schon sehr umständlich das wieder zu ändern. Desweiteren gibt es hier genügend, die das Ursprungs-Design gar nicht verändern möchten, sondern eben nur kleine Änderungen ergänzen möchten, die nur für das eine Projekt gilt.

Man kann also auch schreiben (Mythos ?), was man in die tpl-Dateien schreibt, bleibt hartnäckig in alle Designs die man hierüber erstellt.

Außerdem, habe ich hier im Forum schon mehrmals geschrieben, dass ich kein Programmierer bin. Wenn du also meine Beiträge verbessern kannst oder berichtigen kannst, habe ich überhaupt nichts dagegen. Aber ich schreibe hier keinen Mythos, sondern nur Fakten, die ich selber ausprobiert habe und getestet habe.

@Data
Vielen Dank für Deine Hilfe, mir fehlte zu diesem Problem die Kenntnisse zu z-index. Habe es zwar schon mal gesehen und auch irgendwo gelesen, aber leider bin ich hierauf nicht gekommen. 

@elefant
Den Code von Data, kannst du auch wie bei meinem Vorschlag in den Website-Eigenschaften (HTML-Optionen - HTML-Code) kopieren.

<style>
#sqrtop { 
 position: sticky;
 position: -webkit-sticky;
 top: 0; /* required */
 z-index:300;
 max-width: 1100px;
 margin: 0 auto; 
}
</style>

Würde allerdings die Zeile "background: #ffffff;" weglassen, da du diese dann noch im Quick-Design Editor dann wie in meinem ersten Beitrag beschrieben weiter die Farbe ändern kannst.

Habe es ausprobiert und funktioniert auch so, brauchst dir mit dieser Vorgehensweise keine Gedanken bzgl. überschreiben durch den Editor machen, und das Ursprungsdesign bleibt erhalten.

@All
Ein gutes und erfolgreiches neues Jahr

nochmals vielen dank für die hilfe hier

also ich habe nun den code bei html eigenschaften eingefügt

<style>
#sqrtop { 
 position: sticky;
 position: -webkit-sticky;
 top: 0; /* required */
 z-index:300;
 max-width: 1100px;
 margin: 0 auto; 
}
</style>

und es funktioniert, logobereich und navigation fixiert

jedoch bei fixierung nur der navigation mit 

#sqrnav

{ 
 position: sticky;
 position: -webkit-sticky;
 top: 0; /* required */
 z-index:300;
 max-width: 1100px;
 margin: 0 auto; 
}

geht es nicht, habe ich im code was falsch gemacht ?

Nimm einfach den funktionierenden Code und ersetze #sqrtop mit #sqrnav.

Es ist der selbe Code, nur dass dann mit #sqrnav nur Navigation fixiert wird. Siehe Beispiel Beitrag #5

das ist genau das problem

bei dem sqr-code passt alles.

<style>
#sqrtop {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
z-index:300;
max-width: 100%;
margin: 0 auto;
}
</style>

nur bei nav-code funktioniert nichst, d.h. navigation wird nicht fixiert

<style>
#sqrnav {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
z-index:300;
max-width: 100%;
margin: 0 auto;
}
</style>

Sorry, hab was vergessen, das passiert, wenn man eben nicht selber testet sondern einfach antwortet.

Man muss hier nicht sticky verwenden, sondern fixed:

Baispiel:

<style>
#sqrnav {
 position: fixed;
 top: 0px;
 width: 100%;
 z-index:300;
}
</style>

Ergänzung:

Damit der Oberer Bereich nicht unter der Navigation beginnt, kannst du folgenden Beispiel einsetzen:

<style>
#sqrnav {
 position: fixed;
 top: 0px;
 width: 100%;
 z-index:300;
}
#sqrtop {
 margin: 100px 0px 0px 0px;
}
</style>

Damit schiebst du den Inhalt um 100px nach unten, den du dir selber bei margin am besten anpassen kannst. Ersetze die 100px so dass es passt.

<style>
#sqrnav {
position: fixed;
top: 0px;
width: 100%;
z-index:300;
}
#sqrtop {
margin: 100px 0px 0px 0px;
}
</style>

problem bei mir ist: navigation ist unterhalb des logobereichs, wenn ich den obigen code einsetze verschiebt sich navigation nach oben oberhalb des logobereichs auch wenn ich nicht skrolle, wenn ich dann skrolle ist navigation fixiert , aber wie gesagt verschiebt sich navigaion immer nach oben

Dachte, dass hättest du so wollen, dass eben die Navigation oben fixiert ist.
Nun, jetzt fehlt mir die Zeit, schau mir mal das nochmal an, wenn ich Zeit habe, Schönen Tag.

normal ist: logobereich oben, navigation daruner

wenn navigation fixiert, müsste zuerst 1. logbereich verschwinden und dann navigation nach oben verschoben und dann fixiert werden

wenn logoberich und navigation fixiert wird muss nicht verschoben werden, da passt der code ohne probleme

Tanja,

mit dem Code #sqrtop .... wird doch auch das Logo fixiert.

Ich verstehe jetzt nicht wieso, weshalb und warum ihr (DU) jetzt in der #sqrnav rumdoktert?

Lest euch doch mal einwenig in CSS ein, speziel position Sticky, Header, Nav und Logo fixieren komplett.

Mensch, so schwer ist das doch nun wirklich nicht.

Möchtest du, dass die Navigation als solches OHNE Logo fixiert wird, oder doch Beides? Aber dieses hin und her?

Ich halte mich jetzt daraus! Grüße Data!

Du nimmst den folgenden Sticky-Code von Data für den Oberen Bereich und nimmst als Top-Wert die Höhe Deines Logos als Minuswert. Wenn noch was anderes z.B. Kontaktzeile usw. verwendet wird, dann muss der Minuswert entsprechend angepasst werden.
Beispiel wenn das Logo 240px hoch ist:

<style>
#sqrtop { 
 position: sticky;
 position: -webkit-sticky;
 top: -240px; /* required */
 z-index:300;
 width: 100%;
 margin: 0 auto; 
}
</style>

Hallo Data,

grundsätzlich herzlichen Dank für die sehr gute Hilfestellung hier im Forum, 

#sqrtop in html-Eigenschaften funtkioniert optimal,

ich habe dann nur festgestellt, dass doch zu viel Platz verloren geht, daher habe ich mir gedacht, ob es möglich wäre nur die Navigation zu fixieren, daher die Zusatzfrage meinerseits.

bei #sqrnav wird Navigation auch fixiert, jedoch bleibt der Logobereich auch sichtbar und wird unterhalb der Navigation verschoben, das ist das letzte bestehende Problem,

also kurz: beide codes fixieren Logobreich und Navigation, bei #sqrnav sollte logobereich verschwinden (wird fälschlicherweise nur unterhalb Navigatio verschoben)

mit meinen nicht vorhandenen Programmier.Kennnissen habe ich mir gedacht es müsste doch Zuzatzbefehl bestehen, der a) entwede den zu fixierenden Bereich mit Hoch- und Tief-Angaben an Pixel exakt definert (also den Navigatiosnbereich als zu fixierenden Bereich exakt festlegt) oder b) Zusatzbefehl, der Logobeeich nach Scrollen ausblendet (aber eben Navigationsbereich bestehen lässt).

viele Grüsse

Tanja

Siehe Beitrag #25

super vielen dank, jetzt hab ichs begriffen

nochmals danke an alle

tanja

<style>
#sqrnav {
 position: sticky;
 top: 0px;
 width: 100%;
z-index: Zahlengröße ausprobieren - 1 bis unendlich;
}
</style>

 Grüße Data

Upps, habe gerade gesehen, dass ich oben #12 schon das z-index erwähnte.