Guten Abend zusammen!

Ich habe folgendes Jimdo-Tutorial umgesetzt, das auch soweit funktioniert: How to make sections of a web page with full-width backgrounds

Allerdings zieht sich mittlerweile der Spalten-Inhalt (Text, Bilder) über die gesamte Fensterbreite, anstatt eine feste durchgehende Breite zu haben, wie es wohl bei der damaligen Tutorialerstellung der Fall war.
Ich möchte also wissen, wie ich nun meinen Spalten-Inhalt in einer festen Größe (z.B. 1100px) zentriert in der responsive Section unterbringe.

Ich hoffe mein Gestammel ist halbwegs verständlich. :)

LG
Milchkanne


Nachtrag:
Um es vielleicht etwas verständlicher zu machen: In der responsive Section sollen zentriert in einer festen Breite von 1100px 2 oder 3 Spalten-Elemente rein, die ich mit Text bzw. Links füllen kann.

Ja, gerne! Danke, dass du dir mein Problem anschaust.
Die Webseite: www.fabiennebethke.de

Es geht um den beigen Balken, den ich in die unten liegende Sidebar eingefügt habe. Wie im Tutorial beschrieben, habe ich ein normales Spaltenelement erstellt und dann den Code im Header eingegeben. Leider zieht er wie gesagt alles über die gesamte Breite – auch den Text. Habe versucht mir Abhilfe zu schaffen, indem ich mehrere Spalten eingefügt habe, aber beim bearbeiten sieht es sehr zerschossen aus. (siehe Screenshot) Deshalb habe ich den Text erst einmal gelöscht, da ich die Seite ungern in den Wartungsmodus bringen möchte.


LG Milchkanne


PS: Beim betrachten der Webseite fällt auch der unschöne abgehackte Hover-Effekt bei den Bildern auf. Vielleicht hat da jemand eine Idee, was ich falsch im Header eingefügt habe? Problem: Beim wegnehmen des Mauszeigers wird die Opacity abrupt wieder erhöht, obwohl es langsam (wie am Anfang) passieren soll.

img:hover {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
    transition: opacity .50s ease-in-out;
   -moz-transition: opacity .50s ease-in-out;
   -webkit-transition: opacity .50s ease-in-out;
}
 
 

Hat keiner eine Idee? :)

Hallo Milchkanne

Was Du vor hast, lässt sich über folgendes Script realisieren:

<style type="text/css">
/*<![CDATA[*/
 
#cc-m-17129358625{
    width: 99.5vw;
    left: calc(-50vw + 50%);
    position:relative;
    background:#f6f5f3;/*deine Hintergrundfarbe*/
}
#cc-m-17129358625 p{
    padding:50px 200px 10px 200px!important;/*Abstand: oben, rechts, unten, links*/
}
 
/*]]>*/
</style>
 

Hier wird dein Transitions-Problem ganz gut erklärt (allerdings auf Englisch): https://stackoverflow.com/questions/10565587/css-transition-opacity-on-mouse-out

Gruß,
Andre

Guten Abend Andre!

Ich danke dir herzlichst, denn es funzt jetzt und ich kann die Werte eingeben. Super! :) Ein bisschen noobiges herumbasteln und Buchstabenschubsen war natürlich noch dabei. Ich hoffe, dass Jimdo bald etwas eigenes anbietet. Mein Header sieht mittlerweile aus wie ein Schlachtfeld...
Wo wir dann beim Transitions-Problem sind: das klappt nämlich nicht. Zumindest verstehe ich die Antwort nicht genau. So sieht mein Code gerade aus:

<div class="img">
 
.img {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
    transition: opacity .50s ease-in-out;
   -moz-transition: opacity .50s ease-in-out;
   -webkit-transition: opacity .50s ease-in-out;
}
 
img:hover {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
    transition: opacity .50s ease-in-out;
   -moz-transition: opacity .50s ease-in-out;
   -webkit-transition: opacity .50s ease-in-out;
}
 
</div>
 

Ich habe es so verstanden, dass ich noch eine Klasse(?) vergeben muss. Deshalb habe ich ".img" und das "</div" hinzugefügt, wie ich es aus der Antwort herauslesen konnte. Scheinbar mach ich immer noch was falsch, denn weder Safari, Firefox noch Chrome zeigen einen schönen Mouse-out an.

