Rahmen für Sidebar/Textfelder

  • Seite 1 von 2
13.11.2015 08:53
avatar  otto
#1
ot

Hallo!
Bin nicht unbedingt ein erfahrener Jimdo Website Betreiber. Versuche immer mal etwas auzuprobieren... learning by doing.
Meine Fragen wären:
1. Wie kann ich um eine Sidebar einen Rahmen erstellen?
2. Wie kann ich um Textfelder einen Rahmen erstellen?
3. Wie kann ich um Textfelder mit Bild einen Rahmen erstellen?
Ich bin leider keine Erfahrungen im HTML programmieren. Vielleicht hat hier ja jemand einen Tip für mich?
Danke schon mal im Vorraus....


 Antworten

 Beitrag melden
13.11.2015 11:24
#2
avatar
Bevor ich studiert habe, war mir alles egal, jetzt ist es irrelevant.

 Antworten

 Beitrag melden
13.11.2015 13:07 (zuletzt bearbeitet: 13.11.2015 13:14)
avatar  az_
#3
avatar
az_

...das ist eine Möglichkeit, die bei Textfeldern funktioniert. Für Bilder ist es etwas komplizierter, da geht es nur über ein CSS-Skript.

Du kannst den inline-Style-Code

1
 
 style="background-color: #0389d1; border: #dddddd 1px solid; padding: 8px; border-radius: 6px 6px 6px 6px;"
 

bei einem Bild nirgens einfügen, denn für Bilder gibt es keinen html-Editor.

Also setzt Du unter "Einstellungen > Head bearbeiten" folgenden Code ein:

1
2
3
4
5
6
7
 
<style>
.ownbg {
background-color: #0389d1;
border: #dddddd 1px solid; padding: 8px;
border-radius: 6px 6px 6px 6px;
}
</style>
 



Damit hast Du Dir eine sog. "CSS-Klasse" erstellt. Diese kannst Du so wie sie ist in Textfeldern benutzen: Du schreibst jetzt im Textfeld html

<div class="ownbg"> vor den html-Code.

Willst Du ein Bild mit dem Rahmen versehen, ergänzt Du einfach das CSS-Skript mit der ID oder der Klasse des Bildes und einem "img" für "Bild" z.B.:

1
2
3
4
5
6
7
8
 
<style>
.ownbg,
#cc-m-5976376564 img {
border: #dddddd 1px solid;
padding: 8px;
border-radius: 6px;
}
</style>
 




...das "#cc-m-5976376564" ist die ID des Containers, in dem sich das Bild befindet.
"#cc-m-5976376564 img" bedeutet also: "gilt für alle Bilder (img) im Container #cc-m-5976376564"

ich hoffe, ich habe das gut genug erklärt. Wenn nicht, schreib noch mal :)

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
13.11.2015 14:52
#4
avatar

Einen Rahmen um ein Bild kann man auch mit Paint machen.

Bevor ich studiert habe, war mir alles egal, jetzt ist es irrelevant.

 Antworten

 Beitrag melden
13.11.2015 21:05
avatar  az_
#5
avatar
az_

:)

...mit CSS ist es aber "sauberer"


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
16.11.2015 08:52
avatar  otto
#6
ot

Hallo !
Danke für die schnelle Info. Rahmen um Textfeld ist kein Problem. Bei Jimdo gibt es ja die Funktion "Textfeld mit Bild". Wenn ich die verwende und versuche dann einen Rahmen um das Textfeld zu setzen, funktioniert das auch, aber das Bild steht über dem Rahmen dann ein wenig hinaus bzw. unterbricht die Rahmenlinie. Wie kann ich das vermeiden?


 Antworten

 Beitrag melden
16.11.2015 10:29
avatar  az_
#7
avatar
az_

Hallo Otto,

...das müsste ich mir mal ansehen. Wo finde ich Deine Seite?

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
16.11.2015 12:30
avatar  otto
#8
ot

gifhorn2003.jimdo.com

Ist eine Manschaffseite für Jugendfussballer. Da stelle ich nach jedem Spiel unter "News" einen Bericht mit Bild/Wappen ein. Ich habe das mit "Rahmen um Text" noch nicht eingearbeitet. Wollte das erst klären ob es funktioniert.
Vielen Dank schon mal.


 Antworten

 Beitrag melden
16.11.2015 13:39 (zuletzt bearbeitet: 16.11.2015 13:43)
avatar  az_
#9
avatar
az_

...möchtest Du den Rahmen um das ganze Element haben oder nur um das Bild? Probier mal folgendes:

1
2
3
4
5
6
 
<style>
.navigation-colors {background-color: transparent; border:none} /*repariert die Navigation*/
 
