Seite 1 von 1

[3.2] Div über den ganzen Wrap - geht das?

Verfasst: 14.10.2018 20:37
von Tastenplayer
Hallo

Habe vermutlich eine sehr doofe Frage respektive ich denke es ist unmöglich.

Kann ich einen div über den ganzen Wrap machen? Meine Versuche sind leider alle fehlgeschlagen.
Versuch habe ich in overall_header.html gemacht. Müsste doch diese html Datei sein, oder?
Mein Effekt war leider am Ende des PC Bildschirms zu sehen und nicht über dem ganzen Wrap :D
Schlussendlich habe ich nur eine abgespeckte Version in der css direkt beim Wrap geschafft. [ externes Bild ]:D

Code: Alles auswählen

<div class="box effect8">
Das ist ein spezieller Shadow Border. Wo die div class hin muss - vor dem Wrap denke ich doch. Aber wo muss der Abschluss hin?

CSS

Code: Alles auswählen

* Effect 8
 * ===============================================*/
.effect8 {
	position:relative;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after {
	content:"";
	position:absolute;
	z-index:-1;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	top:10px;
	bottom:10px;
	left:0;
	right:0;
	-moz-border-radius:100px / 10px;
	border-radius:100px / 10px;
}
.effect8:after {
	right:10px;
	left:auto;
	-webkit-transform:skew(8deg) rotate(3deg);
	-moz-transform:skew(8deg) rotate(3deg);
	-ms-transform:skew(8deg) rotate(3deg);
	-o-transform:skew(8deg) rotate(3deg);
	transform:skew(8deg) rotate(3deg);
}
Code ist von hier https://codepen.io/haibnu/pen/FxGsI

Re: [3.2] Div über den ganzen Wrap - geht das?

Verfasst: 14.10.2018 21:27
von Lehrling
Das hier [/div] muss in den overall_footer.html.

Re: [3.2] Div über den ganzen Wrap - geht das?

Verfasst: 14.10.2018 22:04
von Tastenplayer
Lehrling hat geschrieben:Das hier [/div] muss in den overall_footer.html.
Hab jetzt grad ne definitive lange Leitung
Das

Code: Alles auswählen

<div class="box effect8">
muss in overall_header und der Abschluss

Code: Alles auswählen

[/div]
in overall_footer. :-? Aber irgendwie ist es ja auch logisch. Der Wrap geht ja über das ganze Forum.
Na gut versuch ich morgen einfach mal. Aber auf jeden Fall wieder zuerst im Prosilver. Bei mir im Style hat es ja noch andere Sachen, da weiss man nie.

Edit: Es ist eben manchmal ziemlich schwierig, man versucht sich das als Ganzes vorzustellen, aber man denkt es irgendwie nicht bis zum Ende! Irgendwie lässt man sich von den dazwischen liegenden Dateien verwirren. Das war dann wohl auch so, als ich versuchte einen Style von A-Z neu aufzubauen und immer zwei Wrap erhielt :)

Edit: Hat trotzdem bisher nicht geklappt. Es gibt nur links und rechts aussen im Background einen Bogen, trotz

Code: Alles auswählen

[/div]
in overall_footer. :D . Aber klar, ich versuch das weiter.

Im Moment mit neuem Code sieht es langsam immer besser aus. Muss nur noch schauen, dass ich es links noch etwas weiter nach oben hinbekomme . Und klar, auch einmal nachsehen, wie das dann in uralt Browser aussieht. [ externes Bild ]

Code: Alles auswählen

.mytaste_wrap {
	background-color: #CCCCCC;
	background-image: url("./images/wrap.jpg");
	border-radius: 8px;
	margin: -11px auto 20px;
	max-width: 1320px;
	padding: 15px;
	box-shadow: 0 3px 25px #000;
	transition: all 0.7s linear;
	-webkit-transition: all 0.7s linear;
	-moz-transition: all 0.7s linear;
	-o-transition: all 0.7s linear;
	-ms-transition: all 0.7s linear;
}