|
CSS - Layering An Image
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!
Similar TutorialsI 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 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 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.. =/ I 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 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? 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 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> 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. Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Trying to delete my post but no option to delete so just removing content. On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's |
|||||||