I'm currently working on a site, and I am having problems with two images not displaying correctly. IE 9 is the only browser I'm having problems with, so I just need some help. I'm working on a slideshow that has a shadow background to it. At the ends of the slideshow I'm attempting to just create two clickable divs that are transparent so I can move the slideshow back and forth. But the shadow background image is being layered on top of the transparent divs, and covering all but the extreme edges of the divs, whenever the cursor changes to a pointer is when you're over the divs.
<div id="HomeCarousel">
<div id="slideshow">
<div id="slideshow-area">
<div id="slideshow-shadow"><img src="#ACCOUNTRESOURCES/BannerOverlay.png" /></div>
<div id="slideshow-container">
<div id="slideshow-scroller">
<div id="slideshow-holder">
<div class="slideshow-content" id="slide0">
<img name="image0" src="#ACCOUNTRESOURCES/Orange.png"/>
</div>
<div class="slideshow-content" id="slide1">
<img name="image1" src="#ACCOUNTRESOURCES/Green.png"/>
</div>
<div class="slideshow-content" id="slide2">
<img name="image2" src="#ACCOUNTRESOURCES/Blue.png"/>
</div>
</div>
</div>
</div>
</div>
<div id="click">
<div id="left-arrow"></div>
<div id="right-arrow" ></div>
</div>
</div>
</div>
This is my html layout, #slideshow-area and #left-arrow,#right-arrow are the elements I'm having a problem with.
#slideshow {
position:relative;
}
#slideshow-area {
position:absolute;
left:35px;
width:910px;
height:279px;
}
#slideshow-shadow {
position:absolute;
width:966px;
top:-22px;
left:-28px;
z-index:2;
}
#slideshow-container {
position:absolute;
overflow:hidden;
width:910px;
height:279px;
}
.slideshow-content {
width:910px;
height:279px;
}
#click {
position:relative;
position:absolute;
z-index:4;
}
#left-arrow, #right-arrow {
height:279px;
width:35px;
position:absolute;
top:22px;
z-index:3;
}
#left-arrow {
left:0px;
cursor:pointer;
}
#right-arrow {
left:945px;
cursor:pointer;
}
That is my CSS, as far as I know I'm doing things correctly, just IE 9 is not displaying it. Does anybody know anything I could do to fix this? Here's the website if you need it.
Thanks,
Morgan
div#click has no height; it is a 980x0px element since it does not contain a non-floated, non-positioned element. Define height on this element and the arrows contained in it will work as expected.
Related
I make 2 divs with different images next to each other.
One will be called "Land" and the other "Property".
On hover, I want to expend the width (From 50% to 75%) of the hovered div.
I managed to make it work with the left div but not with the right div.
How ? Why? Been tying a lot of things without success.
<body>
<div class="container-fluid">
<div class="size" id="proprety">
<h1>Propreties</h1>
<p>The best of the proprety</p>
</div>
<div class="size" id="land">
<h1>Land</h1>
<p>The best of the proprety</p>
</div>
</div>
</body>
.size{
height:600px;
overflow:hidden;
-webkit-transition: width .2s;
float:left;
background-repeat:no-repeat;
}
.borders{
padding:10%;
}
#proprety{
background-image:url(proprety.jpg);
width:50%;
}
#land{
background-image:url(land.jpg);
-webkit-transition: width .2s;
width:50%;
}
#proprety:hover{
width:75%;
}
#proprety:hover + #land{
width:25%;
}
#land:hover{
width:75%;
}
#land:hover + #proprety{
width:25%;
}
So far:
https://jsfiddle.net/Chloe75/akbqxc2v/
Short answer: the element+element selector only works for forward elements, and not backwards like you used in
#land:hover + #proprety{
width:25%;
}
Since #land comes after #proprety, it won't work like you want it to.
You can emulate this using flexbox like:
.size{
height:200px;
overflow:hidden;
-webkit-transition: width .2s;
float:left;
background-repeat:no-repeat;
}
.borders{
padding:10%;
}
#proprety{
background-color:blue;
width:50%;
}
#land{
background-color:green;
width:50%;
}
#proprety:hover, #land:hover{
width:75%;
}
div.container-fluid {
display: flex;
}
<body>
<div class="container-fluid">
<div class="size" id="proprety">
<h1>Propreties</h1>
<p>The best of the proprety</p>
</div>
<div class="size" id="land">
<h1>Land</h1>
<p>The best of the proprety</p>
</div>
</div>
</body>
I am trying to add text and a button on top of a background image I cannot figure out the CSS for the margins and positions on liquid page.If you can steer me in the right direction or help. Thank you!
.feature_home{
margin:?
position:?
}
.feature_image{
margin:?
position:?
}
.feature_text{
margin:?
position:?
}
.feature_button{
margin:?
position:?
}
<div class="feature_home">
<img class="feature_image" alt="Thanks For your guys help" src="images/xyz.com">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
</div>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x background Image x
x Text Here: X
x Text Here: x
x x
x Button Here: x
x x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
It wont let me ad an image until I get 10 reputations to post image.
Is this what you are looking for?
.feature_home{
position: relative;
display: table-cell;
vertical-align: bottom;
text-align: right;
width: 350px; /* image width */
height: 150px; /* image height */
}
.feature_image{
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
<div class="feature_home">
<img class="feature_image" alt="Thanks For your guys help" src="http://placehold.it/350x150">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
http://jsfiddle.net/7zvL5zto/2/
You can just get rid of <img> and use background-image style on .feature_home and give it a position:relative; so you can position feature_home and feature_button like you want it.
Here you have HTML code:
<div class="feature_home" style="background-image:url(image);">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
And here is CSS:
.feature_home{
width:300px;
height:200px;
position:relative;
display:block;
background-position:center center;
background-size:100%;
}
.feature_text{
position:absolute;
right:2px;
bottom:15px;
}
.feature_button{
right:2px;
bottom:2px;
position:absolute;
}
All the values are for example :)
http://jsfiddle.net/cjtdhcLr/
Here is something that will work, and instead of the red background choose your image
.feature_home {
width:400px;
background:red;
float:left;
padding:15px
}
p {
text-align:right;
}
a {
float:left;
text-align:right;
width:100%;
}
<div class="feature_home">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
<style>
.feature_home{
background-image:url("http://2.bp.blogspot.com/-biBlhcDYdZI/ULjLQeeCwzI/AAAAAAAAAmo/T9M9YTcMeWY/s400/BackgroundPanel.pngg");
background-repeat:no-repeat;
padding-left:25px;
padding-right:25px;
height:200px;
width:321px;
position:absolute;
}
.feature_button{
color:white;
position:absolute;
right:30px;
}
</style>
<div class="feature_home">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
</div>
Use position:absolute; http://www.w3schools.com/css/css_positioning.asp
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is :
This should be enough to get you started. I would not use an actual img. You would be better assigning the image as the background of your feature_home div. See the css background-image.
if you have to use the img then you will need to use z-index to position the elements in layers with the image set below all of the other items.
My site: www.pkgeek.com
Just scroll down to the footer and you will see Powered by and on the next line you will see two icons (Blogger icon and namecheap icon). I want these icons to be displayed next to Powered by: (Not on the next line).
My HTML Code for these icons and the footer Powered by links:
Powered By: <div class="div123">
</div></div>
CSS CODE:
.div123 {
}
.blogger {
background:url('http://2.bp.blogspot.com/-EcPHtL7JRak/Uz8VLVBfGCI/AAAAAAAAAoc/WOHpaJy7hxg/s1600/blogger.png');
background-position:0 0;
width:25px;
height:25px;
display:inline-block;
}
.blogger:hover {
background-position:0 25px;
}
.namecheap {
background:url('http://1.bp.blogspot.com/-GOvEY9lWKkU/Uz8VNmQMq5I/AAAAAAAAAok/RRLbRx_EDYc/s1600/Namecheap.png');
background-position:0 0;
width:35px;
height:20px;
display:inline-block;
}
.namecheap:hover {
background-position:0 20px;
}
I think you need to give the following css property float:left to the **two pictures and the text. Edit the html to this and it works:
<div style="float:left;"> Powered By:</div> <div class="div123">
</div></div>
remove the width for the div poweredbylinks and add the properties: .poweredbylinks{ vertical-align:top; line-height:25px; } and for the div .div123 remove the width, float and the height, and set his styles to: .div123{ display:inline-block; }
Replace div by this:
<div class="poweredbylinks">
<div style="float:left">Powered By:</div> <div class="div123">
<i class="blogger"></i>
<i class="namecheap"></i>
</div>
</div>
You can just add style=" display: inline; " to your divs like this: jsfiddle
I have an audio post where the information is in rotated DIVs that are displayed on top of the album art. To see what I mean go here (the page). The area on the bottom left corner is the information. When viewed in Chrome you will see that the edges of the DIVs are blurred. Is there a way to "alias" the DIVs so they appear sharp? I know it's not a resolution thing because Firefox displays them perfectly.
.audioBox {
position:absolute;
bottom:160px;
margin-left:-11px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
z-index:3;
width:343px;
}
.boxify {
margin:1px;
padding:5px;
float:left;
bottom:0;
width:329px;
}
.box {
background:#000;
padding:5px;
padding-left:10px;
padding-right:10px;
margin-left:-5px;
}
<div class="audioHolder">
<div class="audioBox">
<div class="boxify" id="song">
<img id="audioBubble"
src="http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png">
{block:TrackName}
<span class="box">{TrackName}</span>
{/block:TrackName}
</div>
<div class="boxify" id="artist">
{block:Artist}
<span class="box">{Artist}</span>
{/block:Artist}
</div>
<div class="boxify" id="label">
<span class="box">{PlayCountWithLabel}</span>
</div>
<div class="boxify" id="download">
<span class="box">Download
{block:ExternalAudio}
Download
{/block:ExternalAudio}</span>
</div>
</div>
Solution: I replaced the background color with a background image of the same color instead. :-) Hope it helps somebody else with a similar problem.
I know I'm little late but...
I have similar problem now and in my case changing the size helps, just use even numbers
.blurry {
left: 100px;
height: 30px;
width: 135px;
}
.sharp {
left: 200px;
height: 30px;
width: 136px;
}
http://jsfiddle.net/_hags/9e4cS/
In IE7, my order sample button "#itmSampl" isn't vertically aligned with the ".add-to-cart" button to the left of it, although in FF3.6 and Chrome 5 it is. I need it to be aligned correctly in IE6-8. Does anyone see what I'm missing?
<style type="text/css">
#buttonbox { position:relative; width:326px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><%=getCurrentAttribute('item','addtocarthtml')%></table>
</div>
<div id="ordrWizrd" class="add-to-cart"><img src="/images/img/add-to-cart.gif" alt="configure item"></div>
<div id="itmSampl"></div>
</div> <div class="clearfix"></div> </div>
Also, here's the test page if a visual helps (you have to login to see the buttons instead of the bulleted list): http://www.avaline.com/85W_test_2
Login:test2#gmail.com
Pass:test03
Solution 1: Since you are already using a lot of tables in your page, another one won't hurt - just change your HTML from what you have above to something like this (may require a few tweaks):
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><tr>
<td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
<td valign="bottom"><div id="itmSampl"></div></td>
</tr></table>
</div>
<div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->
Solution 2: Take away all the "position: absolute" stuff with #itmSampl (remove the CSS bottom, position, right, and maybe margin and height/width properties). Then, add CSS float: right; margin-top: -36px; to #itmSampl to make it float on the right and move upward 36 pixels.