Jimdo Zürich Header + Spalteninhalte + Navigationsleiste

Antworten
#1
19.02.2021 20:42 (zuletzt bearbeitet: 20.02.2021 15:58)
avatar  Philoo
#1
Ph
Philoo

Hallo liebe Jimdo-Community,

zunächst einmal möchte ich ein großes Lob an die Seite aussprechen! Ein wirklich tolles Forum, das mir schon gewaltig bei dem Aufbau der Homepage geholfen hat - vielen Dank!
Leider werde ich des Öfteren noch vor Probleme gestellt, die ich nicht zu bewältigen weiß. Vielleicht könnt ihr mir ja helfen.

Es geht um folgende Seite, die mit dem Creator Business aufgebaut wird: httpss://dbsreck.jimdofree.com

Problem 1:
Das Bild im Header ist für meinen Geschmack noch zu groß, ich würde gerne die Höhe verändern. Folgenden CSS-Code habe ich eingefügt (allerdings verändert sich, wenn ich die Werte ändere, gar nichts):

COPYRIGHTVERLETZUNG

Problem 2:
Ich habe im mittleren Bereich der Homepage einen Spalten Inhalt mit wechselnden Bildern und Buttons eingefügt. Da mir die Buttons bei Jimdo nicht so zusagen und alle immer dieselbe Farbe haben, haben ich Buttons als Bilder erstellt. So weit so gut. Leider ist es so, dass wenn man die Seite auf einem Mobilgerät aufruft, alles untereinander dargestellt wird und nicht nebeneinander wie auf der Seite auf einem großen Bildschirm. Wie kann man es ändern, das der gesamte Spalten-Inhalt verkleinert auf einem Handy dargestellt wird?

Problem 3:
Ich würde gerne den Navigationsbereich verbreitern, da der letzte Navigationspunkt (Archiv) in die zweite Zeile rutscht.

Ich würde mich freuen, wenn jemand weiß, wie man die Probleme beheben kann.

Beste Grüße und ein schönes Wochenende.

Der Verfasser wurde 20.02.2021 16:00 von az_ für den Inhalt dieses Beitrags verwarnt.
Nachricht: Bitte keinen Code posten, der geschützt ist! Bitte statt dessen die URL der Webseite posten - dann kann der Code aus dem Quelltext gelesen werden
Verwarnung ausgesprochen

 Antworten

 Beitrag melden
#2
20.02.2021 15:57
avatar  az_
#2
avatar
az_

...bitte immer Code als Code darstellen! dafür gibt es extra die Schaltfläche <> oben rechts. Bitte immer das Copyright beachten! Copyright geschützten Code hier bitte nicht posten!

Tipp: installier Dir einen html-editor, der Dir Deine Fehler im Code farbig darstellt (Brackets oder Notepad++)


LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#3
20.02.2021 18:34 (zuletzt bearbeitet: 20.02.2021 20:50)
avatar  Philoo
#3
Ph
Philoo

Hallo, oh das wusste ich nicht, Entschuldigung.

Problem 1 habe ich jetzt lösen können mit dem Code

1
2
3
4
5
6
 
<style type="text/css">
/*<![CDATA[*/
.jtpl-header {
    min-height: 200px;
/*]]>*/
</style>
 



Problem 2 (breitere Navigationsleiste) habe ich ebenfalls hinbekommen.

Allerdings bekomme ich es nicht hin, dass der Inhalt eines Spalten-Tools (3 Spalten insgesamt) in der Ansicht auf einem Handy nebeneinander dargestellt wird. Hier wird jede Spalte untereinander aufgelistet. Wie lässt sich das ändern?

Beste Grüße.


 Antworten

 Beitrag melden
#4
22.02.2021 16:54 (zuletzt bearbeitet: 24.02.2021 11:06)
avatar  az_
#4
avatar
az_

Der Trick ist: du musst für die Spalte float: left setzen und min-width: 1px
LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#5
22.02.2021 19:56 (zuletzt bearbeitet: 22.02.2021 20:00)
avatar  Philoo
#5
Ph
Philoo

Vielen Dank für die Antwort.
Ich habe mit Hilfe folgenden Codes es jetzt geschafft, die Spalten auf der Seite dbsreck.jimdofree.com nebeneinander darzustellen (kleiner Bildschirm).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<style type="text/css">
/*<![CDATA[*/ 
@media (max-width: 767px) {
    .cc-m-hgrid-column {
        min-width: 0 !important;
        padding: 0 !important;
        width: 33% !important;
        float: left !important;
        /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/ 
@media (min-width:1024px) {
    .content-options .j-calltoaction-link-style-1:link, 
    .content-options .j-calltoaction-link-style-1:visited {
        font-size: 20px;
        min-width:240px;
      /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/ 
.content-options .j-calltoaction-link-style-1:link, 
.content-options .j-calltoaction-link-style-1:visited {
    font-size: 16px;
    min-width: 150px;
          /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/ 
.j-meta-links {
    float: none;
    margin: 0 auto;
     /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/ 
.j-info-row, .j-meta-links {
    text-align: center;
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/ 
 #content_area {
animation:fadein 1s;
-moz-animation:fadein 1s;
-webkit-animation:fadein 1s;
 /*]]>*/
</style>
 

 




Es ist zwar noch nicht ganz so, wie ich es haben will, aber schon mal besser. Meinst du float und min-width bei @media (max-width: 767px)?
Ich hätte gerne die Slider-Galerie (1. Spalte) größer dargestellt und die Buttons und Abbildungen (2. und 3. Spalte etwas kleiner). Momentan sind alle Spalten gleichgroß.
Ich bin leider mit den CSS-Codes noch nicht so bewandert und versuche es mir momentan etwas näher zu bringen. Leider gestaltet sich für mich das Ganze noch mehr als kompliziert.

Daher bin ich über jede Hilfe sehr dankbar.

VG


 Antworten

 Beitrag melden
#6
24.02.2021 11:32
avatar  az_
#6
avatar
az_

sorry, ich hatte mich verschrieben: float muss natürlich left sein, damit die Spalten nebeneinander erscheinen.

Ein anderer Trick wäre dieser hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!