Hallo Leute,

erst einmal großes Kompliment. Was man hier sieht, macht wirklich einen guten Eindruck.

Nun zu meiner Frage:
Ich wurde mit der Bearbeitung einer Website für unser kleines Unternehmen beauftragt und musst jetzt feststellen, dass der durchgängig weiße Hintergrund dann doch nicht wirklich hochwertig aussieht. Durch die Suchfunktion bin ich auf die Möglichkeit gestoßen, Bilder auf die ganze Breite zu legen oder einen farbigen Balken hinter Texten oder Bildern (ebenfalls komplette Breite) einblenden zu lassen. Das macht in meinen Augen wirklich etwas her, die Frage ist nur, ob man so etwas auch mit absolut null Programierkentnissen hinbekommt. Der Balken hinter den Text würde mir persönlich schon reichen, da der Rest wahrscheinlich zu anspruchsvoll sein wird.

Aber gibt es die Balken-Option auch für Beginner oder benötigt man hierzu gewisse Fähigkeiten?

Vielen Dank schon einmal für Eure Antworten

Freundliche Grüße

Hier ein Tutorial direkt von Jimdo:
https://support.jimdo.com/faq/how-to-make-sections-of-a-web-page-with-full-width-backgrounds/

Erst einmal vielen Dank!

Auf die Gefahr hin, dass sich hier gleich alle mit der flachen Hand an die Stirn schlagen, möchte ich jedoch nochmals kurz nachfragen.

Ich habe die Spalte, welche hinterlegt werden soll, markiert. Habe mir im Anschluss diesen Code der Spalte rauskopiert, mir eine Farbe im Editor ausgesucht und dann die beiden Codes, welche in der Anleitung angeführt werden, untereinander in den Head-Bereich kopiert.
Scheinbar war dies aber nicht so ganz erfolgreich, da sich auf der Startseite nichts getan hat

Erkennt hier zufällig jemand (den wahrscheinlich völlig dämlichen) Fehler? Der Code wäre:


<script type="text/javascript">

//<![CDATA[

$(document).ready(function() {



/* This is the Columns Element that we are converting - identify it here */

$( "#cc-m-11756100899" ).wrap( "<div id='section1' />" );



});



//]]>

</script>

<style type="text/css">

/*<![CDATA[*/



/* This code prevents side-scrolling */

body { overflow-x: hidden;}

.jtpl-main {overflow-x:hidden;}



/* This is a fullwidth section - add your comment to describe it */

#section1 {

width: 100vw;

position: relative;

left: 50%;

right: 50%;

margin-left: -50vw;

margin-right: -50vw;

background: #333333;

}



/*]]>*/

</style>

Auf die schnelle fallen mir nur 3 Sachen ein.

1. du solltest mal den Browser Cache leeren

3. hast du auch das kopiert?:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"> </script>
 

Siehe "Step 4: Add the JavaScript"

2. vielleicht stimmt #cc-m-11756100899 nicht

Tausend Dank!!! Es hat tatsächlich funktioniert!

Eine Frage: Muss ich mich pro Seite zwischen Bild und Balken entscheiden? Ich habe auf der Homepage der Seite zunächst einmal eine Spalte per grauem Hintergrund hinterlegt. Weiter unten wollte ich nochmals ein Bild über die gesammte Breite einfügen. Ich habe also wieder eine Spalte angelegt und bin nach der Anleitung verfahren. Das hat in diesem Bereich prinzipiell auch gut funktioniert, leider hat es aber den grauen Balken von oben direkt mitüberschrieben, sodass das Bild nun wuasi zweimal auftaucht. Hättest du dafür zufälligerweise auch noch eine Lösung?

Aber nochmals vielen Dank!


Edit: Bei mehreren farbigen Balken geht es problemlos

Das geht natürlich auch, steht aber auch alles im Tutorial.
Ich hab dir den Abschnitt mal rauskopiert:

Zitat

---

Placing multiple sections on one page
If you want to use several sections on your page, you will need to add a bit more code.

In the JavaScript section, duplicate this line but make sure that the id is replaced for each one and that you change the word 'section1' to be 'section2' and so forth:

$( "#cc-m-12285023130" ).wrap( "<div id='section1' />" );

In the CSS section, paste in additional CSS blocks, making sure to update section1 with section2 or section3 as needed.

Here's what the code looks like for http://brentfullwidth.jimdo.com/ which uses three full-width sections, one of each type:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {

$( "#cc-m-12219240478" ).wrap( "<div id='section1' />" );
$( "#cc-m-12219243378" ).wrap( "<div id='section2' />" );
$( "#cc-m-12219244778" ).wrap( "<div id='section3' />" );

});

//]]>
</script>

<style type="text/css">
/*<![CDATA[*/


/* This code prevents side-scrolling */
body { overflow-x: hidden;}
.jtpl-main {overflow-x:hidden;}

/* This is the first fullwidth section */
#section1 {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: #c7b69f;
}

/* This is the second fullwidth section */
#section2 {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: url("http://brentfullwidth.jimdo.com/app/download/12219261678/coffee-beans-crop.jpg?t=1435355036") no-repeat center center;
}

/* This is the third fullwidth section */
#section3 {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: url("http://brentfullwidth.jimdo.com/app/download/12231987478/bridget_light.jpg?t=1435614528") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

/*]]>*/
</style>

---

Nochmals ein unfassbar großes Dankeschön!!! Ist mit Sicherheit nicht selbstverständlich, sich für fremde Menschen so viel Zeit zu nehmen.

Auch wenn ich es fast schon ein wenig unhöflich finde, hätte ich jedoch noch eine letzte Frage.

Ich habe viel Spalten untereinander. Links jeweils Text, rechts jeweils ein passendes Motiv dazu. Wenn ich zwei der Spalten jetzt jedoch farblich hinterlege, zieht sich das Textfeld bis an den Rand. auch die Überschrift darüber verrutscht leider richtung Rand. Hättest du zufälligerweise dafür auch noch eine Lösung? Dann wäre die Seite endlich perfekt

Ganz liebe Grüße

Da müsste man sich die Seite mal angucken können um zu wissen woran es liegt.