|
CSS - Overlay Ontop Of Image
Hi
I have a image gallery and I would like delete buttons or red little x's ontop of each image. I dont want to make the image background DIV I want to keep it <img src="image.jpg"> Is it possible to do this? Louis Similar TutorialsHi, This might be a case of an easy fix thats being over-looked but I've tried everything I haven't been able to find to 'fix' this. FF is cool, IE is giving me 'teh gap' I have attached an image, I highlighted the pic so it shows the black bar of space right under the top image. There are two DIVs that are 'stacked' The top one has the top half of the image, the bottom one has the gold bar as a background image, with the bottom half of the pic in it. I can't make the images the background of the div because i'm adding a rollover and link to the images. So, CSS: Code: #interior_top_image{
text-align:center;
vertical-align:bottom;
display:block;
height:85px;
margin:0px;
padding:0px;
}
#interior_header{
background-image:url("images/interior_bottom.jpg");
background-position:bottom center;
background-repeat:no-repeat;
background-color:#263F7F;
display:block;
height:85px;
text-align:center;
margin:0px;
padding:0px;
}
HTML: Code: <div id="interior_top_image"><img src="images/cross_top.jpg" name="cross_top" border="0"></div> <div id="interior_header"><img src="images/cross_bottom.jpg" name="cross_bottom" border="0"></div> 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 Is there anyway I can do something like this using css. Follow the red arrow. Basically, I would like to put a tiny red square on the upper right hand corner of an image. Is this possible? Here is the website that i would like to implement it on. http://upit.section31.us/index.php?browse I have a web page shell that loads various content into different cells. The entire page is essentially a table. I have 4 graphic overlays that I want to impose on each cell to round the corners. I've tried doing it this way: CSS: Code: .LeftPanelTable {
WIDTH: 182px;
border-style: none }
.LeftPanelCell {
WIDTH: 160px;
vertical-align: Top;
border-style: none }
.ActionOptionsPanel {
background-color: #DDDDDD;
color: #000000;
font-family: verdana;
font-size: 12px;
border-style: none}
#soft_corner_ul {
background:url("http://www.fourfreedomsblog.com/images/corner_ul.gif") no-repeat top left}
#soft_corner_ur {
background:url("http://www.fourfreedomsblog.com/images/corner_ur.gif") no-repeat top right}
#soft_corner_ll {
background:url("http://www.fourfreedomsblog.com/images/corner_ll.gif") no-repeat bottom left}
#soft_corner_lr {
background:url("http://www.fourfreedomsblog.com/images/corner_lr.gif") no-repeat bottom right}
HTML: Code: <table class="LeftPanelTable">
<tr>
<td class="ActionOptionsPanel">
<div id="soft_corner_ul"><div id="soft_corner_ur"><div id="soft_corner_ll"><div id="soft_corner_lr">
This is the table cell content
</div></div></div></div>
</td>
</tr>
</table>
However, I still see a faint border around the cell, which spoils the effect of the rounded corners. If I change it like this: Code: .ActionOptionsPanel {
background-color: #DDDDDD;
background-image:url("http://www.fourfreedomsblog.com/images/corner_ul.gif");
background-repeat: no-repeat;
background-position: bottom right;
color: #000000;
font-family: verdana;
font-size: 12px;
border-style: none}
Code: <table class="LeftPanelTable">
<tr>
<td class="ActionOptionsPanel">
This is the table cell content
</td>
</tr>
</table>
then the border doesn't appear, but I don't know any way to do this with more than one image. Suggestions? Thanks... Is there a way to get some text to be ontop of other text no matter what? I want to force certain text on top even if something else says that the something else should be ontop. I am doing this on the top and bottom of pages... for forced ads... they are being covered up on somepages and i want to make sure that this can not happen Here is a test page... http://www.thedreyersonline.com/test.htm It doesn't look horrible, so I can live with it, but it's designed so that the comments section will actually sit on the bottom like the "onbottom.gif" screenshot... It works if there is enough content in the "content" div prior to the "comments" div, but not when it's short. An alternative solution would be like the "extended.gif" screenshot, but the onbottom shot is preferred. Any help would be greatly appreciated! Thanks Bryan I'm making a fairly simple one-page website, but i need to display a box with some text over anything else at some points using javascript. I'm first trying to actually get a box working that will display over the rest of the page, somehow what I read on the internet doesn't work. I have the following code. Ive made a css class 'box' which should describe the position of where I want the box, now I need to figure out how to get it working and preferably how to display/hide it using javascript (at places indicated in the script): Code: <html>
<head>
<script language="javascript" type="text/javascript">
// This event is fired after all images on the page have loaded... therefore
// we know that image 1 is being displayed
window.onload = function() {
var innertext = "<p>Loading Colors...<\/p>";
//start displaying here
loadImg("ge64bw.jpg", image2Done);
//stop displaying here
}
//This function loads an image from a url then calls a method
function loadImg(url, handler) {
//Declare a new image
var img = new Image();
//Call the passed in method but change the signature as we are not interested
// in onload event args
img.onload = function() { handler(this); } ;
//Initiate the download of the image
img.src = url;
}
//Called when the second image has finished downloading
function image2Done(img) {
//Swap the images
document.getElementById("myImageTag").src = img.src;
//Go get the third
loadImg("ge64c.jpg", image3Done);
}
//Called when image 3 has finished downloding
function image3Done(img) {
//Swap the images
document.getElementById("myImageTag").src = img.src;
//FINISHED
}
</script>
<title>Ge64 Tech Repairs</title>
<style type="text/css">
.image {
display: block;
margin-left: auto;
margin-right: auto;
width: 924px
height: 668px;
margin-top: 45px;
z-index:2
}
.box {
text-align: center;
height:20px;
margin-top: 15px
}
</style>
</head>
<body>
<img src="load.gif" id="myImageTag" name="myImageTag" class="image">
</body>
</html>
Hey All, I'm running a wordpress site, and I need to have a section of text set to overlay some other text in the post areas. I have created a section of CSS : Code: div.products {
border: 1px solid green;
left: 485px;
position: relative;
top: -433px;
width: 250px;
}
However on a long page, it shows in the wrong place and in a short place it shows in the wrong place... How do I get it to go from the very top of the visable browser area, and from the right of the browser area rather than a div area? I don't have an example as I can't get started without really knowing the possibility of doing this. But let me offer an example. A centered table 775 pixels wide with two columns 50% each. Code:
<table width="775" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="50%">Text and more text</td>
<td width="50%">and yet more text again.</td>
</tr>
</table>
What I would like to do is that table be the basis of everything... it will contain lots and lots of text. But what I'd like to do is allow an overly I guess you could call it of a table that is designed like this. Code:
<table width="775" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Sidenote Text</td>
<td width="475">(This would be empty to allow the view of the table undernearth. That has all the text.)</td>
<td width="150">Sidenote Text</td>
</tr>
</table>
The idea is to have a link to show sidenotes... that would be on both sides of the main table as an overlay. I don't even know the possibility. I know you can have absolute positioned tags with div and span... but it's unpredictable for anything really on the right side of the document depending on the user's resolution. Furthermore, I don't have the complete understand of all it's workings to get it to work the way I need. Any ideas? Thank you for stopping by! I'd like some guidance about a problem that has to do with CSS (and a bit of JavaScript I guess) and trying to position an overlaying DIV. The problem description is quite simple; When I click an image on the "main" area, a div gets, with a little help from javascripting, its display property set to "block". This surely and safely makes the div's content appear as it should and all is fine. I now have a headache from trying to figure out how I could position this div. I know what I'd like to do but I can't quite figure out how to get it right. I'd like to have the popup-div center itself on the page, regardless of the size of contents inside it. The content mostly consists of text of varied amounts and next to no images or other media content. If you got any ideas about this or got a link to a website that's similar to what I'm trying to accomplish or any input at all, feel free to make a comment! It's much appreciated! Here's what the popup CSS looks like atm: Code: div.PopUp {
width: 550px;
border: dashed silver 1px;
display: none;
position: absolute;
left: 150px;
top: 50px;
background-color: black;
text-align: justify;
font-size: 10pt;
color: black;
}
Regards DrLaban I suspect that the solution to this problem really involves a more thorough analysis of my code than is fair to inflict upon this audience, but just in case there's something obvious I've overlooked... I've incorporated a lightbox into a site I'm building at www.charlescarey.co.uk/works.php When clicking on thumbnails to activate the lightbox, a 'shadow overlay' is supposed to 'grey out' the rest of the page, but it doesn't work; it only greys out a small area to the left. What am I doing wrong? Any help appreciated. Not sure about this one- maybe someone can help shed some light on it? I have a <div> that contains a form. This div is dynamically-sized and floated left. What I want to do is place a nested <div> inside it so that it will cover the form below it. What's happening is that if I add the nested <div>, it pushes the form in it's container <div> down, which is obviously not what I want. I have tried using z-index on this nested <div> but with no success. Here is the code I'm using: Code:
<div id="formdiv" style="display:block; padding-right:15px; padding-top:10px; border-right:#A0A0A0 1px dotted; float:left; width:auto; height:100%;">
<div id="overlaydiv" style="top:0px; left:0px; width:100%; height:100%; background-color:#FF0000; z-index:500;"></div>
<form>
...
</form>
</div>
There is other <div> tags before and after the 'formdiv', which are part of the page layout, but do not need to be covered by the 'overlaydiv'. I should note that 'formdiv' is itself inside a container <div>. I have tried various combination of CSS settings, but they don't give the same result. position:absolute; covers EVERYTHING within the uppermost container <div>, obviously not what I want. I've tried putting the form into it's own <div>, but I get the same result- the form just gets pushed below the 'overlaydiv'. Anyone have any ideas? Thanks, - skubik Hi, I want to create a page where users can advertise using templates overlaid with their own text. Many of these templates are cascaded forming a montage effect (left to right, top to bottom). I figured this could be done using CSS or PHP. Here is the CSS version..... User enters data in form (subsequently stored in database) User chooses background image (80px by 80px) CSS used to style the text with the chosen image as a background.....in a sized container. I know this can be done and have achieved it with varying levels of success, but am unsure as to the best method. Q1 - What would be the best tag or container to use? The text will be used as a link and must display text when 'hovered' over. Should the text be inside <a>, <li>, <div>, etc etc. I don't know which is best for this purpose. I know the <acronym> tag can be used for 'hover' text, but besides misusing a tag, it's not supported in Opera (so far as I can see) and is displayed differently in firefox/IE. Q2 - What is the best method of displaying additional text (in multiple browsers) on 'hovering' the link; could I use a 'hidden' div (which is set visible on hover) rather than a tag property, and if so, how could I make it work for links at the edge of the screen (will the layer appear offscreen)? Not sure how to do this? Thanks for your time, all responses greatly appreciated. Duncan Hello everyone. I'm going to try this as a general question first. In the event you guys do need to see the page, then I'll put up the info as needed. My issue is this: The site I am making uses a javascript slideshow. I need to have CSS div boxes overlay over it (the header and menu bar). In IE, I am not having any issues. Doesn't matter what I try - no issues at all. Putting the divs after the java (which is also in a css div) in the code, using "z-index" to put it on top, float, etc, doesn't matter - WORKS. What is NOT working is FireFox and all the rest. What's truly interesting is if I use z-index, the header does show up on top....for a few minutes, and then the javascript takes over the top position. What the? Some examples: .header { float: left; width: 716px; height: 150px; background-color: transparent; background-image: url("images/header.jpg"); position: absolute; z-index:100; } #mainimage { position: absolute; } Or: .header { float: left; width: 716px; height: 150px; background-color: transparent; background-image: url("images/header.jpg"); position: absolute; } #mainimage { position: absolute; } With HTML: <div id="mainimage"> <script type="text/javascript"> new fadeshow(fadeimages, 650, 825, 0, 2000, 0) </script> </div> <div class="header"></div> Again, IE - no issues. But I can't seem to find ANY method to get the dang header on the TOP of the java for any other browser. I am very much pulling out my hair. If you can assist: Hi All, Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal! Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic. Now I have designed an overlay for my site: http://www.wellandpower.net/website2/index.php The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div. The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF. Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange. CSS Code: Original - CSS Code #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align: center; z-index: 1000; background-image:url(/images/checkerboard.png); } #overlay #overlayholder { margin-top: 50px; padding: 10px; width: 850px; text-align: center; background-color: #FFFFFF; }
#overlay {
Any help greatly appreciated. Hopefully I'm just not stumbling on the right CSS to fix the bugs. I understand that these same bugs might be attributed to the myspade code or myspace rules limiting html/css. Here's the mock-up: www.myspace.com/brovizion 2 bugs (1 in firefox, 1 in ie (6.0)): 1. (firefox only) There are 2 nav bars in the "innerwrapper" div (both black), one at the top, and one at the bottom. On the lower nav bar, my background image that is supposed to tile vertically throughout the whole "innerwrapper" div disapppears. 2. (ie only) The upper and lower nav bars (whose links are set to display: block) are on each of their own lines, yet still floated horizontally. This one is hard to explain except to say the nav bars should work like they do in firefox, but in ie they are on their own program. Viewing the site in both browsers will clearly demonstrate the problem. (ie 6.0, haven't tested in 7.0 yet.) I understand that the nature of this project (a design that must reside in a div overlay on a myspace page) makes for a million different possibilities for why it's messed up, but maybe if someone can help me brainstorm some potential fixes, I'll stumble onto something that works. I'll post my code as well. CSS: Code: <style type="text/css">
.btext {display:none;}
.contacttable {display:none;}
.lightbluetext8 {display:none;}
.nametext {display:none;}
.orangetext15 {display:none;}
.redlink {display:none;}
.whitetext12 {display:none;}
.hidethem {visibility:hidden; display:none;}
.comments {visibility:hidden; display:none;}
body {
background-color: 003366;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
table {
background-color: 003366;
}
p {
font-size: 12px;
}
h1 {
font-size: 24px;
font-weight: bold;
}
h2 {
font-size: 18px;
}
h3 {
font-size: 16px;
font-weight: bold;
}
ul {
list-style-type: none;
}
ul li {
}
a {
color: 003366;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}
a:hover {
color: 003366;
text-decoration: underline;
}
a:visited {
color: 003366;
text-decoration: none;
}
a:visited:hover {
color: 003366;
text-decoration: underline;
}
h1 a {
color: 003366;
text-decoration: none;
font-size: 24px;
font-weight: bold;
}
h1 a:hover {
color: 003366;
text-decoration: underline;
}
h1 a:visited {
color: 003366;
text-decoration: none;
}
h1 a:visited:hover {
color: 003366;
text-decoration: underline;
}
.wrapper {
position: absolute;
top: 132px;
left:50%;
margin-left:-460px;
width: 870px;
height: 800px;
z-index: 1;
text-align: center;
}
.masthead {
width: 870px;
background-image: url(http://www.ourcampusbookstore.com/myspace/images/mastheadbg.jpg);
background-repeat: no-repeat;
height: 195px;
}
.innerwrapper {
width:870px;
padding-left: 92px;
padding-right: 22px;
background-image: url(http://www.ourcampusbookstore.com/myspace/images/bodybg.jpg);
background-repeat: repeat-y;
text-align: left;
}
.uppernav {
width: 756px;
margin: 0;
padding: 0;
background-color: 000000;
font-weight: bold;
display: inline;
}
.leftcol {
clear: both;
width: 500px;
float: left;
vertical-align: top;
padding: 10px;
}
.rightcol {
width: 220px;
float: left;
vertical-align: top;
padding: 10px;
text-align: center;
}
.rightcol h3 {
text-align: center;
}
.lowernav {
width: 756px;
margin: 0;
padding: 0;
background-color: 000000;
font-weight: bold;
clear: both;
}
.footer {
width: 870px;
background-image: url(http://www.ourcampusbookstore.com/myspace/images/footerbg.jpg);
background-position: bottom;
background-repeat:no-repeat;
height: 30px;
clear: both;
}
.uppernav ul {
width: 756px;
list-style: none;
background-color: 000000;
margin: 0;
padding: 0;
float: left;
border-bottom: 2px solid black;
}
.uppernav ul a {
width: 151px;
display: block;
float: left;
margin: 0;
text-decoration: none;
line-height: 20px;
text-align: center;
color: ffffff;
font-weight: bold;
}
.lowernav ul {
width: 756px;
list-style: none;
background-color: 000000;
margin: 0;
padding: 0;
float: left;
border-bottom: 2px solid black;
border-top: 2px solid black;
}
.lowernav ul a {
width: 151px;
display: block;
float: left;
margin: 0;
text-decoration: none;
line-height: 20px;
text-align: center;
color: ffffff;
font-weight: bold;
}
.schoollist {
text-align: center;
}
.schoollist li {
line-height: 16px;
padding: 1px 1px;
width: 150px;
margin: 0 auto;
}
.uppernav ul a:hover, .uppernav ul a:visited:hover {
background-color: ffcc66;
color: 003366;
}
.lowernav ul a:hover, .lowernav ul a:visited:hover {
background-color: ffcc66;
color: 003366;
}
.schoollist a, .schoollist a:visited {
color: 000000;
background-color: EEEEEE;
width: 150px;
line-height: 18px;
font-size: 14px;
font-weight: bold;
display: block;
padding: 1px;
}
.schoollist a:hover, .schoollist a:visited:hover {
color: FFFFFF;
width: 150px;
text-decoration: none;
background-color: 00FF33;
}
.c0000FF a, .c0000FF a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c0000FF a:hover, .c0000FF a:visited:hover {
color: FF6600;
width: 150px;
text-decoration: none;
background-color: 0000FF;
}
.c990000 a, .c990000 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c990000 a:hover, .c990000 a:visited:hover {
color: FFCC00;
width: 150px;
text-decoration: none;
background-color: 990000;
}
.cCC6600 a, .cCC6600 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.cCC6600 a:hover, .cCC6600 a:visited:hover {
color: FFFFFF;
width: 150px;
text-decoration: none;
background-color: CC6600;
}
.c3366CC a, .c3366CC a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c3366CC a:hover, .c3366CC a:visited:hover {
color: FFCC33;
width: 150px;
text-decoration: none;
background-color: 3366CC;
}
.c993333 a, .c993333 a:visited {
width: 150px;
text-decoration: none;
font-weight: bold;
}
.c993333 a:hover, .c993333 a:visited:hover {
color: 999999;
width: 150px;
text-decoration: none;
background-color: 993333;
}
</style>
XHTML: Code: <div class="wrapper"> <div class="masthead"></div> <div class="innerwrapper"> <div class="uppernav"> <ul> <li><a href="#">View our Pics</a></li> <li><a href="#">Watch our Video</a></li> <li><a href="#">View Blog</a></li> <li><a href="#">Send Message</a></li> <li><a href="#">Add 2 Friends</a></li> </ul> </div> <div class="leftcol"> <h1><a href="http://www.ourcampusbookstore.com">OurCampusBookstore.com</a></h1> <h2>About us:</h2> <p><strong>OurCampusBookstore.com</strong> is an online classifieds website customized just for university students. It is formatted to allow students to post anything from textbooks and furniture, to electronics, event announcements and roommates.</p> <h3>What can it be used for?</h3> <ul> <li><strong>1. Post events</strong> - Is your band having a concert? Throwing a huge party? Have a club event to announce? Use the site!</li> <li><strong>2. Furniture</strong> - Are you moving out and need to get rid of furniture? Are you moving into an apartment and need to find furniture? Post what you have or need now and make arrangements to buy/sell your furniture in the future.</li> <li><strong>3. Textbooks</strong>- Buy and sell your used textbooks. Avoid the middleman and the high cost of books. Trade amongst yourselves.</li> <li><strong>4. Jobs</strong> - We have several companies signed up to post available jobs in Pullman, as well as summer internships and post-graduate opportunities all over Washington.</li> <li><strong>5. Apartments</strong> - Need to sublease? Moving to a new apartment? Find information on what's available at ourcampusbookstore.com.</li> <li><strong>6. Electronics, Clothes, etc.</strong> - Sell your used video games, consoles, computers, monitors, TVs, movies, software, and so on.</li> </ul> <h2>Who we'd like to meet:</h2> <p>As many students as possible who have books, furniture and electronics to sell, or students looking for books, furniture, apartments, jobs and events to attend!</p> </div> <div class="rightcol"> <h3>Current Schools</h3> <ul class="schoollist"> <li class="c0000FF"><a href="http://florida.ourcampusbookstore.com">Florida</a></li> <li class="c990000"><a href="http://minnesota.ourcampusbookstore.com">Minnesota</a></li> <li class="cCC6600"><a href="http://texas.ourcampusbookstore.com">Texas</a></li> <li class="c3366CC"><a href="http://ucla.ourcampusbookstore.com">UCLA</a></li> <li class="c993333"><a href="http://washingtonstate.ourcampusbookstore.com">Washington State</a></li> </ul> </div> <div class="lowernav"> <ul> <li><a href="#">Add 2 Group</a></li> <li><a href="#">Forward 2 Friend</a></li> <li><a href="#">Add 2 Favorites</a></li> <li><a href="#">Block Me</a></li> <li><a href="#">Rank Me</a></li> </ul> </div> </div> <div class="footer"></div> </div> I am developing a help manual and I'd love to include screenshots in the CSS section that shows the page with an opaque type overlay with a description of each CSS rule. Something like the Developer tools in IE or FF when you use the "select element by click" function, except that I'm after all elements selected by default (together with the CSS ID). Is there such a thing? Please look at this page http://www.tmhdesign3.com and this one http://www.tmhdesign3.com/real-estate-broker.asp The first one used a flash file, the second does not. On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success... 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(!) 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... |
|||||||