Jump to content

How get the text on the left side of an image?


Recommended Posts

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 post
Share on other sites
#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;}

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...