Abstände / Ränder der Bereiche einstellbar?

Walter

Hallo!

Bin nun dabei meine erste richtige Seite im Grundaufbau vorzubereiten und zu testen.

Ich habe mich für die Vorlage "Modern Responsive" entschieden weil ich in der fertigen Version teils mehrtufige Untermenüs brauche die dann auch auf der Seite möglichst übersichtlich und leicht auswählbar sichtbar sein sollen.

Problem:
Die einzelnen Bereiche haben teils große - im meinem Fall - sehr störende Abstände. Mir geht es dabei um die Höhenabstände.
Insbesondere stören die Höhenabstände der Bereiche Kopf, Kopfgrafik und Hauptmenü.

Wie kann ich diese Höhenabstände bzw. Bereichsränder verkleinern/selbst einstellen?

Screenshot Beispiel:

Den Bereich Kopfgrafik habe ich gelöscht um Höhe zu sparen. Hatte davor vergeblich versucht den Bereich Kopfgrafik auf eine schmale Zeile zu verkleinern. Das wäre aber ein extra Thema, das ich wenn nötig später neu schreibe.

Ziel ist, die Höhenabstände/Ränder zwischen Kopf und Hauptmenü, sowie den extrem hohen Abstand zwischen Hauptmenü und Navigationspfad (Sie befinden sich hier:) deutlich zu minimieren bzw. auf fast null zu stellen.

Freudlicher Gruß
Walter

Steffen T.

Hallo Walter,

im Layout "Modern Responsive" ist das Logo ja links vom Hauptmenü. In Deinem Screenshot ist das jedoch oberhalb des Hauptmenüs. Soll das so ein und wie hast Du das eingefügt?

Die Höhe des Topline-Bereichs (Logo, Hauptmenü, Suchfeld) ist abhängig von der Höhe des Logos. Das kannst Du also im Layout-Designer unter Logo beeinflussen.

Der Abstand zwischen Hauptmenü und Navigationspfad kann nicht über den Layout-Designer beeinflusst werden. Da muss das CSS überschrieben werden. Zum Beispiel so:

Menü „Website | Erweitert | Attribute“ öffnen.
Das Attribut „mobile_script“ zum Bearbeiten öffnen.
Wie man mit Attributen arbeitet, kann in der Online-Doku nachgelesen werden: http://homepage-erstellen-mit-desktop-cms.zeta-producer.com/attribute.html
In das Attribut folgendes einfügen:
CSS
```
<style>
.contentcontainer {
	margin-top: 10px !important;
}
</style>
```
Die Werte des CSS können natürlich noch angepasst werden.
Danach die Website neu erstellen

Walter

Hallo Herr T.!

Danke, das sieht schon viel besser aus!

Habe das Vorlagen-Logo durch ein kleineres (40x40) eigenes ausgetauscht und im Layout-Logo die Größe auf 40x40 geändert.
Zusätzlich auf "Logo nicht anzeigen" geändert, damit die Menüzeile großteils für Menüpunkte frei ist.

Zu Ihrer Frage "im Layout "Modern Responsive" ist das Logo ja links vom Hauptmenü. In Deinem Screenshot ist das jedoch oberhalb des Hauptmenüs. Soll das so ein und wie hast Du das eingefügt?":
Mit "Einfügen: an" (Zeta-Schaltfläche rechts oben) konnte ich über dem Bereich "Logo/Hauptmenü/Suchfeld" einen darüber gestellten Neuen Bereich einfügen. --> Wie heißt dieser Bereich in den Layouteinstellungen?
Das sichtbare Logo und der Text dazu sind zwei Grafiken die ich in diesen ... (darüber eingefügten) Bereich als zentrierten Textbaustein der die beiden Grafiken enthält als Zeta-Artikel eingefügt habe.

Nach einigen Versuchen gelang es auch das Menü und das Suchfeld auf eine Höhe (Linie) zu bringen.

Ist weitere Verringerung der Abstände möglich?
Dazu hier neuer Schreenshot Auszug:

Kann der Höhenabstand vor und nach dem Bereich "(Logo)+Hauptmenü+Suche" noch mehr verringert werden?

Link zur Testseite: http://www.bi-mo.at/bi/index.html

Wenn möglich würde ich auch gern den Rand im Bereich Navigationspfad verkleinern.

Freundlicher Gruß
Walter

Steffen T.

Hallo,

der Bereich, wo Sie das Logo eingefügt haben, nennt sich "Banner". Den Abstand hier können Sie ebenfalls über CSS anpassen. Dazu einfach den Style-Code wie oben beschrieben erweitern mit:

CSS

#banner {
	padding: 0 !important;
}

Im Prinzip können Sie so die meisten Bereich manuell anpassen. Ich möchte aber darauf hinweisen, dass dies zwar funktioniert, aber kein offizielles Feature von Zeta Producer ist. Soll heißen, Sie sind hier selbst für die Funktionalität verantwortlich. Ich kann Ihnen leider auch nicht bei jedem einzelnen Bereich den passenden CSS-Code liefern. Sie müssten sich hier also selbst mal mit dem Thema HTML/CSS beschäftigen.

Mit Hilfe der sog. Developer-Tools in den modernen Browsern können Sie herausfinden, welche IDs oder CSS-Klassen die Bereiche verwenden und auch welche Werte (Styles) diese verwenden. Wie in den Beispielen oben können Sie diese dann entsprechend anpassen. Die Developer-Tools können Sie in den meisten Browsern mit F12 aufrufen.

Walter

Hallo Herr T.,

danke für die Information und den Lösungsvorschlag!

Den unteren Abstand konnte ich noch selbst verkleinern und der obere "Banner" Abstand ist dank Ihrem Vorschlag nun auch OK.

Mein Style Eintrag sieht nun so aus:

Das Ergebnis:

Danke für Ihre Hilfe!

Freundlicher Gruß
Walter

Abstände / Ränder der Bereiche einstellbar?

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?