.j-textWithImage {border:1px solid #ccc; padding:15px !important; border-radius:5px } /*Rahmen um Element*/
.j-textWithImage img {border:1px solid #ccc; padding:15px; border-radius:5px } /*Rahmen um Bild*/
</style>
 





...der Wert für "padding" bestimmt den Abstand zum Rand.

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
16.11.2015 15:43
avatar  otto
#10
ot

Hallo!
Mir reicht ein Rahmen um das Textfeld. Wo soll ich Deinen Vorschlag genau plazieren? Im Headbereich oder im HTML Bereich des betroffenen Textfeldes?


 Antworten

 Beitrag melden
16.11.2015 16:37
avatar  otto
#11
ot

habe es mal probiert und leider nichts passiert. Bin wohl leider zu unerfahren damit.......


 Antworten

 Beitrag melden
18.11.2015 09:24 (zuletzt bearbeitet: 18.11.2015 09:25)
avatar  az_
#12
avatar
az_

...den Code setzt Du unter "Einstellungen > Head bearbeiten" in den Head-Bereich ein. Wenn Dir ein Rahmen um das Textfeld reicht, lässt Du einfach die Anweisung für das img weg.

Gruß, 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
18.11.2015 11:16
avatar  otto
#13
ot

funzt

Vielen Dank für die Hilfe


 Antworten

 Beitrag melden
18.11.2015 16:29 (zuletzt bearbeitet: 18.11.2015 16:30)
avatar  az_
#14
avatar
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
01.12.2015 13:18
avatar  otto
#15
ot

Hallo!
Das mit den Rahmen um Textfelder/Bilder hat wirklich gut funktioniert. Jetzt war noch das Thema mit rahmen um die Sidebar. Wie ist das zu lösen?
Danke schon mal im Vorraus.


 Antworten

 Beitrag melden
01.12.2015 14:17
#16
avatar

1
2
3
4
5
 
#sidebar {
 
border: 1px solid #ccc;
 
}
 

Bevor ich studiert habe, war mir alles egal, jetzt ist es irrelevant.

 Antworten

 Beitrag melden
01.12.2015 14:59
avatar  otto
#17
ot

Danke für die Info. Plazierung auch im Headbereich? Tabe ich probiert. Wird aber beim Speichern ncht nagenommen.


 Antworten

 Beitrag melden
01.12.2015 15:22
#18
avatar

Das musste auch zwischen den vorhandenen <style> tags kopieren, wenn du schon was im head stehen hast.

Bevor ich studiert habe, war mir alles egal, jetzt ist es irrelevant.

 Antworten

 Beitrag melden
01.12.2015 19:23 (zuletzt bearbeitet: 09.12.2015 11:42)
avatar  az_
#19
avatar
az_

...#sidebar ist ok. Die Klasse ".sidebar-options" müsste auch klappen (wenn das der Bereich ist, den Du meinst):



...wenn Du die Klasse mit einem Komma getrennt vor oder hinter Deine CSS-Anweisung stellst, wird Deine Formatierung für die textWithImage-Bereiche auf die Sidebar ausgeweitet.

Beispiel:

1
2
3
4
 

.sidebar-options, .j-textWithImage, .j-textWithImage img
{border:1px solid #ccc; padding:15px; border-radius:5px;}
 
 


oder

1
2
3
4
 

.j-textWithImage, .j-textWithImage img, .sidebar-options
{border:1px solid #ccc; padding:15px; border-radius:5px;}
 
 


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
02.12.2015 10:05
avatar  otto
#20
ot

Hallo!

Das mit den Tipp von CharlieW hat super funktioniert und reicht mir vollkommen aus.

Vielen Dank.


 Antworten

 Beitrag melden
02.12.2015 11:39
avatar  az_
#21
avatar
az_

Super! 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
03.12.2015 12:07
avatar  otto
#22
ot

Hallo!
Mir ist noch eine Sache aufgefallen: Das mit den Rahmen um Textfelder/Sidebar oder auch Text mit Bild hat gut geklappt. Wenn ich jetzt aber bei der Funktion Text mit Bild im Textbereich an beliebiger Stelle ein Bild aus der Zwischenablage ein Bild einfügen möchte, gibt es ein Problem. Im Bearbeitungsmodus ist das Bild zu sehen, wenn ich aber auf speichern gehe und dann auf Ansicht, ist das Bild samt Text verschwunden. Die Textbox mit Rahmen bleibt aber existent. Eine Vermutung woran das liegen könnte?
Danke....


 Antworten

 Beitrag melden
03.12.2015 18:59
avatar  az_
#23
avatar
az_

...du kannst in Jimdo (...wie auch im Web allgemein) keine Bilder aus der Zwischenablage einfügen - es sei denn, das Bild ist irgendwo "online abgelegt". Dieser Pfad muss dann aber auch von der Seite abrufbar sein - soll heißen, nicht alle Pfade werden vom Jimdo-Editor akzeptiert.

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
08.12.2015 12:26
avatar  otto
#24
ot

Ich mal wieder. Das Thema Rahmen lässt mich leider nicht so ganz los.
Frage: Ist es machbar, wenn ich Spalten zufüge darum einen Rahmen zu bekommen? Also um beide Spalten zusammen einen Rahmen?

Danke für Feedback.


 Antworten

 Beitrag melden
09.12.2015 08:05
#25
avatar

Ja, ist machbar.

Bevor ich studiert habe, war mir alles egal, jetzt ist es irrelevant.

 Antworten

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