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/
Related
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.
I'm trying to write text over an image with the CSS and HTML below but it's not working..
CSS
.social_media_head{
background: url(newsletter_image.gif) no-repeat center;
position: relative;
right: -9px;
height: 0;
width: 325px;
padding: 30px 0 0 5px;
}
.media_name h2{
position: relative;
top: 2px;
}
.media_name {
position: relative;
top: 2px;
}
HTML
<div class="social_media_head">
<h2 class="media_name">Social Media</h2>
</div>
Example jsfiddle
Update
I'm very sorry if the image I'm referring to is wrong. The image I want to put text on is the image on top of the social media icons (facebook, twitter, youtube)...i.e. Image inside class = "social_media_head".
Once again I'm sorry for the confussion.
you can do this by setting z-index of text higher than image and position absolute
.text{
z-index:101;
position:absolute;
/set the position of text you want
}
.image{
z-index:100;
}
and to text above image
.media_name h2 should be h2.media_name
h2.media_name {
color: red;
margin-top: -30px;
top: 2px;
}
full screen Result and fiddle
Try the following to avoid H-tags, and for the box to adjust for height the image is inline rather than as background: (see code here http://jsfiddle.net/jySZB/1/)
(due to update, the old code is removed and kept in the link above - see new link and code below) -
UPDATE: if "over an image" means above rather than on top (which do make more sense in this case), try this code instead:
http://jsfiddle.net/jySZB/2/
HTML:
<div class="social_media_head">
<div>Social Media</div>
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
</d
CSS:
.social_media_head {
display:block;
}
.social_media_head div {
color:red;
font-size:26px;
font-weight:bold;
font-family:sans-serif;
clear:both;
}
Result:
Tip: as the images are inline here they are easy to convert to click-able links to go the the social sites (I used only one image for example).
Works for me (simplified): http://jsbin.com/uqazel/1/
Maybe you need to set an appropriate height.
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.
I've been using the new CSS border-radius function for a while now, but I'm stumped today! I have a background image (120px x 60px) and have set a border radius of 5px, but it's only rounding the top two corners?!
The CSS code I'm using is here:
#buttonRow {
position:relative;
width:980px;
height:60px;
margin-left:51px;
margin-bottom:25px;
float:left;
}
#button {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:10px;
border-radius:5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
}
#singleLineButton {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:20px;
border-radius:5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
}
#buttonText {
width:120px;
height:auto;
color:#FFFFFF;
text-align:center;
font-size:16px;
font-family: Adobe Kaiti Std R;
}
And the output is this:
Why is it only showing the top corners as rounded?!
Any help would be greatly appreciated!
Thanks, Zulu
EDIT
Here is the HTML for those asking:
<div id="buttonRow">
<a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
<div id="button"><div id="buttonText">Individual Table Management</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
<div id="singleLineButton"><div id="buttonText">Attendance</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
<div id="singleLineButton"><div id="buttonText">School Members</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
<div id="singleLineButton"><div id="buttonText">Search</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
<div id="singleLineButton"><div id="buttonText">School Details</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
<div id="singleLineButton"><div id="buttonText">Users</div></div>
</a>
</div>
It might be that your image isn't long enough and thus you don't see the rounded corners on the bottom. I ran into that today, actually.
I simply set a background color and it showed me what the issue was. So, just modify your CSS to:
background-image: #00ff00 url('../assets/buttons/generic_button.png');
or:
background-color: #00ff00; /* bright green for contrast */
background-image: url('../assets/buttons/generic_button.png');
That will at least tell you if your image covers the whole area or not and you will know what to do from there.
In CSS3 it's done like this:
border-top-right-radius: 8px;
border-top-left-radius: 8px
Most likely the bottoms are getting cut off from overflow. Make sure the containing element is tall enough to accomodate the heights of these or set the all the ancestor's overflow to overflow: visible.
Also, use jsfiddle.net to post live examples instead of just the CSS in a vacuum. CSS requires context.
As previously answered, your image isn't large enough. Your div is 120x60px to match your image, but you have a padding-top of 10px, which extends the size of the div to 120x70px total--too large to show the rounding. Either change the size of your background image or resize the div to 50px tall--with padding, it'll end up at the proper size.
You can use this code
#buttonRow {
width: 1170px;
margin: 0 auto;
display: block;
}
#button {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:10px;
border-radius: 5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
background: red;
}
#singleLineButton {
position:relative;
float:left;
width:120px;
height:60px;
margin-left:25px;
padding-top:20px;
border-radius: 5px;
background-image:url('../assets/buttons/generic_button.png');
background-repeat:no-repeat;
background: red;
}
#buttonText {
width:120px;
height:auto;
color:#FFFFFF;
text-align:center;
font-size:16px;
font-family: Adobe Kaiti Std R;
}
<div id="buttonRow">
<a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
<div id="button"><div id="buttonText">Individual Table Management</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
<div id="singleLineButton"><div id="buttonText">Attendance</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
<div id="singleLineButton"><div id="buttonText">School Members</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
<div id="singleLineButton"><div id="buttonText">Search</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
<div id="singleLineButton"><div id="buttonText">School Details</div></div>
</a>
<a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
<div id="singleLineButton"><div id="buttonText">Users</div></div>
</a>
</div>
Try using margin-top instead of padding top, I've had this issue recently and that seemed to fix it.
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.