Muiter Posted January 27, 2013 Share Posted January 27, 2013 This is the old page: http://www.thure.nl/...snijden_oud.php I have changed the image to an WOWSlider slideshow: http://www.thure.nl/lasersnijden.php How can I get the text on the left side of my slideshow? body{background: url(../images/photo/achtergrond.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;line-height: 25px;text-align: left;font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;}img { border: 0px;}#container{width: 960px;height: 720px;margin-top: 25px;margin-left: auto;margin-right: auto;background-color: #f6f6f6;color: #211351;line-height: 130%;border: 3px solid #e0e0e0; /*--CSS3 Rounded Corners--*/-webkit-border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border-radius: 10px;/*--CSS3 Box Shadows--*/-webkit-box-shadow: 0px 0px 15px #000;-moz-box-shadow: 0px 0px 15px #000;box-shadow: 0px 0px 15px #000;}#top{width: 950px;padding: .5em;}#top h1{padding: 0;margin: 0;}#topnav ul{margin-left: 140px;padding:0 5px;font-size:15px;color:#3366cc;overflow:hidden;list-style-type: none;}#topnav ul li{float:left;padding:8px;}#topnav ul li a{text-align: left;font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 15px;text-decoration: none;color: #999;}#topnav ul li a:hover{color: #e30613;cursor: pointer;}#topnav ul .current a{color: #e30613;}#leftnav{float: left;width: 150px;margin: 0;border-right: 1px solid #e0e0e0;}#leftnav ul{list-style-type: none;text-align: left;}#leftnav ul li a{background: transparent url(../images/list-off.gif) left center no-repeat;padding-left: 8px;text-align: left;font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 11px;text-decoration: none;color: #999;}#leftnav ul li a:hover{background: transparent url(../images/list-on.gif) left center no-repeat;color: #e30613;}#leftnav ul .current a{background: transparent url(../images/list-on.gif) left center no-repeat;color: #e30613;}#content{margin-left: 160px;width: 800px;height: 535px;overflow: auto;}#footer{float: right;width: 750px;}#leftnav p{margin: 0 0 1em 0;}#content h1{margin: 0 0 .5em 0;color: #211351;}#content h2{margin: 0 0 .5em 0;color: #211351;}#content p{margin: 0 0 1.5em 0;color: #211351;} /** generated by WOW Slider 2.8* template Block*/#wowslider-container {zoom: 1;position: relative;left:225px;max-width:314px;margin:0px auto 0px;z-index:90;border:none;}* html #wowslider-container{ width:314px }#wowslider-container .ws_images ul{position:relative;height:auto;left:0;list-style:none;margin:0;padding:0;border-spacing:0;overflow: visible;/*table-layout:fixed;*/}#wowslider-container .ws_images ul li{width:1%;line-height:0; /*opera*/float:left;font-size:0;padding:0 0 0 0 !important;margin:0 0 0 0 !important;}#wowslider-container .ws_images{position: relative;left:0;top:0;width:100%;height:100%;overflow:hidden;}#wowslider-container .ws_images a{width:100%;display:block;color:transparent;}#wowslider-container img{max-width: none !important;}#wowslider-container .ws_images img{width:100%;border:none 0;max-width: none;padding:0;}#wowslider-container a{text-decoration: none;outline: none;border: none;}#wowslider-container .ws_bullets {font-size: 0px;float: left;position:absolute;z-index:70;}#wowslider-container .ws_bullets div{position:relative;float:left;}#wowslider-container a.wsl{display:none;}#wowslider-container .ws_bullets {padding: 10px;}#wowslider-container .ws_bullets a {margin-left: 5px;height: 10px;width: 10px;float: left;border: 1px solid #B8C4CF;color: transparent;text-indent: 0px;background-image:url("data:image/gif;base64,");position:relative;}#wowslider-container .ws_selbull {background-color: #B8C4CF;color: #FFFFFF;}#wowslider-container .ws_bullets a:hover, #wowslider-container .ws_overbull {background-color: #dae9f6;color: #FFFFFF;}#wowslider-container a.ws_next, #wowslider-container a.ws_prev {font-family: Tahoma,Arial,Helvetica;font-size: 14px;position:absolute;display:none;top:50%;margin-top:-15px;line-height:30px;z-index:60;background-color: #000000;color: #FFFFFF;padding: 0px 10px;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}#wowslider-container a.ws_next{right:0;}#wowslider-container a.ws_prev {left:0;}* html #wowslider-container a.ws_next,* html #wowslider-container a.ws_prev{display:block}#wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev {display:block}/* bottom center */#wowslider-container .ws_bullets {bottom:0;left:50%;}#wowslider-container .ws_bullets div{left:-50%;}#wowslider-container .ws-title{position: absolute;bottom:0;left: 0;margin-right:5px;z-index: 50;background-color:#000000;color:#FFFFFF;padding:10px 1%;width:98%;font-family: Tahoma,Arial,Helvetica;font-size: 14px;opacity:0.55;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55);}#wowslider-container .ws-title div{padding-top:5px;font-size: 12px;}#wowslider-container .ws_images ul{animation: wsBasic 12s infinite;-moz-animation: wsBasic 12s infinite;-webkit-animation: wsBasic 12s infinite;}@keyframes wsBasic{0%{left:-0%} 16.67%{left:-0%} 33.33%{left:-100%} 50%{left:-100%} 66.67%{left:-200%} 83.33%{left:-200%} }@-moz-keyframes wsBasic{0%{left:-0%} 16.67%{left:-0%} 33.33%{left:-100%} 50%{left:-100%} 66.67%{left:-200%} 83.33%{left:-200%} }@-webkit-keyframes wsBasic{0%{left:-0%} 16.67%{left:-0%} 33.33%{left:-100%} 50%{left:-100%} 66.67%{left:-200%} 83.33%{left:-200%} }#wowslider-container .ws_bullets a img{text-indent:0;display:block;bottom:12px;left:-32px;visibility:hidden;position:absolute; border: 2px solid #B8C4CF;max-width:none;}#wowslider-container .ws_bullets a:hover img{visibility:visible;}#wowslider-container .ws_bulframe div div{height:48px;overflow:visible;position:relative;}#wowslider-container .ws_bulframe div {left:0;overflow:hidden;position:relative;background-color:#B8C4CF;width:64px;}#wowslider-container .ws_bullets .ws_bulframe{display:none;bottom:25px;overflow:visible;position:absolute;cursor:pointer; border: 2px solid #B8C4CF;}#wowslider-container .ws_bulframe span{position:absolute;} Link to comment Share on other sites More sharing options...
dsonesuk Posted January 27, 2013 Share Posted January 27, 2013 #wowslider-container { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-bottom-color: -moz-use-text-color; border-bottom-style: none; border-bottom-width: medium; border-left-color-ltr-source: physical; border-left-color-rtl-source: physical; border-left-color-value: -moz-use-text-color; border-left-style-ltr-source: physical; border-left-style-rtl-source: physical; border-left-style-value: none; border-left-width-ltr-source: physical; border-left-width-rtl-source: physical; border-left-width-value: medium; border-right-color-ltr-source: physical; border-right-color-rtl-source: physical; border-right-color-value: -moz-use-text-color; border-right-style-ltr-source: physical; border-right-style-rtl-source: physical; border-right-style-value: none; border-right-width-ltr-source: physical; border-right-width-rtl-source: physical; border-right-width-value: medium; border-top-color: -moz-use-text-color; border-top-style: none; border-top-width: medium; float: right; /*added by dsonesuk*/ left: 0; /*225px; amended by dsonesuk*/ margin-bottom: 0; margin-left: 10px; /* auto; amended by dsonesuk*/ margin-right: 10px; /* auto; amended by dsonesuk*/ margin-top: 0; max-width: 314px; position: relative; z-index: 90;} 1 Link to comment Share on other sites More sharing options...
Muiter Posted January 27, 2013 Author Share Posted January 27, 2013 Wow dsonesuk, fantastic job.Can you explain an little bit? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 27, 2013 Share Posted January 27, 2013 float right, causes to the slideshow shift to the right, but allow text to be to the left of it, left:0; to stop it being pushed further right than required, margin 10px left and right to push it away from right edge of container, and force text away from slideshows left edge. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now