josoap

Hi, I'm trying to use this method to create a rollover image button with CSS. But it's not working for some reason. I'm trying to create a horizontal nav bar using an image which is 28px high and 288px wide. So the inactive state is the first 144px and the rollover state is 144- 288px. The code I'm using is as follows: #navbar { position:absolute; top: 200px; left: 300px; font-family:Arial, Helvetica, sans-serif; font-size:.8em; font-weight:bold; height:28px; } #navbar li { list-style:none; display:inline; } #navbar a { width:108px; height: 28px; color:#fff; text-decoration:none; background:url("btnmasterH.jpg") no-repeat; float:left; padding:6px 0px 0px 32px; margin:0px 0px; } #navbar a:hover { background-position:0px -144px 0px 0px; color:#1e5ebd; } /*#navbar a:active { background-position:0 0px; color:#1e5ebd; }*/ Thanks for any advice. Jo

OK, that was a good start and easy enough. But what I need to do is to have 2 drop down lists. Say list one contains 4 categories: ie Category A Category B Category C Category D Now, when I select, for example, category B the second list changes to Category Bsub Category Bsub . . . etc . . . Then when I've made my choice in the second drop down list I'm ready to send that as part of a contact form. Now that's gonna be complicated I'm sure !!! But it's done all over the web so I've got to get my head around it. I'd prefer not to have to use Javascript if at all possible. Thanks again, Jo.

Thanks folks! I'm working through it now.

Hi, It's about time I learned how to do forms with drop down lists and sub-categories. So can anyone point me in the direction of a good tutorial to help me with this please. For example: Say one drop list contains Fruit, Vegetables, and when I select either of them the second drop down list shifts appropriately to . For example, when I select fruit the second drop down list contains Apples, Bananas, Oranges etc . . . Hope this makes sense! Thanks, Jo

Hi, Within the main page content holder of the page I have 3 div tags. #contactdetailholder1 { position:relative; left: 0px; top: 0px; width: 600px; padding:0px; border:0px; margin: 0px; z-index: 4; } Within that Within in that there are 2 more divs which are #box1 { position:absolute; left: 0px; top: 0px; width: 295px; padding:5px; border:0px; margin: 0px; } #box2 { position:absolute; left: 300px; top: 0px; width: 295px; padding:5px; border:0px; margin: 0px; } What I'd like to do is repeat the div contactdetailholder1 (with the 2 nested divs) several times vertically - changing the text within the 2 nested divs. (It's for a contact page obviously). I'm tempted to use tables but don't want to if it can be avoided. I'm sure this is easy but I just can't get it and it's 4pm Sunday afternoon, the sun's shining and I'm going for a beer. So thanks for any help. Jo.

Thanks! Nearly there but check this out. The box1 tag expands to accommodate any amount of content . . . fine . . . but the main (holder) tag doesn't as you can see by the grey background. CSS: html, body { margin: 15px; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; background-color:#FFFFFF; height:100%; } #main { position: relative; width: 950px; height: 100%; //if I remove this height I get a very narrow box?????// margin: 5px auto; padding: 30 0 0 0; border: 0; } #box1 { position: absolute; width: 300px; top: 10px; left: 10px; padding: 10px 10px 10px 10px; border: 3px 3px 3px 3px solid #3366CC; font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#3366CC; text-align: left; background-color:#000000; } HTML: <!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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /> <title>Vertical test</title> <meta name="Description" content="life coaching, success, personal development" /> <meta name="Keywords" content="achievement, success, training, development" /> <meta name="Author" content="www.clearstream.uk.net"/> <meta name="robots" content="index,follow"/> <script type="text/javascript" src="swfobject.js"></script> <link href="vertical.css" rel="stylesheet" type="text/css" /> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <div id= "main"> <div id= "box1"> <p>This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 </p> <p>This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is box 1 This is </p> </div></div> </body> </html>

Here you go mate. This one works well for me . . . http://www.pageflip.hu/

Hi, What I need to achieve quickly is this: I'm fine creating tags with a fixed width and height that holds all the other tags/content within. But with my next project I'd like to create a main div tag which has a fixed width but will expand to accommodate any additional content (or for that matter reduce in size when there is less content to hold). EG: This is a typical main holder on my sites: #main { position: relative; text-align: left; width: 950px; height: 700px; margin-top: 5px; margin-right: auto; margin-left: auto; padding: 30 0 0 0; border: 0px solid #5A7CB8; } Is it just a case of setting the height to 100% and the same for any expandable tags/content holders nested within that main tag? I want the width to remain fixed by the way. Thanks in advance for any feedback. Jo. PS. I'm going to start experimenting now but I've put this up because it will probably save me shed loads of time!

Thanks Jem, but this aint working . . . sorry! Any other ideas?

Hi, My client wants to have a background image on each page of his site. He also wants the site centered (which is not normally a problem because I use a content holding div with margins set to auto). But when I place a background image on the page (INTERNET EXPLORER ONLY! - works fine in everything else) the holding div is not centered. It's aligned to the left of the browser window!? Any ideas please? Relevant code is: CSS body { margin: 0px; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #000000; text-align: center; } #bgimage { width : 100%; height : 100%; left: 0px; top: 0px; position: absolute; z-index: 0; } #main { position : relative; text-align : center; width : 900px; height : 620px; margin-right : auto; margin-left : auto; border: solid 0px 0px 0px 0px #FFFFFF; padding : 0px 0px 0px 0px; z-index: 3; } HTML <body> <div id= "bgimage"> <img style="width: 100%; height: 100%;" src="blueripples.jpg"/></div> <div id="main"> <div id="pageid">creative<span class="pid">Vision</span></div>