|
CSS - Picture Layering
I have a picture of a city.. then i have transparent pictures of stores and stuff i want to layer ontop of the city.. but i was wondering if someone could go about showing me how to layer them? i found help on layering pictures, but they wont show through to the city.. =/
Similar TutorialsI am using two CSS/Javascript peices of software together and I am running into some problems. Its best to take a look at the site first: http://hosted.forma3.com/olympia/ne...hp?a=Manila_Bay When you mouse over one of the links in the block text to the left, the pop-up description displays under the block text. What I realy want to happen is have it display above the text (like this: http://hosted.forma3.com/olympia/ne...hp?a=Manila_Bay ). When I add the scroller is causes this error and I'm not sure how to sort out the layers, if thats even possible without recoding large parts of the two JS programs. I have a CSS based page w/ a drop down menu (drop down incorporates a little javascript b/c page is being designed for IE6) but when the drop down is activated it appears behind the page content. I've tried giving the drop down ul a higher z-index then the content but it doesn't work. Any ideas? Here is the HTML: Code:
<ul id="nav">
<li><a href="../index.html">OpEx Home</a></li>
<li><a href="../teams.html" class="team">Teams</a>
<ul>
<li><a href="#">Change Management</a></li>
<li><a href="#">Configuration Management</a></li>
<li><a href="#">Continuous Service Improvement</a></li>
<li><a href="#">Internal Controls Evaluation</a></li>
<li><a href="#">Measurement and Analysis</a></li>
<li><a href="#">Process and Performance Management</a></li>
<li><a href="#">Quality Evaluations</a></li>
<li><a href="#">Quality Review Boards</a></li>
<li><a href="#">Release Management</a></li>
<li><a href="#">Service Level Management</a></li>
<li><a href="#">Solutions Delivery Methodology</a></li>
<li><a href="#">Source Control Management</a></li>
</ul>
</li>
<li><a href="../reports.html">Reports</a></li>
<li><a href="../comm.html">Communications</a></li>
<li class="last"><a href="../contact.html">Contact</a></li>
</ul>
and here is the relevant CSS: Code:
#header {
width:800px;
height:75px;
position:relative;;
margin:0 auto 10px auto;
padding:0;
}
#wrapper {
margin:0 auto;
text-align:center;
padding: 10px;
width: 780px;
position: relative;
z-index:100;
}
#header ul {
margin:0px;
padding:0px;
list-style:none;
float:left;
position:absolute;
bottom:8px;
left:110px;
width: 620px;
}
#header li {
padding:0 .4em;
float:left;
border-right:solid 2px #FFF;
}
#header li a:link, #header li a:visited {
display:block;
padding:0 1em;
color:#FFF;
line-height:1.5em;
}
#header li a:hover, #header li a:active {
background:#CCC;
color:#333;
}
#header li.last {
border:none;
}
#header li a.current:link, #header li a.current:visited, #header li a.current:hover {
color:#333;
cursor:default;
background:#82D2E5;
}
#header a.team, #header a.team:visited {
position:relative;
padding-right:0 1.5em 0 1em;
line-height:1.5em;
}
#header a.team:hover, #header a.team:active {
color:#333;
cursor:default;
z-index:1;
}
#header ul ul {
margin:0px;
padding-top:10px;
list-style:none;
position:absolute;
left: 135px;
top: 20px;
z-index:500;
display: none;
}
#header ul ul li {
margin:0px;
padding:0px;
border: none;
}
#header ul ul li a:link, #header ul ul li a:visited {
display:block;
width:250px;
padding:0.4em .5em;
line-height:1.5em;
background:#CCC;
color:#000;
}
#header ul ul li a:hover,#header ul ul li a:active {
background:#82D2E5;
color:#000;
}
#header li:hover ul, #header li.over ul {
display:block;
}
and lastly here is the little javascript function to let IE use hover pseudo-class w/ list items: Code:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
I know this is a rather long winded post. Any help would be greatly appreciated. Hopefully I will be able to post a link to an example later tonight. Thanks in advance for any help, Brian I have a UL with the following rules: Code:
#artSort_options {
z-index: 50;
background-color: #000000;
display: none;
position: absolute;
list-style: none;
width: 138px;
padding: 0px;
}
I use javascript to change the display of #artSort_options to block; The UL is in a DIV floating right. The menu displays perfectly over the parentNodes, but hides behind all elements after - except in IE 7. Any ideas? First things first, I am a noob. I am attempting to make a background with a 200 x 200 repeating image with a 1 x 1000 white to transparent gradient overlay. I can get the 200x200 image to show up by itself but when I try to add the background_grad.png the background shows up as the background color. All help is greatly appreciated. Here is the source: Code: <!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 id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
Pet ID Express - Tags for Cats and Dogs - Metallic, Glitter Enamel, Stainless, Brass, and Bling ! Free Shipping !
</title><meta name="keywords" content="Pet ID Express, Pet I.D Express, Metallic, Swarovski Crystal, Glitter Enamel, Stainless Steel Pet tags, pet ID tags, dog ID tags, dog ID tag, cat ID tags, cat ID tag, dog tags, cat tags, pet identification tags, pet id, discount pet tag, discount ID tags, discount pet tags, bling pet tags, cool pet tags, brass pet tags, stainless steel pet tags, designer pet tags, metal pet tags, bling dog tags, cute dog tags, stainless steel dog tags" /></title>
<style type="text/css">
body,td,th {
color: #000;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 24px;
}
body {
background-color: #81D3FC;
background-image: url(background_grad.png),url(background.png);
background-position: top left;
background-repeat: repeat-x,repeat;}
a img {
}
a:link {
color: #000;
}
a:visited {
color: #000;
}
a:hover {
color: #000;
}
a:active {
color: #000;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('menubarhome.jpg')">
<p><img src="Pet ID Logo.png" width="284" height="124" /></p>
</table>
<tr>
<table width="600" border="0" align="center">
<tr>
<th scope="col"><table width="200" border="0" align="center">
<tr>
<td><div align="center"><img src="Blue Menu Bar/menu bar blue v2 copy.jpg" width="1220" height="100" border="0" align="middle" usemap="#Map2" /></div></td>
</tr>
</table></th>
</tr>
</table>
<tr>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="metallic.html"><img src="metallic.jpg" alt="Metallic Tags" width="290" height="166" border="2" /></a> </p>
<p><a href="swarovskicrystal.html"> <img src="swarovskicrystal.jpg" alt="Pet I.D. Express" width="290" height="166" border="2" /></a></p>
<p><a href="glitterenamel.html"><img src="glitterenamel.jpg" alt="Glitter Enamel Tags" width="290" height="166" border="2" /></a></p>
<p><a href="stainlesssteel.html"><img src="stainlesssteel.jpg" alt="Pet I.D. Express" width="290" height="166" border="2" /></a></p>
<p><a href="brass.html"><img src="brass.jpg" alt="Pet I.D. Express" width="290" height="166" border="2" /></a></p>
<tr>
<tr>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote> </blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<center>
</center>
<map name="Map" id="Map">
<area shape="circle" coords="61,57,45" href="index.html" alt="Home" />
<area shape="circle" coords="177,60,39" href="aboutus.html" alt="About Us" />
<area shape="rect" coords="255,29,347,84" href="contactus.html" alt="Contact Us" />
<area shape="circle" coords="426,62,45" href="faq.html" alt="FAQ" />
</map>
<map name="Map2" id="Map2">
<area shape="rect" coords="362,25,459,73" href="index.html" />
<area shape="rect" coords="459,26,558,73" href="shop.html" />
<area shape="rect" coords="557,26,656,73" href="faq.html" />
<area shape="rect" coords="656,26,758,73" href="aboutus.html" />
<area shape="rect" coords="758,26,867,72" href="contactus.html" />
</map>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6007803;
var sc_invisible=1;
var sc_security="a2542b38";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript></noscript>
<!-- End of StatCounter Code -->
</body>
</html>
Thanks in Advance, Matt im kind of a noob at css (altho ive been using it for a while now for simple things (margin, padding, color, etc....)) and im wondering if i can "layer" an image in an area. like what i mean is i want to display content behind that image but i want to layer it over everything else in the <td></td> tags. and i want it to appear only on the bottom right side. i know how to make it appear only once on the right side if it was a background but with this i have no clue, any help is much appreciated! Hi all, I'm pretty anal about the layouts I make.. especially when it comes to my own site. This is the first time I have really attempted designing to validate within the strict doctype. The only thing is the layout I am trying to get to work requires A LOT of layers, and a lot of them need to line up with eachother. I am running in to problems because some layers are pushed down further than others on the page. The difference is noticeable (10 or 15 pixels) when I change from Firefox to Explorer. Is there anyway around this, am I missing something here? My page is uploaded at http://www.studioflow.net/display.html and my css file is here http://www.studioflow.net/sfglobal.css Do I need to just abandon my quest for pixel perfect alignment? Thanks, alan Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems. http:// www . sycwin . com / index2 . html My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects problems: 1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE 2. introduction not in position to the right of carousel/slideshow on IE 3. paints and wires divs are messed up in width, padding and margin on IE here's the css: Code: body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}
emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}
a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}
img {
border:none;
}
/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}
#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}
/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}
#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}
#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}
/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}
#preview img{
width:300px;
height:300px;
}
/*CAROUSEL*/
#carousel ul {
list-style: none;
width:3600px;
margin: 0;
padding: 0;
position:relative;
padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
display:inline;
float:left;
}
#carousel {
overflow:hidden;
I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this. I'm working on a site where I want to layer grass along the bottom of the page, but slightly over the bottom of an image that's being used as a footer for a table. I'm new to CSS and any help would be greatly appreciated. Here's the code I'm using: <style type="text/css"> <!-- body { background-image: url(images/polkasky.jpg); background-attachment: fixed; } .greentable { background-image: url(images/cloud-back.png); vertical-align: text-top; } .cloudfoot { background-image: url(images/cloudbottom.png); background-attachment: fixed; display: block; margin-left: auto; margin-right: auto; background-repeat: no-repeat; } #Layer1 { width:100%; height:158px; background-image: urlimages/grass.gif); background-repeat: repeat-x; background-position: bottom center; background-attachment: scroll; } --> </style> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/cloud-head-tongue.png')"> <table width="850" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><div align="center"><img src="images/anchors.png" width="650" height="25" /></div></td> </tr> </table> <div align="center"><img src="images/cloud-head-pink.png" name="Image1" width="1000" height="220" border="0" align="center" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="229,47,827,214" href="pages/spunkymonkey.htm" onmouseover="MM_swapImage('Image1','','images/cloud-head-tongue.png',1)" onmouseout="MM_swapImgRestore()" /> </map> </div> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellpadding="0" cellspacing="10"> <tr> <td> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/pagelist_horizontal.php");</script></div></td> <td><script language="php">include ("$Home_Path/$Inc_Dir/search_catalog.php");</script></td> </tr> </table> </td> </tr> </table> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="greentable"> <tr> <td> <table width="850" border="0" align="center" cellspacing="10" bgcolor="#FFFFFF"> <tr> <td width="636" valign="top"> <div align="center"> <script language="php">include ("$Home_Path/$Inc_Dir/title.php");</script> </div> <div align="left"> <script language="php">include("$Home_Path/$Inc_Dir/content.php");</script></div></td> <td width="180" valign="top"><div align="left">Newsletter Signup, Coupon, Etc Here</div></td> </tr> </table> </td> </tr> </table> <img src="images/cloudbottom.png" width="1000" height="145" class="cloudfoot" /> <div id="Layer1"></div> </body> </html> [http://]blumoney[dot]latestdot[dot]net[/]plb[/]pictures[dot]php You see? I want the thumbnails to pile up underneath the full sized image. Hey all, I've got a gallery of sorts, where teams register and they show up with a thumbnail and team info. You can see what I'm talking about here. In FF, the first team on each page's box drops down to the end of the floated form on the right. I'm sure it's something to do with the floated element, but I can't seem to fix it. It displays the way it's supposed to look in IE7 (note I didn't say 'properly', as i'm sure that's not true). Here's the CSS: Code:
.teamBox {
width:400px;
margin:5px auto;
min-height:200px;
background:white url(images/teamBox_tile.gif) repeat-y center;
}
* html .teamBox {
height:200px;
}
.teamBox h3 {
margin:0;
width:390px;
height:27px;
padding:12px 0 0 10px;
background:white url(images/teamBox_top.gif) no-repeat top center;
border-bottom:1px solid white;
color:white;
}
.teamBox p {
color:#333;
margin:5px 15px;
}
.teamBox p a {
color:white;
}
.teamBox .teamBoxBottom {
width:400px;
height:10px;
background:white url(images/teamBox_bottom.gif) no-repeat bottom center;
}
.teamThumb {
float:right;
width:150px;
height:150px;
margin:5px 10px;
overflow:hidden;
}
My site is a .org that I recently created and I am having picture problems. For some reason that i cant under stand the picture wont link up to my menue as a sub menue and adjust the spacing and type like it does with the regular menu. Ideally I would like to modify it so it is random pick from a file on the server but IDk how and advice on how to make it not cut off my text or have my text over lap it. The site is my name IGADA dot org any suggestions. Really what I need to now is if i should be trying to make this happen in the CSS or in the HTML. I can post the relavent CSS if some one wants me too. I am trying to add a border to my pictures. I read a tutorial about it but however in firefox it escapes from the box. In IE it looks fine. Has anyone had this problem before? Any tips on fixing it? Thank you here is the link http://www.conceptofgravity.com/test/pictures_test.html i have a screenshots page on a website for a peice of software i've written. it has a number of thumbnails on it, when you click a thimnail, the full size image pops up in a new window. <a href="javascript: void window.open('fullSize.jpg', 'pic1', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=660,height=500');"><img src="thumbnail.jpg" width="120" height="90" border="0"></a> i want the thumbnail to have an orange (#EE9515) border, bossibly 4px thick, when the user hovers over it. how do i do this? I have a 3 column layout: 1st -> 350px, 2nd -> 500px, 3rd -> remainder of containing div. In the 2nd div, I have 15 pictures arranged to form the letter R, each picture is 100x100 px. I am not using absolute positioning. I want the first and second column to have a background color of black that is 100% the height of the viewport. The middle column should have a white background and be 100% height. The problem is, the margins I am using for the pictures is throwing things off and I'm not sure how to fix it short of not arranging the pictures the way I want. Is there another way to arrange them to achieve the R shape? Code:
<div id='container'>
<div id='first'></div>
<div id='second'>All of the images are loaded here.</div>
<div id='third'></div>
</div>
Code: #img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9, #img10, #img11, #img12, #img13, #img14, #img15, #img16, #img17, #img18, #img19, #img20 {
display: block;
border: 3px solid #B8860B;
width: 100px;
height: 100px;
}
#img1, #img2, #img3, #img4, #img5 {
margin-left: 10px;
}
#img1 {
margin-top: 60px;
}
#img2 {
margin-top: 10px;
}
#img3 {
margin-top: 10px;
}
#img4 {
margin-top: 10px;
}
#img5 {
margin-top: 10px;
}
#img6 {
margin-top: -590px;
margin-left: 125px;
}
#img7 {
margin-top: -136px;
margin-left: 240px;
}
#img8 {
margin-top: -76px;
margin-left: 355px;
}
#img9 {
margin-top: 10px;
margin-left: 380px;
}
#img10 {
margin-top: 10px;
margin-left: 355px;
}
#img11 {
margin-top: -87px;
margin-left: 240px;
}
#img12 {
margin-top: -125px;
margin-left: 125px;
}
#img13 {
margin-top: 30px;
margin-left: 305px;
}
#img14 {
margin-top: 10px;
margin-left: 365px;
}
On my site which im using to practice css, the picture isnt being displayed on the main page. Why is this? http://www.trowbridge-wiltshire.co.uk/newtrowbridge Cheers Dear All, I have the following issue with the CSS solution (2). Everytime I move the cursour over the pic it flashes 1.) If I display a picture/link like this .. it doesn't flash: <a href="www.aaa.com"><img src="pic.gif" alt="" border="0" style="float: left; width: 250px; height: 163px; margin: 0 1.5% 0;" /></a> works fine! 2.)Now doing it via CSS: <a href="www.aaa.com" id="mainpic"><span>Test</span></a> #mainpic { float: left; width: 250px; height: 163px; margin: 0 1.5% 0; text-decoration:none; background:url('pic.gif') no-repeat; border:medium none; display:block; } #mainpic span { visibility:hidden; } Would be very nice if somebody could tell me what I'm doing wrong. Thanks a lot in advance Jack When I setup a td and table to include a photo and I want the photo to "hug" all four sides of the td I just specify cellpadding and cellspacing = 0 within the table. then make sure the </td></tr></table> comes right after the img tag with no spaces or breaks. However I cannot seem to duplicate this in css. No matter what I do there's always a 1-2 pixel space between the photo and the border of the td. any thoughts?? I've looked up and tried to use every paramater I can find. How to add a background picture to a table？ Anyone helps? Thanks in advance. the text on the left of the picture goes "in" a little bit to the image as can be seen he in firefox. http://www.925-sterling-silver-jewe...ls.php?id=sl211 in IE its ok but its in middle! and yeah i know my css is lacking but i plan to do it all in css once i finish my implementation (php) PHP Code: <div style="float:left; position: relative; width: 255px; height: 215px; z-index: 1; left: 5px; top: 5px" id="layer1"> <img border="0" width="255" height="215" src="images/<?php echo $product; ?>.jpg" > </div> <h2><span style="text-indent:0.5in">Detailed Information</span></h2> <b>Weight:</b> <?php echo $row['weight']; ?> <br/><? if($row['category'] == Anklets) { ?> <b>Diameter:</b><?php echo $row['diameter']; } else if($row['category'] == Bracelets) { ?> <b>Diameter:</b><?php echo $row['diameter']; ?> <br/> <b>Width:</b><?php echo $row['width']; } else if($row['category'] == Necklaces) { ?> <b>Width:</b><?php echo $row['width']; ?> <br/> <b>Length:</b><?php echo $row['length']; } else if($row['category'] == Sets) { ?> <b><span style="color:red">not sure</span> <? } Hello, please take a look at http://www.inbalancepilates.ca/india.html I've been trying to figure out why there is a purple border around the images. There's nothing in the CSS that's doing this, and none of the cells have borders. Any help would be great, thanks! |
|||||||