Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 21
  1. #1
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    Question löse ein einfaches CSS Problem und verdiene 60€

    Hallo Leute,

    Ich habe ein einfaches CSS Problem, der ich nicht lösen kann.
    Wer mir dabei hilft das Problem bis heute Nacht zu lösen, überweise ich 60€.

    Bitte schickt mir einen eMail: bigtail@gmx.de


    Danke

  2. #2
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Wenn Du uns Code oder einen Link bötest, könntest Du bestimmt 60 Euro sparen ...

  3. #3
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Ich habe das Ganze hier hochgeladen:
    CSS3/HTML5 slideshow

    Wie ihr sieht, die Texte verschwinden unter dem blauen Kästchen.
    Ich mochte, dass die Texte auf dem blauen Hintergrund rechts von den Bilder erscheinen.

    Das ist alles. Allerdings die Lösung brauche ich bis heute Nacht!
    Geändert von bigtail (21-10-2012 um 20:36 Uhr)

  4. #4
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Die 60€ zahle ich gerne und zwar an erster, der das Problem Heute Nacht löst, bzw. spendiere ich das Geld, wo der Gewinner möchte.

  5. #5
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Versuch mal das:
    Code:
    .info {
    	line-height: 20px;
    	position: absolute !important;
            z-index:99;
            top:70px; /* musst du ausprobieren */
            left:700px; /* musst du ausprobieren */
    	padding: 30px 0px;
    	opacity: 1;
    	color: #fff;
    	text-align: left;
    	width: 220px;
    }

  6. #6
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Danke, aber damit geht es auch nicht.

  7. #7
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Mit Z-Index glaube ich nicht, dass man das Problem lösen kann, aber vielleicht mit OVERFLOW.

  8. #8
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Leider bislang hat es niemand geschafft eine Lösung zu finden.
    Es scheint also doch schwieriger sein als es aussieht.
    Ich bin allerdings immer noch an einer Lösung interessiert.

    Besten Dank nochmal für eure Hilfe.

  9. #9
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Hallo,

    Mein Angebot steht immer noch. 60€ bekommt wer als erster eine Lösung (ohne JavaScript) findet.

    Besten Dank

  10. #10
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Ich weis zwar nicht warum du es dir sooo komplizirt machst und das ganze auf zwei Ebenen aufbaust, aber ich habe mal etwas modifiziert.
    Was hälst du denn hiervon?
    Code:
    html {
    	background-color: #e4dfd2;
    	background: url(images/background.png);
    	min-height:100%;
    }
    
    body {
    	width: 960px;
    	margin: 10px auto;
    	overflow-x:hidden;
    }
    
    figure { 
    	display: inline-block;
    }
    
    a {
    	text-decoration: none;
    }
    
    #slideshow {
    	position: absolute;
    	width: 940px;
    	height: 306px;
    	background: url(images/slideshow-background.jpg);	!important;
    }
    
    #overflow {
    	width: 100%;	!important;
    	overflow: hidden;
    }
    
    /* Info Box */
    
    .info {
    	line-height: 20px;
    	margin: 0 0 0 660px; /* change from 0 0 0 500px to 0 0 0 660px */
    	position: absolute;	!important;
    	padding: 30px 0px;
    	opacity: 1;
    	color: #fff;
    	text-align: left;
    	width: 220px;
    }
    .info h3 {
    	color: #fff;
    	margin: 15px 0 15px;
    	font-weight: normal;
    	font-size: 22px;
    	font-style: normal;
    }
    
    .readmore {
    	padding: 20px 0px;
    }
    
    #slideshow .commands {
    	position: absolute;
    	top: 45%;
    	padding: 5px 13px;
    	border-bottom:0;
    	font-family: 'Amaranth', Arial, Verdana, sans-serif;
    	font-size: 1.3em;
    	color: #aaa;
    	text-decoration:none;
    	background-color: #eee;
    	background-image: -webkit-linear-gradient(#fff,#ddd);
    	background-image: -moz-linear-gradient(#fff,#ddd);
    	background-image: -ms-linear-gradient(#fff,#ddd);
    	background-image: -o-linear-gradient(#fff,#ddd);
    	background-image: linear-gradient(#fff,#ddd);
    	text-shadow: 0 0 1px #aaa;
    	
    	-webkit-border-radius: 50%;
    	-moz-border-radius: 50%;
    	border-radius: 50%;
    	
    	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }
    #slideshow .commands:after {
    	position: absolute;
    	bottom: 65px; left:-18px;
    	content: attr(title);
    	width: 50px;
    	padding: 12px;
    	background: #fff;
    	font-family: Georgia, Times, serif;
    	font-size: 14px;
    	text-align:center;
    	text-shadow: 0 0 0;
    	opacity: 0;
    	
    	-webkit-border-radius: 12px;
    	-moz-border-radius: 12px;
    	border-radius: 12px;
    	
    	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    	box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    	
    	-webkit-transition: opacity 0.7s, bottom 0.7s;
    	-moz-transition: opacity 0.7s, bottom 0.7s;
    	transition: opacity 0.7s, bottom 0.7s;
    }
    #slideshow .commands:before {
    	position: absolute;
    	bottom: 55px; left: 13px;
    	content: " ";
    	width: 1px; height: 1px;
    	border-top: 10px solid #fff;
    	border-left: 5px solid transparent;
    	border-right: 5px solid transparent;
    	z-index:100;
    	opacity: 0;
    	
    	-webkit-transition: opacity 0.7s, bottom 0.7s;
    	-moz-transition: opacity 0.7s, bottom 0.7s;
    	transition: opacity 0.7s, bottom 0.7s;
    }
    #slideshow .commands:hover:before {
    	bottom: 35px;
    	opacity: 1;
    }
    #slideshow .commands:hover:after {
    	bottom: 45px;
    	opacity: 1;
    }
    #slideshow .commands:focus { 
    	outline: 0;
    	-webkit-transform: translate(1px, 2px);
    	-moz-transform: translate(1px, 2px);
    	-ms-transform: translate(1px, 2px);
    	-o-transform: translate(1px, 2px);
    	transform: translate(1px, 2px);
    }
    #slideshow .commands:active {
    	-webkit-transform: translate(0, 1px);
    	-moz-transform: translate(0, 1px);
    	-ms-transform: translate(0, 1px);
    	-o-transform: translate(0, 1px);
    	transform: translate(0, 1px);
    }
    #slideshow .prev {
    	left: -48px;
    }
    #slideshow .next {
    	right: -48px;
    }
    #slideshow .prev,
    #slideshow .next {
    	display:none;
    }
    #slideshow .prev,
    #slideshow .next {
    	display:none;
    }
    #slideshow .commands1 {
    	display: block;
    }
    
    
    #slideshow .container {
    	position:relative;
    	width: 940px;	/* change from 640px to 940px */
    	height: 306px;
    	overflow: hidden;
    }
    /* timeline base */
    #slideshow .container:after {
    	position:absolute;
    	bottom: 0; left:0;
    	content: " ";
    	background: #999;
    	width: 100%;
    	height: 1px;
    }
    
    @-webkit-keyframes slider {
    	0%, 20%, 100%	{ left: 0 }
    	25%, 45%		{ left: -100% }
    	50%, 70%		{ left: -200% }
    	75%, 95%		{ left: -300% }
    }
    @-moz-keyframes slider {
    	0%, 20%, 100%	{ left: 0 }
    	25%, 45%		{ left: -100% }
    	50%, 70%		{ left: -200% }
    	75%, 95%		{ left: -300% }
    }
    @keyframes slider {
    	0%, 20%, 100%	{ left: 0 }
    	25%, 45%		{ left: -100% }
    	50%, 70%		{ left: -200% }
    	75%, 95%		{ left: -300% }
    }
    
    #slideshow .slider {
    	position: absolute;
    	left:0; top:0;
    	width: 400%;
    	height: 306px;
    	
    	-webkit-animation: slider 32s infinite;
    	-moz-animation: slider 32s infinite;
    	animation: slider 32s infinite;
    }
    .sl_i:target ~ #slideshow .slider {
    	-webkit-transition: left 1s;
    	-moz-transition: left 1s;
    	transition: left 1s;
    }
    .sl_command:target ~ #slideshow .slider {
    	-webkit-transition: opacity 1s;
    	-moz-transition: opacity 1s;
    	transition: opacity 1s;
    }
    #slideshow .c_slider {
    	position: absolute;
    	left:0; top:0;
    	width: 400%;
    	height: 306px;
    	display: none;	/* add display: none */
    	background: url(images/01.jpg) 0 0 no-repeat, url(images/02.jpg) 640px 0 no-repeat, url(images/03.jpg) 1280px 0 no-repeat, url(images/04.jpg) 1920px 0 no-repeat;
    }
    .sl_i:target ~ #slideshow .c_slider {
    	-webkit-transition: background 1s;
    	-moz-transition: background 1s;
    	transition: background 1s;
    }
    
    #slideshow figure {
    	position:relative;
    	padding:0; margin:0;
    	width: 940px;	/* add width: 940px */
    }
    
    @-webkit-keyframes figurer {
    	0%, 25%, 50%, 75%, 100%						{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
    	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    @-moz-keyframes figurer {
    	0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
    	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    @keyframes figurer {
    	0%, 25%, 50%, 75%, 100%						{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;	}
    	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    #slideshow figure:after {
    	position: absolute;
    	display:block;
    	content: " ";
    	top:0; left:0;
    	width: 100%; height: 100%;
    	-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
    	-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
    	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
    	
    	-webkit-animation: figurer 32s infinite;
    	-moz-animation: figurer 32s infinite;
    	animation: figurer 32s infinite;
    }
    
    @-webkit-keyframes figcaptionner {
    	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
    	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
    }
    @-moz-keyframes figcaptionner {
    	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
    	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
    }
    @keyframes figcaptionner {
    	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
    	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
    }
    
    #slideshow figcaption {
    	position:absolute;
    	padding: 20px 20px; margin:0;
    	left:0; right:0; bottom: 5px;
    	text-align:center;
    	letter-spacing: 0.05em;
    	word-spacing: 0.05em;
    	font-family: Georgia, Times, serif;
    	background: #000;
    	background: rgba(255,255,255,0.7);
    	border-top: 1px solid rgb(225,225,225);
    	color: #555;
    	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
    	
    	-webkit-animation: figcaptionner 32s infinite;
    	-moz-animation: figcaptionner 32s infinite;
    	animation: figcaptionner 32s infinite;
    }
    
    @-webkit-keyframes timeliner {
    	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
    	20%, 45%, 70%, 90%		{ width: 640px;	}
    }
    @-moz-keyframes timeliner {
    	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
    	20%, 45%, 70%, 90%		{ width: 640px;	}
    }
    @keyframes timeliner {
    	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
    	20%, 45%, 70%, 90%		{ width: 640px;	}
    }
    
    
    /* dots styles */
    .dots_commands  {
    	position: relative;
    	top: 32px;
    	padding:0; margin:0;
    	text-align:center;
    }
    .dots_commands li {
    	display:inline;
    	padding:0; margin:0;
    	list-style:none;
    }
    .dots_commands a {
    	position: relative;
    	display:inline-block;
    	height:8px; width: 8px;
    	margin: 0 5px;
    	text-indent: -9999px;
    	background: #fff;
    	border-bottom:0;
    	
    	-webkit-border-radius: 50%;
    	-moz-border-radius: 50%;
    	border-radius: 50%;
    	
    	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
    	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
    	
    	z-index:25;
    }
    .dots_commands li + li a {
    	z-index:10;
    }
    @-moz-keyframes dotser {
    	0%, 100% 	{ opacity: 1; left: 0; 		}
    	
    	20%			{ opacity: 1; left: 0;		}
    	22%			{ opacity: 0; left: 0;		}
    	23%			{ opacity: 0; left: 18px;	}
    	25%			{ opacity: 1; left: 18px;	}
    	
    	45%			{ opacity: 1; left: 18px;	}
    	47%			{ opacity: 0; left: 18px;	}
    	48%			{ opacity: 0; left: 36px;	}
    	50%			{ opacity: 1; left: 36px;	}
    	
    	70%			{ opacity: 1; left: 36px;	}
    	72%			{ opacity: 0; left: 36px;	}
    	73%			{ opacity: 0; left: 54px;	}
    	75%			{ opacity: 1; left: 54px;	}
    	
    	95%			{ opacity: 1; left: 54px;	}
    	97%			{ opacity: 0; left: 54px;	}
    	98%			{ opacity: 0; left: 0;	}
    }
    @-webkit-keyframes dotser {
    	0%, 100% 	{ opacity: 1; left: 0; 		}
    	
    	20%			{ opacity: 1; left: 0;		}
    	22%			{ opacity: 0; left: 0;		}
    	23%			{ opacity: 0; left: 18px;	}
    	25%			{ opacity: 1; left: 18px;	}
    	
    	45%			{ opacity: 1; left: 18px;	}
    	47%			{ opacity: 0; left: 18px;	}
    	48%			{ opacity: 0; left: 36px;	}
    	50%			{ opacity: 1; left: 36px;	}
    	
    	70%			{ opacity: 1; left: 36px;	}
    	72%			{ opacity: 0; left: 36px;	}
    	73%			{ opacity: 0; left: 54px;	}
    	75%			{ opacity: 1; left: 54px;	}
    	
    	95%			{ opacity: 1; left: 54px;	}
    	97%			{ opacity: 0; left: 54px;	}
    	98%			{ opacity: 0; left: 0;	}
    }
    @keyframes dotser {
    	0%, 100% 	{ opacity: 1; left: 0; 		}
    	
    	20%			{ opacity: 1; left: 0;		}
    	22%			{ opacity: 0; left: 0;		}
    	23%			{ opacity: 0; left: 18px;	}
    	25%			{ opacity: 1; left: 18px;	}
    	
    	45%			{ opacity: 1; left: 18px;	}
    	47%			{ opacity: 0; left: 18px;	}
    	48%			{ opacity: 0; left: 36px;	}
    	50%			{ opacity: 1; left: 36px;	}
    	
    	70%			{ opacity: 1; left: 36px;	}
    	72%			{ opacity: 0; left: 36px;	}
    	73%			{ opacity: 0; left: 54px;	}
    	75%			{ opacity: 1; left: 54px;	}
    	
    	95%			{ opacity: 1; left: 54px;	}
    	97%			{ opacity: 0; left: 54px;	}
    	98%			{ opacity: 0; left: 0;	}
    }
    .dots_commands li:first-child a:after,
    .dots_commands li:first-child a:before {
    	position: absolute;
    	top: 0; left: 0;
    	content: " ";
    	width: 8px; height: 8px;
    	background: #bd9b83;
    	z-index:20;
    	-webkit-border-radius: 50%;
    	-moz-border-radius: 50%;
    	border-radius: 50%;
    	
    	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
    	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
    }
    .dots_commands li:first-child a:after {
    	-webkit-animation: dotser 32s infinite; /* webkit can't animate pseudo-element =_= :L: */
    	-moz-animation: dotser 32s infinite; /* thanks moz ! :D */
    	animation: dotser 32s infinite;
    }
    .dots_commands li:first-child a:before {
    	display:none;
    }
    
    
    /* actions when target ! */
    .sl_command { display: none; }
    
    .sl_command:target ~ #slideshow .slider,
    .sl_command:target ~ #slideshow figure:after,
    .sl_command:target ~ #slideshow figcaption,
    .sl_command:target ~ #slideshow #timeline,
    .sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
    	-webkit-animation-play-state: paused;
    	-moz-animation-play-state: paused;
    	animation-play-state: paused;
    }
    
    #sl_play:target ~ #slideshow .slider,
    #sl_play:target ~ #slideshow figure:after,
    #sl_play:target ~ #slideshow figcaption,
    #sl_play:target ~ #slideshow #timeline,
    #sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
    	-webkit-animation-play-state: running;
    	-moz-animation-play-state: running;
    	animation-play-state: running;
    }
    
    .sl_command:target ~ #slideshow .pause 	{ opacity:0; }
    .sl_command:target ~ #slideshow .play 	{ opacity:1; right: 25px; cursor: pointer; }
    #sl_play:target ~ #slideshow .pause 	{ opacity:0; }
    #sl_play:target ~ #slideshow .play 		{ opacity:0; right: 55px; cursor: default;}
    
    .sl_i:target ~ #slideshow .slider									{ visibility: hidden }
    .sl_i:target ~ #slideshow .slider figcaption						{ visibility: hidden }
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:after		{ display:none; }
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:before	{ display:block; }}
    
    #sl_i1:target ~ #slideshow .commands								{ display: none; }
    #sl_i1:target ~ #slideshow .commands1								{ display: block; }
    #sl_i1:target ~ #slideshow .c_slider								{ background-position: 0 0, 640px 0, 1280px 0, 1920px 0; display: block; }	/* add display: block */
    #sl_i1:target ~ #slideshow .container							{ width: 640px; }	/* add this line*/
    #sl_i1:target ~ #slideshow figure									{ width: 640px; }	/* add this line */
    #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before	{ left:0; }
    
    #sl_i2:target ~ #slideshow .commands								{ display: none; }
    #sl_i2:target ~ #slideshow .commands2								{ display: block; }
    #sl_i2:target ~ #slideshow .c_slider								{ background-position: -640px 0, 0 0, 640px 0, 1280px 0; display: block; }	/* add display: block */
    #sl_i2:target ~ #slideshow .container							{ width: 640px; }	/* add this line*/
    #sl_i2:target ~ #slideshow figure									{ width: 640px; }	/* add this line */
    #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before	{ left:18px; }
    
    #sl_i3:target ~ #slideshow .commands								{ display: none; }
    #sl_i3:target ~ #slideshow .commands3								{ display: block; }
    #sl_i3:target ~ #slideshow .c_slider								{ background-position: -1280px 0, -640px 0, 0 0, 640px 0; display: block; }	/* add display: block */
    #sl_i3:target ~ #slideshow .container							{ width: 640px; }	/* add this line*/
    #sl_i3:target ~ #slideshow figure									{ width: 640px; }	/* add this line */
    #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before	{ left:36px; }
    
    #sl_i4:target ~ #slideshow .commands								{ display: none; }
    #sl_i4:target ~ #slideshow .commands4								{ display: block; }
    #sl_i4:target ~ #slideshow .c_slider								{ background-position: -1920px 0, -1280px 0, -640px 0, 0 0; display: block; }	/* add display: block */
    #sl_i4:target ~ #slideshow .container							{ width: 640px; }	/* add this line*/
    #sl_i4:target ~ #slideshow figure									{ width: 640px; }	/* add this line */
    #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before	{ left:54px; }
    Hoffe ich konnte helfen

  11. #11
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Hallo @miniA4kuser,

    Es scheint zu funktionieren.
    Ich teste das noch mal in alle Ruhe und melde mich in etwa 2 Stunden.

    Danke nochmal.

  12. #12
    Kasalop ist offline Routinier
    registriert
    29-08-2012
    Beiträge
    398

    AW: löse ein einfaches CSS Problem und verdiene 60€

    @miniA4kuser:
    ich habs nicht getestet, aber kann es sein, dass die einzige Änderung ist, dass du die info weiter nach links geschoben hast? damit überlappt sie aber nihct mehr mit dem blauen bild rechts, wenn ich das richtig sehe.

    @TE:
    Meine Version:
    1) section#slideshow:
    Code:
    url("images/slideshow-background.jpg") repeat scroll 0 0 transparent
    ändern in
    Code:
    none repeat scroll 0 0 transparent
    2) div#slideshow .container die breite von 640 auf 940 setzten
    3) Ein neues Element hinzufügen:
    Code:
    <div class="container">
      <div class="backgroundFake"></div>
      <div class="c_slider"></div>
      ...
    </div>
    4) css für .backgroundFake hinzufügen:
    Code:
    position: absolute;
    top: 0px;
    right: 0px;
    width: 300px;
    height: 100%;
    background-image: url("images/slideshow-background.jpg");
    z-index: 999;
    5) .info muss ein z-index:1000; bekommen, da es sonst hinter dem nächsten bild verschwindet.

    Lg Kasalop

    EDIT: Ich seh grad das bei meiner Version bei laufender animation ein problem auftritt durch die veränderung der Containergröße. Ich denke den fix bekommste selber hin, nicht sehr schwer, musst nur das overflow:hidden eine Ebene hoch verschieben und für container das overflow:hidden entfernen und die größe wieder auf 640px setzten. Dann müsste es grob passen.
    Geändert von Kasalop (22-10-2012 um 16:20 Uhr)

  13. #13
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: löse ein einfaches CSS Problem und verdiene 60€

    Die Lösung von @miniA4kuser funktioniert und beinhaltet mehr Änderungen als nur .info zu verschieben.
    Allerdings nun funktionieren die Schaltflächen (Next und Pre) nicht mehr.

  14. #14
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: löse ein einfaches CSS Problem und verdiene 60€

    @Kasalop,
    Danke für die super Lösung.
    Allerdings auch in diesem Fall so bald ich auf die Schaltfläche next klicke, verschwindet wieder der Text!

  15. #15
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: löse ein einfaches CSS Problem und verdiene 60€

    @Kasalopp:
    Da sind schon noch ein paar mehr Änderungen passiert, z.B. auch bei den :target-Pseudoklassen.


    @bigtail:
    Hast du das komplette CSS ersetzt? Habe mal dein HTML und die Bilder kopiert und bei mir funktionierts, siehe hier (temporärer Link).
    Hoffe ich konnte helfen

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Einfaches Uploadscript
    Von KV3000 im Forum Serverseitige Programmierung
    Antworten: 8
    Letzter Beitrag: 14-10-2005, 16:02
  2. Einfaches Menü mit JS
    Von Raven_3_ im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 25-10-2004, 00:27
  3. einfaches php problem
    Von woodruff im Forum Serverseitige Programmierung
    Antworten: 4
    Letzter Beitrag: 20-08-2002, 11:28
  4. Wie löse ich dieses Script
    Von Marctrix im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 21-03-2002, 08:50
  5. einfaches Zählwerk
    Von harald2 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 28-10-2001, 18:10

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •