Slider error with thumbnails in chrome - html

I'm using a slider in HTML and CSS3 for a website but, with Chrome I can't see the thumbnails and with IE 9 the thumbnails appear. I've checked the code but I didn't find the issue.
Here the CODE
HTML
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 960px; height: 480px; background: #191919; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 240px; top: 0px; width: 720px; height: 480px; overflow: hidden;">
<div>
<img u="image" src="/page/bioedilizia/img/images.jpg" />
<img u="thumb" src="/page/bioedilizia/img/images.jpg" />
</div>
<div>
<img u="image" src="/page/bioedilizia/img/images%20(2).jpg" />
<img u="thumb" src="/page/bioedilizia/img/images%20(2).jpg" />
</div>
<div>
<img u="image" src="/page/bioedilizia/img/images%20(1).jpg" />
<img u="thumb" src="/page/bioedilizia/img/images%20(1).jpg" />
</div>
</div>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 248px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
<!-- Thumbnail Navigator Skin 02 Begin -->
<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 240px; height: 480px; left:0px; bottom: 0px;">
<div u="slides" style="cursor: move;">
<div u="prototype" class="p" style="position: absolute; width: 99px; height: 66px; top: 0; left: 0;">
<div class=w><thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div>
<div class=c>
</div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Thumbnail Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">jquery content slider</a>
</div>
<!-- Jssor Slider End -->
CSS
<!-- Arrow Navigator Skin Begin -->
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05ldn (mousedown)
.jssora05rdn (mousedown)
*/
.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
{
position: absolute;
cursor: pointer;
display: block;
overflow:hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05ldn { background-position: -250px -40px; }
.jssora05rdn { background-position: -310px -40px; }
<!-- Thumbnail Item Skin Begin -->
/* jssor slider thumbnail navigator skin 02 css */
/*
.jssort02 .p (normal)
.jssort02 .p:hover (normal mouseover)
.jssort02 .pav (active)
.jssort02 .pav:hover (active mouseover)
.jssort02 .pdn (mousedown)
*/
.jssort02 .w
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.jssort02 .c
{
position: absolute;
top: 0px;
left: 0px;
width: 95px;
height: 62px;
border: #000 2px solid;
}
.jssort02 .p:hover .c, .jssort02 .pav:hover .c, .jssort02 .pav .c
{
border-width: 0px;
top: 2px;
left: 2px;
width: 95px;
height: 62px;
}
.jssort02 .p:hover .c, .jssort02 .pav:hover .c
{
top: 0px;
left: 0px;
width: 97px;
height: 64px;
border: #fff 1px solid;
}

Related

position:absolute; is not effect one of the image

.collection {
margin-bottom: 20px;
}
.collection-content{
position: relative;
padding: 50px 143px;
background-color: #F8F8F2;
background-image: url("../img/collection-bg-img.jpg") ;
}
.collection-leafe-left{
position: absolute;
left: -150px;
top: 40px;
}
.collection-leaves-right{
position: absolute;
right: -350px;
top: 685px;
}
.collection-leafe-left-light{
position: absolute;
left: -216px;
bottom: 170px;
}
<section class="collection">
<div class="container">
<div class=" collection-content ">
<img class="collection-leafe-left" src="https://via.placeholder.com/371 " alt width="371" height="371" >
<img class="collection-leaves-right" src="https://via.placeholder.com/546/592?text=POSITION+IS+NOT+WORKING
C/O https://placeholder.com/ " alt width="546" height="592" >
<img class="collection-leafe-left-light" src="https://via.placeholder.com/314" alt width="314" height="287" >
</div>
</div>
</section>
position:absolute; is not working with collection-right-mix image. Why is that so?
Because of position:absolute; is not working with collection-right-mix image , appear scroll across horizontal.
How to effect position to the collection-right-mix image
Change padding to margin for .collection-content
position: absolute considers the padding part of the width.
Thus, .collection-content { padding: 50px 143px; } would position the absolute children the same as .collection-content { padding: 0; }.
On the other hand, position: absolute does NOT consider the margin part of the width.
So now, the absolutely position children should be positioned as you desired.
.collection {
margin-bottom: 20px;
}
.collection-content {
position: relative;
margin: 50px 143px; /* Changed */
background-color: #F8F8F2;
background-color: #ccc; /* Changed */
background-image: url("../img/collection-bg-img.jpg");
}
.collection-leafe-left {
position: absolute;
left: -150px;
top: 40px;
}
.collection-leaves-right {
position: absolute;
right: -350px;
top: 685px;
}
.collection-leafe-left-light {
position: absolute;
left: -216px;
bottom: 170px;
}
<section class="collection">
<div class="container">
<div class=" collection-content ">
<img class="collection-leafe-left" src="https://via.placeholder.com/371 " alt width="371" height="371">
<img class="collection-leaves-right" src="https://via.placeholder.com/546/592?text=POSITION+IS+NOT+WORKING" alt width="546" height="592">
<img class="collection-leafe-left-light" src="https://via.placeholder.com/314" alt width="314" height="287">
</div>
</div>
</section>

Tooltip cut off by div container

I've searched this a lot and have not found, or at least I haven't been able to implement, the proper answer.
I am building a site in which I have a scrolling div with an image. I am placing tooltips over certain parts of the image, but when they are activated, the tooltips are cut off by the constraints of the div.
Working example: http://navalage.neocities.org/menu1-test.html
It is in the bottom menu. The stage tooltip appears inside of the div, and I have the others outside as an example of what I want them to do.
Hopefully someone can help, thank you!
CSS is
<style>
body {
background-color: black;
}
.div {font-family: san-serif;}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border: 1px solid ;
border-color: rgba(255,255,255,1);
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 294px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
border: 1px dashed white;
font-family: arial;
/* Position the tooltip text - see examples below! */
position: absolute;
top: 0px;
opacity: 0;
-mox-transition: 1;
z-index:33;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
z-index:34;
}
</style>
HTML is;
<div style="z-index: 2; overflow: scroll; max-width: 240px; background-color: black; margin-left: 84px; margin-top: -54px; width: 213px; height: 50px; -moz-transform: skew(1.5deg);">
<!-- Stage -->
<div class="tooltip" style="z-index: 3; margin-top:2px; margin-left: 0px; width: 35; height: 44px;">
<span style="margin-left: -84px; margin-top: -0px; z-index: 999;" class="tooltiptext"><b><u>Stage</b></u>: This is where you go to battle the enemy in the main story line (there isnt much of one).</span>
</div>
<img src="IMAGES/mainmenu.jpg" style="height:50px; margin-left: -5px; margin-top: -47px; -moz-transform: skew(-1.5deg);">
<!-- END -->
<!-- Fleet -->
<div class="tooltip" style="top: 489px; left: 130px; width: 35; height: 44px;">
<span style="margin-left: -120px; margin-top: -110px;" class="tooltiptext"><b><u>Fleet</b></u>: Here you can set up your base defence when somebody is attacking. You can also repair your ships and check on the current status of any fleets on a mission.</span>
</div>
<!-- END -->
<!-- Alliance -->
<div class="tooltip" style="position: absolute; top: 489px; left: 168px; width: 35; height: 44px;">
<span style="margin-left: -158px; margin-top: -91px;" class="tooltiptext"><b><u>Alliance</b></u>: Acces your alliance for donations, Elite Challenges (EC), Alliance fleet, Collect Supplies, Alliance War, and alliance technology.</span>
</div>
<!-- END -->
<!-- Item -->
<div class="tooltip" style="position: absolute; top: 489px; left: 206px; width: 35; height: 44px;">
<span style="margin-left: -196px; margin-top: -53px;" class="tooltiptext"><b><u>Item</b></u>: Acces your items, as well as the shop, and flash sale.</span>
</div>
<!-- END -->
<!-- Mail -->
<div class="tooltip" style="position: absolute; top: 489px; left: 244px; width: 35; height: 44px;">
<span style="margin-left: -234px; margin-top: -91px;" class="tooltiptext"><b><u>Mail</b></u>: This is where you recieve mail from system, friends, alliance leaders, escort, scout reports, and attack and defense reports. </span>
</div>
<!-- END -->
<!-- NEXT -->
<div class="tooltip" style="position: absolute; top: 489px; left: 282px; width: 25; height: 44px;">
<span style="margin-left: -272px; margin-top: 0px;" class="tooltiptext">Go to the next menu page
<a href="menu2.html">
<button>
Next</button>
</a>
</span>
</div>
<!-- END -->
</div>
You have to change your css in in this div and span
<div class="tooltip" style="z-index: 3;margin-top:2px;margin-left: 0px;width: 35;height: 44px;position: absolute;">
<span style="margin-left: -84px;margin-top: -72px;/* z-index: 999; */" class="tooltiptext"><b><u>Stage</u></b>: This is where you go to battle the enemy in the main story line (there isnt much of one).</span>
</div>

Cannot make give my div, width 100%

This is the site I am working on
My Site is divided into 3 sections, Header, content and footer.
In the content div, I have different sub-div's. The last two div's, named contactsales and latestnews do not want to stretch my screens width, even though I specify the div to be width: 100%;
What could be the problem, I've checked my code over and over but cannot seem to spot my error
This is my CSS for the content div:
#content{
width: 100%;
}
#content #rowCopy{
width: 80%;
margin: 0 auto;
display: block;
}
#content #services{
width: 80%;
margin: 0 auto;
display: block;
}
#content #rowCopy #box {
background: none repeat scroll 0 0 white;
box-shadow: 3px 3px 17px -1px rgba(0, 0, 0, 0.82);
margin: 10px;
padding:0;
top: -50px;
}
#content #rowCopy #box #innercontent {
width:75%;
margin: 0 auto;
}
.col-sm-3 {
width: 22%;
min-width: 230px;
}
.col-md-4{
width: 30%;
min-width: 230px;
}
#content #services #box {
background: none repeat scroll 0 0 white;
box-shadow: 3px 3px 17px -1px rgba(0, 0, 0, 0.82);
margin: 10px;
padding:0;
}
#content #contactsales {
background-color: rgb( 242, 242, 242 );
left: 0px;
width: 100%;
height: 91px;
}
#content #contactsales #inner {
width: 80%;
margin: 0 auto;
}
#content #latestnews{
background: url("../images/blurimg.jpg");
height: 574px;
width: 100%;
}
#content #latestnews #title{
color: rgba(200,200,200,0.7);
font-size: 30px;
font-style: bold;
padding-top: 50px;
padding-bottom: 50px;
}
#content #latestnews #inner{
width: 80%;
margin: 0 auto;
}
#content #latestnews #inner #box{
background: none repeat scroll 0 0 white;
box-shadow: 3px 3px 17px -1px rgba(0, 0, 0, 0.82);
margin: 10px;
padding:0;
}
#content #latestnews #inner #box #innercontent{
padding: 15px;
}
#content #latestnews #inner #box #innercontent h4{
font-weight: bold;
}
#content #latestnews #inner #box #news{
padding: 10px;
border: solid 1px;
border-color: rgb(220,220,220);
}
#content #latestnews #inner #box #news h5{
font-weight: bold;
}
The HTML is rather long for me to include it here
Help would be much appreciated!
Replace your div#content to the code below.
<div id="content">
<div id="slider">
<div id="slider1_container" style="position: relative; margin: 0px auto; top: -7px; left: 0px; width: 1350px; height: 633.461538461539px; overflow: hidden;" jssor-slider="true">
<!-- Slides Container -->
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
<!-- bullet navigator container -->
<!--#endregion Bullet Navigator Skin End -->
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
<!-- Arrow Left -->
<!-- Arrow Right -->
<!--#endregion Arrow Navigator Skin End -->
<div style="position: absolute; top: 0px; left: 0px; width: 1300px; height: 610px; transform-origin: 0px 0px 0px; transform: scale(1.03846153846154);"><div class="" style="position: relative; margin: 0px auto; top: 0px; left: 0px; width: 1300px; height: 610px; overflow: visible; display: block;"><div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 610px; overflow: hidden; z-index: 0;"><div debug-id="slide_container" style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px;"></div></div><div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 610px; overflow: hidden; z-index: 0;" debug-id="slide-board"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; position: absolute; opacity: 0; display: none; background-color: rgb(0, 0, 0);"></div>
<div debug-id="slide-0" style="width: 1300px; height: 610px; top: 0px; left: 0px; position: absolute; overflow: hidden;"><img u="image" src="./images/image.jpg" border="0" style="width: 1500px; height: 610px; top: 0px; left: -100px; position: absolute;"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div>
<div debug-id="slide-1" style="width: 1300px; height: 610px; top: 0px; left: 1300px; position: absolute; overflow: hidden;"><img u="image" src="./images/image.jpg" border="0" style="width: 1500px; height: 610px; top: 0px; left: -100px; position: absolute;"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div>
<div debug-id="slide-2" style="width: 1300px; height: 610px; top: 0px; left: -1300px; position: absolute; overflow: hidden;"><img u="image" src="./images/image.jpg" border="0" style="width: 1500px; height: 610px; top: 0px; left: -100px; position: absolute;"><div style="width: 1300px; height: 610px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div>
</div><style>
/* jssor slider bullet navigator skin 21 css */
/*
.jssorb21 div (normal)
.jssorb21 div:hover (normal mouseover)
.jssorb21 .av (active)
.jssorb21 .av:hover (active mouseover)
.jssorb21 .dn (mousedown)
*/
.jssorb21 {
position: absolute;
}
.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
position: absolute;
/* size of bullet elment */
width: 19px;
height: 19px;
text-align: center;
line-height: 19px;
color: white;
font-size: 12px;
background: url(./images/bullets.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }
</style><div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px; width: 73px; height: 19px; left: 613.5px;">
<!-- bullet navigator item prototype -->
<div u="prototype" class="av" style="position: absolute; left: 0px; top: 0px;"></div><div u="prototype" class="" style="position: absolute; left: 27px; top: 0px;"></div><div u="prototype" class="" style="position: absolute; left: 54px; top: 0px;"></div></div><style>
/* jssor slider arrow navigator skin 21 css */
/*
.jssora21l (normal)
.jssora21r (normal)
.jssora21l:hover (normal mouseover)
.jssora21r:hover (normal mouseover)
.jssora21l.jssora21ldn (mousedown)
.jssora21r.jssora21rdn (mousedown)
*/
.jssora21l, .jssora21r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url(./images/arrows.png) center center no-repeat;
overflow: hidden;
}
.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }
</style><span u="arrowleft" class="jssora21l" style="top: 277.5px; left: 8px; display: none;">
</span><span u="arrowright" class="jssora21r" style="top: 277.5px; right: 8px; display: none;">
</span><a style="display: none" href="http://www.jssor.com">Image Slider</a></div></div></div>
</div>
<div id="rowCopy">
<div class="col-xs-5 col-sm-3" id="box">
<div id="innercontent">
<h3>WELCOME TO FORTREX</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
MORE ABOUT US ❱
</p></div>
</div>
<div class="col-xs-5 col-sm-3" id="box"><img width="100%" src="./images/datamanagement.jpg">
<div id="innercontent">
<h3>DATA MANAGEMENT</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
READ MORE ❱
</p></div>
</div>
<div class="col-xs-5 col-sm-3" id="box"><img width="100%" src="./images/storageservices.jpg">
<div id="innercontent">
<h3>STORAGE SERVICES</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
READ MORE ❱
</p></div>
</div>
<div class="col-xs-5 col-sm-3" id="box"><img width="100%" src="./images/aviationstorage.jpg">
<div id="innercontent">
<h3>AVIATION STORAGE</h3>
<p>
But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain was born and I will give you a complete count of the system, and expound the actual teaings of the great explorer idea announcing. But I must explain to you how all this mistakn idea of denouncing pleasure and praising pain
</p><p>
READ MORE ❱
</p></div>
</div>
</div>
<div style="clear:both"></div>
<div id="services">
<div class="col-md-4" style="padding: 0;"><h1>OUR SERVICES</h1></div>
<div class="col-md-8" style="padding: 0; padding-top: 20px;"><hr></div>
<div style="clear:both"></div>
<div class="col-md-4" id="box">
<div id="inner">
<div class="col-md-4"><h5 style="font-weight: bold;">PACKAGING AND STORAGE</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/packaging.jpg"></div>
</div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">TRANSPORT</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/trans.jpg"></div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">WORLDWIDE TRANSPORT</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/globtrans.jpg"></div>
</div>
<div style="clear:both">
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">WAREHOUSING</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/warehousing.jpg"></div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">DOOR-TO-DOOR DELIVERY</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/delivery.jpg"></div>
</div>
<div class="col-md-4" id="box">
<div class="col-md-4"><h5 style="font-weight: bold;">GROUND TRANSPORT</h5>
<p>But I must explain to you how all this mistakn idea of </p>
</div>
<div class="col-md-2" style="padding: 10px;"><img src="./images/groundtrans.jpg"></div>
</div>
</div>
<div style="clear:both; padding:20px;"></div>
</div>
<div id="contactsales">
<div id="inner">
<div class="col-md-8" style="top: 35px; font-size: 20px;">Not Sure which Solution fits your buiness needs?</div>
<div class="col-md-4" style="top: 20px;"><img src="./images/contactsales.jpg"></div>
</div>
</div>
<div id="latestnews">
<div id="inner">
<div id="title">
LATEST NEWS
</div>
<div class="col-md-4" id="box">
<img width="100%" src="./images/example1.jpg">
<div id="innercontent">
<h4>NEW PREMISES INAUGURATED BY JOSEPH MUSCAT PRIME MINISTER OF MALTA</h4>
<p>By Ryan it-Triplex</p>
</div>
</div>
<div class="col-md-4" id="box">
<img width="100%" src="./images/example2.jpg">
<div id="innercontent">
<h4>THE FIRST AVIATION ‘FORTRESS’ in MALTA OPENS</h4>
<p>By Ryan it-Triplex</p>
</div>
</div>
<div class="col-md-4" id="box">
<div id="news">
<h5>NEW PREMISES INAUGURATED BY JOSEPH MUSCAT PRIME MINISTER OF MALTA</h5>
<p>By Ryan it-Triplex</p>
</div>
<div id="news" style="background: rgb(240,240,240)">
<h5>THE FIRST AVIATION ‘FORTRESS’ in MALTA OPENS</h5>
<p>By Ryan it-Triplex</p>
</div>
<div id="news">
<h5>THE FIRST AVIATION ‘FORTRESS’ in MALTA OPENS</h5>
<p>By Ryan it-Triplex</p>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
What I did is that I move the #contactsales and #latestnews out of the #services and put next to the #services.
This is because contactsales and latestnews divs are present inside div having id="services which has width: 80%.
So either remove the two divs outside the <div id="services>, or give width: 100% to #services div i.e.
#content #services {
width: 100%;
margin: 0 auto;
display: block;
}
See the screenshot:
Because your last 2 divs is inside div with id = services. If you want last 2 divs is full width, you should move it out of div#services. You can move your div to footer div below it like this.
This is because both are taking 100% width of what their parent allocated then.
Their immediate parent is #services, and it uses 80% of the webpage width as defined by its CSS.
Change this:
#content #services {
width: 80%;
margin: 0 auto;
display: block;
}
to this:
#content #services {
margin: 0 auto;
display: block;
}
Current structure:
You have a syntax error on line 306 of your code:
<div style="clear:both"/>
change to to this: <div style="clear:both"> </div>
div tags should always have an explicit matching closing tag.
This will separate #contactsales and #newslatest from #services
When you are using percentage in height and width in CSS, it means that you want for example 80% of your reference width, which is the width of the parent. here you have #service as parent of #contactsales and #latestnews.
#service parent is #content. #service width is 80% of your #content and #contactsales and #latestnews are 100% of their parent.means 80% of #content too.
If you do not want to move #contactsales and #latestnews you should wrap them with someclass and change that class refrence width with position:absolute, and set position:relative to #content.Now these two Ides think of #content as their parent.
but I don't recommend position:absolute,just move them from #service
.wrapperclass{
position : absolute;
width: 100%;
left: 0;
}
#content{
position: relative;
width:100%;
left:0;
}
#content #contactsales{
width:100%;
background-color:red;
height:40px;
position:relative
}
#content #latestnews{
width:100%;
background-color:green;
position:relative;
height:40px
}
#service{
width:80%;
margin:0 auto;
background-color: yellow;
height:120px;
}
<div id="content">
<div id="service">
<div class="wrapperclass">
<div id="contactsales"></div>
<div id="latestnews"></div>
</div>
</div>
</div>

How do I make text wrap around jssor image slider?

I am using a jssor image slider on my home page. Next to it will be a paragraph of text. I cannot get the text to wrap around the jssor image slider. I have tried float and text-align and cannot get it to work. Does anyone have any ideas how I can get the text to wrap around the jssor image slider?
Code is as follows:
HTML:
<div class="content">
<!-- image slider -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:
800px; height: 355px; background: #c6eafb; overflow: hidden; margin-right: 2%; margin
bottom: 1.5%; z-index: -1;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;"></div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no
repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"></div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width:
800px; height: 356px; overflow: hidden;">
<div>
<img u="image" src="images/mombaby.jpg" />
</div>
<div>
<img u="image" src="images/baby.jpg" />
</div>
<div>
<img u="image" src="images/family.jpg" />
</div>
<div>
<img u="image" src="images/finalization.jpg" />
</div>
<div>
<img u="image" src="images/baby2.jpg" />
</div>
</div>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px;
left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px;
right: 8px"></span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">banner slider</a>
<!-- Trigger -->
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
<!-- Jssor Slider End -->
<p class="text">Welcome to Adoption Covenant
Making the decision to adopt a child can be difficult but the process involved with
adopting doesn’t have to be. Adoption Covenant is a licensed, full service adoption
agency for both domestic and international adoption. Our goal is to place children for
adoption with loving families while simplifying and reducing the expense and heartache
commonly involved with the process. Our unique adoption services are rooted in a deep
understanding of adoption laws and our commitment to improving the lives of parentless
children around the world.
"Unless someone like you cares a whole awful lot, nothing is going to get better. Its
not."
Dr. Seuss, The Lorax
</p>
</div>
CSS:
.content {
margin-right: 3%;
margin-left: 3%;
z-index: 100;
background-color: #FFFFFF;
opacity: .85;
border-radius: 30px;
height: 365px;
padding: 1%;
}
.text {
font-family: "Open Sans", sans-serif;
font-size: 1.3em;
font-weight: 400;
color: #000066;
}
/* image slider */
/* jssor slider arrow navigator skin 05 css */
/* .jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05ldn (mousedown)
.jssora05rdn (mousedown) */
.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a17.png) no-repeat;
overflow:hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05ldn { background-position: -250px -40px; }
.jssora05rdn { background-position: -310px -40px; }
/* image slider */
Please specify 'float: left' for 'slider1_container'.
<div id="slider1_container" style="... float: left; ..." ...>
Reference 'Jssor.Slider.FullPack\demos-jquery\responsive-slider-float-text.source.html'

