|
CSS - Png Image Issue
I am trying but failing to get this to work. I have used a slider (bxslider)and made some changes to it so that I have my other slides visible.
Then I have added a background png so that the right and left images are covered with a transparent png with around 80% opacity. Now the problem I am having is that because I have applied this image to the div it is now stopping the links being active. Can anyone help me get this right, I need the transparent png to be over the main viewport so the right and left images are not fully shown. If you view this url you will see what i mean: http://www.barryzimmerman.co.uk/new/ When you see the text for each slide, it should be an active link to the website, but because of the png it is stopping this. I really want to achieve this, so any help much appreciated. The css files are he http://www.barryzimmerman.co.uk/new/css/design.css http://www.barryzimmerman.co.uk/new/css/content.css Please help Similar TutorialsLook at this page http://hometown.tmhdesign.com See the right hand column, top element labeled "Quick Connections"? The icons are a bg on the containing div element that is holding an ul. I have that bg exactly where I want it in FF, but in IE7 is higher than it should be by about 5-10 pixels. Hi to all, I have a problem to show full image on background.The css which i am using is good if the screen size is 17 inches or less but above 17 inches background image does not expand to full width and height. One thing i want to clear that we can't repeat that image . any solution to this problem will be appreciated. thanks Hi, I need to create a object like in the attached image (worldmap.gif). The image itself in not hot, just the text;s above it. When the user hovers over the text, two things should happen: 1- The corresponding image should swap with a darker version (Attached: img_continent_africa.gif etc) 2- and a dropdown menu should appear as shown in worldmap.gif. My question is: How should I approach this from a css layout perespective. How do I position the over-state images. thanks, Zain for some reason i cant figure out, i cant get a background image to show up at all in my document. ive tryed validating both CSS and HTML, ive tryed different approaches to adding a background image in CSS and even removing individual styles to try to find the source of the issue. I am new to this forum and this is my first post. if anyone can tell me why this isnt working i would greatly appriciate it. here is the code: Code: <html>
<head>
<title>Home</title>
<style type="text/css">
body
{
background:#3D1400;
}
/******modual positioning******/
div#container
{
width:48em;
height:41em;
margin-right:auto;
margin-left:auto;
margin-top:auto;
margin-bottom:0em;
padding:1em;
padding-top:0em;
background:#00BFBF;
}
/******* this is where im trying to put a background image*/
div#headding
{
background:url("") purple repeat-x;
width:48em;
height:4em;
padding:1em;
margin-bottom:3.5em;
margin-left:-1em;
}
img.bd
{
position:relative;
width:50em;
height:0.5em;
left:-1em;
top:-0.5em;
}
nav
{
margin-top:-1em;
margin-left:0em;
margin-bottom:3em;
width:48em;
height:1.5em;
background:#ffffff;
padding-left:0em;
border-radius:0.2em;
}
/*side bar*/
div#side_left
{
width:10em;
height:29em;
float:left;
background:#4CD2D2;
}
#contests, #featured_blog, #featured_discussion, #featured_poll
{
width:10em;
margin:0.8em;
color:#0D1A8C;
font-weight:900;
font-size:0.8em;
background:#79DDDD;
padding:0.5em;
}
hr.side
{
border:0.1em solid #0D1A8C;
width:10em;
}
/*side bar end*/
div#featured_photo
{
float:left;
margin-left:1em;
width:20em;
height:20em;
background:#000000;
overflow:hidden;
border-radius:1em;
}
div#top_rated_photos
{
float:right;
width:16em;
height:20em;
background:#111111;
}
footer
{
position:relative;
height:4em;
width:58.6em;
margin-right:auto;
margin-left:auto;
background:#000000;
text-align:center;
padding:2em;
font-size:0.8em;
}
a.f
{
color:#ffffff;
text-decoration:none;
border-right:.1em solid #ffffff;
padding-right:1em;
margin-right:0.3em;
padding-left:0.3em;
margin-left:0.3em;
}
/**********Photo Gallery**********/
a.tr_img img.top_r
{
height:3.9em;
width:3.9em;
float:left;
border:0.1em solid #000000;
}
a.tr_img img.top_r:hover
{
margin:0em;
border:.1em solid #ff0000;
}
/******text styles******/
h1
{
font-size:2em;
text-transform:capitalize;
border-bottom:0.2em solid #8C8CE8;
color:#8C8CE8;
}
span#fp
{
color:#999999;
float:right;
margin-right:1em;
font-weight:bold;
display:block;
}
/***************************************NAVIGATION BAR***************************/
/*top level styles*/
ul.top_link li
{
float:left;
background:#ffffff;
position:relative;
display:inline;
border-right:0.1em solid #00BFBF;
border-left:0.1em solid #00BFBF;
}
ul.top_link a
{
display:block;
position:relative;
font-size:1.3em;
color:#000000;
text-decoration:none;
padding-left:1em;
padding-right:1em;
}
/* style the top level hover incase images fail *//* dropdown ul styles */
ul.top_link li.sub_link a
{
padding-right:0.5em;
padding-left:0.5em;
width:8em;
}
ul.top_link >li:hover
{
background:#000080;
}
ul.top_link >li>a:hover
{
color:#ffffff;
}
ul.top_link li:hover.sub_link, ul.top_link li.sub_link a:hover, ul.top_link li.sub_link a.mn_active
{
background:#000080;
color:#ffffff;
}
/********* dropdown sytles *********/
ul.top_link li ul
{
position:absolute;
top:2em;
left:0;
z-index:1;
visibility:hidden;
}
ul.top_link li > ul
{
top:auto;
left:auto;
}
ul.top_link li:hover ul, ul.top_link, ul.top_link a:hover ul
{
visibility:visible;
}
ul.top_link ul li
{
border:none;
height:auto;
float:left;
width:8em;
top:0.15em;
left:-2.6em;
padding:0em;
text-align:left;
background:#ffffff;
}
ul.top_link ul li a
{
float:left;
font-size:0.8em;
text-decoration:none;
display:block;
height:2em;
line-height:2em;
text-align:left;
}
/************************** ~DROPDOWN STYLES~ *************************/
.top_link li.sub_link ul
{
background:#ffffff;
padding-left:0em;
}
.top_link li.sub_link ul li a
{
width:8em;
}
.top_link li.sub_link ul li a:hover
{
background:#000080;
color:#6385A6;
} </style>
<base href="index.html" />
</head>
<body>
<div id="container">
<div id="headding">
<h1>Welcome to purple panda bear ♥</h1>
<img src="" class="bd" />
<img src="" class="bd" />
<img src="" class="bd" />
</div>
<nav>
<ul class="top_link">
<li class="top_link">
<a href="index">home</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">blog</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">forum</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="">forum</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">gallery</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">anime</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
<li class="top_link">
<a href="index">login</a>
<ul>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
<li class="sub_link">
<a href="">sub link</a>
</li>
</ul>
</li>
</ul>
</nav>
<div id="side_left">
<div id="contests">
Featured Contests
<hr class="side" />
<a href="">Bunnys vs. Pandas</a>
<a href="">Dianoaurs vs. Elefants</a>
<a href="">Pickles vs. Ice Cream</a>
</div>
<div id="featured_blog">
Featured Blogs
<hr class="side" />
<a href="">blog 1</a> by,
user 1<br />
<a href="">blog 2</a> by,
user 2<br />
<a href="">blog 3</a> by,
user 3<br />
</div>
<div id="featured_discussion">
Featured Forums
<hr class="side" />
<a href="">Anime discussion</a>
<a href="">Panda discussion</a>
<a href="">Epicness </a>
</div>
<div id="featured_poll">
Featured Poll
<hr class="side" />
What is your favorate fuzy animal?<br />
<input type="radio" value="bunnys" />Bunnies<br />
<input type="radio" value="pandas" />Pandas<br />
<input type="radio" value="kittys" />Kittys
</div>
</div>
</div>
<footer>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
<a href="" class="f">footer link</a>
</footer>
</body>
</html>
I am using eclipse ide to develop a html page. It has a preview function where I can see the background image correctly. However when I run this in a an external browser (IE/Firefox) the background image does not appear. I can go to the location of the image in the browser and see it, also I can view source in browser and it is as below. Also the image is in the same directory as the html page. Any help at all on this would be very much appreciated. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
body {margin-left: 0px;margin-right: 0px;background:url(bg-gray.gif) repeat center left;color: #000000;}
</style>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Login</title>
</head>
<body >
</body>
</html>
I need to have numerous images overlap exactly on top of one another at the upper left corner of a frame cell. When I use absolute positioning, the image is not where it is supposed to be in relation to the table cell. Relative works, but I cannot seem to overlay the images, as adding images via relative layers just acts as if the images are not in layers at all (i.e. they take up the same space that they would in a normal flowing page) Is there any way I can make the images be placed relative to the corner of the table cell? I'm somewhat new to layers, so any help would be greatly appreciated. Here is example code <TABLE WIDTH=500 HEIGHT=500 BORDER=0> <TR> <TD width=300 height=100> Need image1 to go in this cell, as well as image2, image3, and image4. All need to overlap perfectly in relation to the constraints of this table cell. Here is the code I use in the cell for the first 2 layers which just flow one under the other- yet I need them to overlap. <div id="Layer1" style="position:relative; width:518px; height:322px; z-index:1; visibility: visible;"><img src="images/Map2.gif" usemap="#Map" border=0></div> <div id="Layer2" style="position:relative; width:518px; height:322px; z-index:2; visibility: hidden;"><img src="images/iloverlay.gif" usemap="#Map" border=0></div> </TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> <table> hey all, k, i'm using an image replacement method that I have successfully used before, but the image will not show up in IE. It seems to have something to do with the .replace class, but i can't figure it out. here's the css; Code:
.replace {
position:relative;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden; /*
*/
}
.replace span {
display:block;
position:absolute;
top:0;
left:0;
z-index:1; /*for Opera 5 and 6*/
}
#homeh1, #homeh1 span {
background:url(images/h1_home.gif) no-repeat left;
height:60px;
width:312px;
}
and the html; Code: <h1 id="homeh1" class="replace">home<span></span></h1> And here's the offending page. any help'd be greatly appreciated. thanks. I'm having another link issue. I have images in a <ul> that are links. (It's a gallery using Slimbox + Mootools). Everything looks fine in FF. However, in IE, I get these little maybe 2 or 3 pixel (width) link lines that are blue and then purple when visited. They are not on every image. In fact, my <ul> has 4 lines of six images, and the little extra pixel lines fall in the margin after the first image of every line. Here's my CSS: Code: a img {
border: 0 none;
margin: 4px 4px 10px 4px;
text-decoration: none;
}
a:hover img {
border: 1px solid #e5cb43;
margin: 3px 3px 9px 3px;
}
ul.photog {
list-style-position: outside;
padding: 0px; margin: 0px;
border: none;
background-color: #979089;
width: 850px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
li.photog {
margin: 0px;
padding: 0px;
list-style-type:none;
}
Strange thing is that I have another <ul> that uses identical code to that one and doesn't have the problem I am experiencing with this one. Any help would be greatly appreciated. Thanks in advance! Nevermind, folks over at codingforums helped me. hi, Ive got a mixture of CSS and tables (not ideal i know) the problem is the image to the top right. ive added the image within the container and then the rest of the site content is within a table just below the container line within the index page. How do i get the image over the tabled data? URL: http://www.primaryictsupport.co.uk/clients/swinnow/ Thanks for any help... Mike I'm new with this image sprite method, at least with the type of image I have copied. I have it mostly working, but for some reason it word wraps the two word text that appears over the image. Here is a link to the example: ... EDIT: It seems I can't post a URL. I'll try on the second post. It is located in the Test Data tab on this product page. The button that says View More. View on one line, More on the other. I'm thinking it is an issue with my HTML more than the CSS. I've tried many different variations with not much like. I can break it more, but can't seem to fix it. Any help or guidance is appreciated. I have a page setup like this.... <table height="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr><td valign="top" class="lt_bar"><img src="template/blue_234/images/lt_shd.jpg" /></td> <td valign="top"></td> <td valign="top" class="rt_bar"><img src="template/blue_234/images/rt_shd.jpg" /></td> </tr> </table> and: .lt_bar { width: 27px; background-image: url("images/lt_shd.jpg"); background-repeat: repeat-y; float: left } .rt_bar { width: 27px; background-image: url("images/rt_shd.jpg"); background-repeat: repeat-y; float: right; } In IE all is fine, in FireFox the right side shows, the left side does not. any clues... Hi all, This problem has been plaguing me for a long while now and I am getting to the end of my tether! All I want to do is add a simple repeating background image to my 'container' div (i called mine #outer for some reason!) To do this i added the following CSS: Code: #outer { width:970px; text-align:left; margin:0 auto 50px; padding:0; background-image:url(/Images/bg.jpg); background-position:center; background-repeat:repeat-y;}
Pretty simple I thought! However, in FF/Chrome the background image does not show up at all, but in IE it does...here is the page: http://onyahead.com/latestnews_test.php Obviously, the output that i get from IE is actually the output I want...i just cannot get to the bottom of why it is not showing in FF!! Any ideas? Sam My site is: adventurevalley.ca/jason The current CSS file appears to work problem free in IE7 and FF, but Im having no luck in IE6. I realise things like the hover highlighting and menu indent will not work which I am fine with, however the corners and different box size are driving me insane. Can someone please point me in the right direction?! Thanks, Jason This may actually be a css not a javascript question. Those two are so tightly coupled the distinction blurs. My apologies if it is in the wrong forum. I adapted this social network bookmarking thing that I've seen kicking around. It uses prototype and scriptaculous that is why I am posting it here. It basically has an icon for each social network with a custom link to save the current page to the network in question. It appears on the following page http://demo.tixrus.us/calendar.php?filter=all below the calendar. The spacing is all wrong when it first renders, I want all the icons to be jam packed together. As you can see, it messes up and puts the last one at the beginning of a new row (not what I want). Now if you hide them and then click Social Networks again, they appear the way I wanted them in the first place. Is it because in the source each icon is on its own line? Code: <a href="xxxxx"><img ....../></a> <a href="yyyyy"><img ...../></a> as opposed to jam packing the codes into extremely long lines Code: <a href="xxxxx"><img ....../></a><a href="yyyyy"><img ...../></a> I remember this being an issue with most browsers many yrs ago.. I could run each row together on a huge line but it would make the code template even harder to read and maintain than it already is. So if there is some style thing I can do I would prefer to do that. The stylesheet for this stuff is at the bottom of http://demo.tixrus.us/styles/tixstyles.css I already explicitly set the height and width for the icons (they weren't previously) and that is fine but it was never the issue and it doesn't solve the spacing issue. Hi there, I'm trying to get the background image to repeat down the page, but I think the float is messing it up since it's outside the element, or something like that. The background image call works fine, you can test it if you enlarge the #Middle height values. http://www.wpforrealestate.com/prod...es/Design2/www/ I've had this problem before, but figured it out through the help here and some links on floats, but this time I'm just not getting it for some reason. Any ideas? Thanks. For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div: Code: #content img {
margin:2px 5px 0px 0px;
}
#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}
#content a:hover img {
border:2px solid #ffffff;
}
This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them: Code:
.g2image_float_left {
display:block;
float:left;
}
.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}
Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them. Any ideas what is causing this? Thanks in advance. I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough). Here's the address. The CSS coding is on the actual page for easy viewing. link Hello guys, I have beginner CSS experience. I am using a free wordpress theme. I have begun to modify the theme and have run into a problem. I have checked all over the web for resources to resolve this issue to no avail. I have used the CSS Validator and received some errors nothing that affects this. ISSUE: When clicking "Read More" the image appears twice, once as the limited size and once as the full size. I would like only the first image to appear not the full size one too. SITE: havenhart[dot] com Any help would be super. |
|||||||