Vielen Dank nochmal für die Hilfe!

LG
Milchkanne

Super, das freut mich!

Eigentlich kannst Du die relevanten Code-Schnipsel 1zu1 übernehmen, sieht dann ganz nett aus:

<style type="text/css">
/*<![CDATA[*/
 
.img{
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
 
.img:hover {
  filter: alpha(opacity=50);
  opacity: 0.5;
}
/*]]>*/
</style>
 

Gruß,
Andre

Moin Moin!
Ich schon wieder ohne erfreuliche Meldung.

Leider funktionieren deine Schnipsel nicht. Weder die Opacity, noch ein On-Mouse-Over werden ausgelöst.
Habe auch den Code von der Seite 1zu1 eingesetzt (natürlich ".item" durch ".img" ersetzt und <style>+</style> drumherum), welcher ebenfalls gar keine Änderung bringt.
Erst als ich:

   -moz-transition: opacity .50s ease-in-out;
   -webkit-transition: opacity .50s ease-in-out;
   -ms-transition: opacity .50s ease-in-out;
   -o-transition: opacity .50s ease-in-out;
 

an deinen ".img: hover" -Schnipsel angefügt habe, hat es wieder den bisherigen Effekt gezeigt. Aber immer noch mit abrupten on-mouse-out. Bringt es etwas meinen gesamten Header als Code zu zeigen? Ob da etwas meinen Hover zerschießt? So sieht es jedenfalls gerade aus:

<style type="text/css">
/*<![CDATA[*/
 
.img {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
    transition: opacity .50s ease-in-out;
   -moz-transition: opacity .50s ease-in-out;
   -webkit-transition: opacity .50s ease-in-out;
   -ms-transition: opacity .50s ease-in-out;
   -o-transition: opacity .50s ease-in-out;
}
 
img:hover {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
   -moz-transition: opacity .50s ease-in-out;
   -webkit-transition: opacity .50s ease-in-out;
   -ms-transition: opacity .50s ease-in-out;
   -o-transition: opacity .50s ease-in-out;
}
/*]]>*/
</style>
 

LG
Milchkanne

Uh, DANG! Ich hatte den Punkt vor ".img hover" vergessen, aber blöderweise führt das wieder dazu, dass gar kein Effekt entsteht. Was zum Henker...? Ich hab Webdesigner und Coder noch nie verstanden, wie man solche Arbeit zum Berufswunsch machen kann. *kopschüttel*

Haha, wegen sowas hab ich mich auch schon doof und dämlich gesucht!

Super, dass es jetzt funktioniert!

Neee, es klappt eben nicht!
Sobald ich den Punkt vor "img: hover" setze, macht er gar nichts mehr: weder eine weiche Animation bei on-mouse-out, noch eine Transparenz.
Nun habe ich erst einmal eine einfache Opacity-Einstellung drin ohne Transition. Damit wird beim Hover wenigstens eine konsistente Transparenz angezeigt. Man beachte, dass auch hier kein Punkt vor "img" steht, denn mit einem Punkt davor, wird nichts ausgelöst. Könnte heulen!

<style type="text/css">
/*<![CDATA[*/
img:hover {
    opacity: 0.85;
    filter: alpha(opacity=85); /* For IE8 and earlier */
}
/*]]>*/
</style>
 

Achsoooo :-/

Ich habe das Script 1zu1 so bei mir eingesetzt und es funktioniert. Wenn deine Klasse "img" heisst, muss das funktionieren. Es sei denn, Du hast sonst noch etwas im Head, was dem irgendwie widerspricht. Hast Du den alten Code denn gelöscht, bevor Du meinen eingefügt hast? Am besten mal, auf einer neuen Unterseite versuchen.

VG

Ich habe das Bild bei mir übrigens mithilfe der Div-ID (cc-m-.....) angesprochen, nicht über eine Klasse (.img etc).

Super, dieser Code funktioniert! Danke euch beiden für eure Hilfe! :)
Ich hatte übrigens gestern meinen Headerbereich von einem Bekannten durchschauen lassen, der mich darauf hinwies, dass mein CSS ÜBER dem Javascript stehen sollte. Er hat es dann ausgebessert und den Header verschlankt, weil ich sehr wüst Codes reinkopiert hatte.
Könnte also sein, dass dies ebenfalls zu Problemen geführt hat.

Viele Grüße
Milchkanne