CSS Content overlapping

im having this issue.. keep in mind i'm no expert in CSS i just did my best i could to make a website for my company.
The problem is when i resize the site or view it on XAMPP with ipad its all overlaped!
i want it to stop moving and show scroll bars like normal site would not overlap content!
however when its full screen its fine its on my 1920x1080 monitor.
my CSS:
#charset "utf-8";
/* CSS Document */
body
{
height: 900px;
padding: 0;
margin: 0;
background-image: url(Images/bkg.jpg);
}
.header
{
position: absolute;
width: 100%;
height: 100px;
top: 0;
background-image: url(Images/header.jpg);
border-bottom: #CCC 2px solid;
box-shadow: 0px 0px 25px #F00;
}
.logo
{
position: absolute;
top: 70px;
left: 50%;
margin-left: -203px;
}
#dog
{
position: absolute;
right: 0px;
width: 244;
height: 500;
top: 15%;
}
.buttonholder
{
Width: 600px;
height: 150px;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -230px;
color: #FFF;
font-size: 18px;
}
#textholder
{
position: absolute;
left: 100px;
top: 35%;
font-size: 36px;
color: #FFF;
font-family: 'Tangerine', cursive;
width: 650px;
height: 300px;
}
#galleryholder
{
width: 460px;
height: 284px;
position: fixed;
left: 50%;
margin-left: -230px;
top: 50%;
margin-top: -145px;
border: #CCC 1px solid;
-moz-box-shadow: 0 0 25px 8px #000;
-webkit-box-shadow: 0 0 25px 8px#000;
box-shadow: 0 0 25px 8px #000;
overflow: auto;
}
/* gallery */
#s3slider
{
width: 500px;
/* important to be same as image width */
height: 300px;
/* important to be same as image height */
position: relative;
/* important */
overflow: hidden;
/* important */
margin-left: -40px;
margin-top: -16px;
}
#s3sliderContent
{
width: 500px;
/* important to be same as image width or wider */
position: absolute;
/* important */
top: 0;
/* important */
margin-left: 0;
/* important */;
}
.s3sliderImage
{
float: left;
/* important */
position: relative;
/* important */
display: none;
/* important */;
}
.s3sliderImage span
{
position: absolute;
/* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 474px;
background-color: #000;
filter: alpha(opacity=70);
/* here you can set the opacity of box with text */
-moz-opacity: 0.7;
/* here you can set the opacity of box with text */
-khtml-opacity: 0.7;
/* here you can set the opacity of box with text */
opacity: 0.7;
/* here you can set the opacity of box with text */
color: #fff;
display: none;
/* important */
top: 0;
/*
if you put top: 0; -> the box with text will be shown
at the top of the image
if you put bottom: 0; -> the box with text will be shown
at the bottom of the image
*/;
}
.clear
{
clear: both;
}
my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Benčić Tartufi</title>
</head>
<body>
<div class="buttonholder">
<p style="float:left; margin-right:15px;">Kontakt / Contact</p>
<p style="float:left; margin-right:15px;">O nama / About Us</p>
<p>Proizvodi / Products</p>
<img src="Images/Separator.png" width="600px" height="77" style="margin-left:-70px; position:relative; bottom:30px;;" />
</div>
<div id="dog">
<img src="Images/dog.png" />
</div>
<div class="header">
</div>
<div class="logo">
<img src="Images/logo.png" />
</div>
<div id="textholder">
<p>"Iz Motovunske šume na Vaš stol, <br />
najbolji okus prirode, Tartuf."
</p>
<p>"From the Motovun woods to Your table,<br />
best taste of nature, the Truffle."
</p>
<img src="Images/Separator.png" width="550px" height="77px" style="position:relative; bottom:30px; margin-left:-75px;" />
</div>
<div id="galleryholder">
<!-- GALERIJA! DODAVAT SLIKE U IMG SRC SA SPANOM! -->
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="Slike tartufa/1.jpg">
<span>Hello Truffles</span>
</li>
<li class="s3sliderImage">
<img src="Slike tartufa/2.jpg">
<span>Hello Truffles</span>
</li>
<!--Kopiraj si za novu sliku!! -->
<li class="s3sliderImage">
<img src="#">
<span>Hello Truffles</span>
</li>
<!--End-->
<div class="clear s3sliderImage"></div>
</ul>
</div>
<!--KRAJ GALERIJE!-->
<!--gallery holder div close-->
</div>
<!--end!-->
<script>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3600
});
});
</script>
</body>
</html>
For what i see here you are mixing % and px in your widths and heights when you use % it will make the design fluid according the the width of the browser so remove all % and replace them with px. also I would recommend wrapping the your code in a
<div class="wrap">
.wrap{
marging: 0 auto;
width: 960px;
}
It is very hard for us to help you with this code, since we cant view the images you are using. if you upload it to a website then it would be a lot easier.