Balken in kompletter Seitenbreite zwischen 2 Textfeldern einbauen

Antworten
#1
20.06.2018 14:50
avatar  Sigi
#1
Si
Sigi

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
avatar  Andre Konrad
#2
avatar
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
avatar  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
avatar  Andre Konrad
#4
avatar
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
avatar  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)
avatar  az_
#6
avatar
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


 Antworten

 Beitrag melden
#7
05.07.2018 09:24
avatar  Sigi
#7
Si
Sigi

Auch eine gute Lösung.

Vielen Dank noch einmal.


 Antworten

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

 

Spenden über PayPal

Ein Forum zu betreiben, erfordert ein hohes Maß an Zeit, Kraft und Aufmerksamkeit. 

Das Team von Jimdo-Forum arbeitet hinter den Kulissen sehr engagiert daran,
die erforderlichen Aufgaben zu erfüllen, um dir und den
anderen Forenmitgliedern ein tolles Forenerlebnis zu ermöglichen.

 Wir freuen uns, dass du dich dazu entschlossen hast, unser Forum mit deiner Spende zu unterstützen!

...hier ist der direkte Spendenlink
für unsere Kaffeekasse!