Balken in kompletter Seitenbreite zwischen 2 Textfeldern einbauen

20.06.2018 14:50

Sigi
#1

Si

Hallo,

ich möchte einen Balken in 50 px Höhe zwischen 2 Textfeldern einbauen. Der Balken soll über die komplette Breite der Seite gehen und einen Farbton zugewiesen bekommen.

Was gibt es da für eine Lösung?

Viele Grüße,
Sigi

Antworten

Beitrag melden

#2

20.06.2018 22:11

Andre Konrad
#2

Andre Konrad

Hallo Sigi,

Zunächst müsstest Du (am besten in Chrome) über einen Rechtsklick den Punkt "untersuchen" wählen. Daraufhin öffnet sich eine Ansicht, in der Du die ID des anzusteuernden Elements auslesen kannst (sieht etwa so aus: "cc-m-123456789"). Diese ID kopierst Du, ersetzt diese in folgendem Code und speicherst diesen anschließend in deinem Head:

1
2
3
4
5
6
7
8
9
10
11
 
<style type="text/css">
/*<![CDATA[*/
 
#cc_m_123456789{
background-color: #3366ff;/*die Farbe deiner Wahl*/
margin: 0 -500%;
padding: 0 500% !important;
}
 
/*]]>*/
</style>
 

Gruß,
Andre

Antworten

Beitrag melden

#3

21.06.2018 07:53

Sigi
#3

Si

Sigi

Soweit verständlich. Nur wie erstelle ich das Element? Ist es ein leeres Textfeld, oder ein leeres "Widget/HTML"?

Antworten

Beitrag melden

#4

21.06.2018 21:32

Andre Konrad
#4

Andre Konrad

Würde ein Abstandselement nehmen, da du da gleich die px-Höhe einstellen kannst.

Antworten

Beitrag melden

#5

22.06.2018 08:28

Sigi
#5

Si

Sigi

Funktioniert super. Obwohl ich mit Chrome das Element nicht finden konnte. Habe mich für Firefox Developer Edition entschieden. Einmal auf "Extras" --> "Web-Entwickler" --> "Inspektor" klicken und schon klappt das suchen.

Ach ja, eine Sache ist noch irgendwie doof. Ist der Code im Head eingearbeitet, kann man das Abstandselement nicht mehr richtig bearbeiten. Man kann zwar die Höhe noch einstellen, aber es fehlen die Schaltflächen für das Speichern. Auch fehlt die Schaltfläche für das komplette Löschen des Elements. Also zuerst wieder den Code raus nehmen. Dann läßt sich das Element wieder bearbeiten. Etwas mühsam.

Antworten

Beitrag melden

#6

04.07.2018 09:25 (zuletzt bearbeitet: 04.07.2018 10:52)

az_
#6

az_

...das könntest Du über ein jQuery-Script lösen, welches dem Element eine Klasse mit dem fullwiidth-code zuweist:

CSS:

1
2
3
4
5
6
 
.fullwidth{
    background-color: red !important;/*die Farbe deiner Wahl*/
    margin: 20px -500% !important;
    padding: 0 500% !important;
    width:100vw;
}
 

html (...automatisch durch Jimdo):

1
2
3
4
 
<div id="cc-m-10356937923" class="j-module n j-spacing ">
    <div class="cc-m-spacer" style="height: 30px;">
    
</div>
 

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

 
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
        $('#cc-m-10356937323 .cc-m-spacer').addClass('fullwidth');
});
 
//]]>
</script>
 

 

LG, az

Beispiel: https://designtest-melbourne.jimdo.com/test

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