Jump to content

elementalgrace

Members
 View Profile  See their activity

  • Posts

    146

  • Joined

  • Last visited

Profile Information

  • Gender
    Male
  • Location
    Oxfordshire, UK

elementalgrace's Achievements

Member

Member (2/7)

0

Reputation

  1. elementalgrace
    You can use a quick fix solution to simulate alpha transparency in IE5 & IE6 for transparent PNG images. I use it regularly and it's absolutely brilliant: http://www.twinhelix.com/css/iepngfix/
  2. elementalgrace
    Thanks. I ended up doing something quite similar and it's finally working now exactly the way I'd hoped so I'm really pleased.Cheers!
  3. elementalgrace
    Hi GuysI'm looking to create some left navigation for a site I'm working on that includes subnavigation, which I'm using nested lists to achieve. The thing is, I want the main naivation to have list-style-type:none; which works fine, but I want to the subnavigation to use a list-style-image. However the list-style-type seems to be carrying over into the subnavigation for some reason. If anyone could offer an idea of what I'm doing wrong or has any suggestions, I'd be happy to hear them. Code is below: /*LEFT NAVIGATION*/#left{ width: 15%; float: left; text-align: left; margin-left:10px;}ul#nav{ margin: 8px 0 32px 0; padding: 0; list-style-type: none;}ul#nav li{ padding-left:1px; border-top: 1px solid #000066; vertical-align: middle; font: bold 85% arial,sans-serif;}ul#nav li a{ line-height: 150%; color: #828282; text-decoration: none; display: block; padding: 0 5px 0 0; margin: 1px 0;}ul#nav li a:hover, ul#nav li a.on{ line-height: 150%; background-color: #9f9f9f; color: #fff !important;}/*SUB NAVIGATION*/ul#nav li dl{ margin: 0; padding: 0; }ul#nav li dl dd{ margin: 6px 0 6px 15px; font: 85% arial, sans-serif; line-height:100%;list-style-image: url(images/bullet.gif) !important;}ul#nav li dl dd a{ font-weight: normal; display: inline; padding: 0; }ul#nav li dl dd a:hover, ul#nav li dl dd a.on{ background-color: #fff; color: #000 !important; text-decoration: underline; <!--LEFT NAVIGATION--> <div id="left"> <ul id="nav"> <li><a href="#" title="Home">Home</a> </li> <li><a href="#" title="">About Us</a> </li> <li><a class="on" href="#" title="">Services</a> <dl> <dd><a href="#" title="">Health & Safety</a></dd> <dd><a href="#" title="">Environment</a></dd> <dd><a href="#" title="">Quality</a></dd> <dd><a href="#" title="">Video</a></dd> <dd><a href="#" title="">DSGAs</a></dd> </dl> </li> <li><a href="#" title="">Frequent Questions</a> </li> <li><a href="#" title="">Links</a> </li> <li><a href="#" title="">Contact Us</a> </li> <li> </li> </ul></div> CheersEG
  4. elementalgrace
    You can do includes in asp as well, if your host supports that and I think you can also do them in SHTML but I've never actually tried to do it myself.
  5. elementalgrace
    Is there any way to set a width for an element, but specifically set it to be a different width if you're looking at it in IE6?I have a problem that I'm trying to fix for a friend as he was given some non standards compliant code. I now have it working fine for Firefox, IE7, Opera and Netscape but this one page won't work for IE6. It will work for IE6 if I change the width but then it knocks the background out in Firefox, IE7, Opera and Netscape.The site is developed in asp.net if that helps
  6. elementalgrace
    The validation result for the index page (all pages coming out the same) is hereThe HTML is here (it's rather long due to all the curved corners, sorry):<!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> <title>East Meets West</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <link href="images/styles.css" rel="stylesheet" type="text/css" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta content="" name="abstract" /></head><!--ALL--><body> <div id="all"> <div id="main"> <div id="header"> <ul> <li><a href="#" class="on">Home</a></li> <li><a href="#">Catalogue</a></li> <li><a href="#">Product Information</a></li> <li><a href="#">Members</a></li> <li><a href="#">Basket</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!--LEFT-NAV --> <div class="leftnav"> <!--LEFT-NAV POD1 --> <div class="left-box"> <div class="left-t"> <div class="left-b"> <div class="left-l"> <div class="left-r"> <div class="left-tl"> <div class="left-tr"> <div class="left-bl"> <div class="left-br"> <div class="left"> <ul class="left-search"> <li>Quick Search</li> <li><label for="txtKeyword"> </label> <input id="txtKeyword" maxlength="55" name="txtKeyword" title="Enter Keyword" type="text" /></li> <li> <label for="btnSubmit"> </label> <input class="submit" name="btnSubmit" type="submit" value="go!" /></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--END: POD1 --> <!--POD 2--> <div class="left-box"> <div class="left-t"> <div class="left-b"> <div class="left-l"> <div class="left-r"> <div class="left-tl"> <div class="left-tr"> <div class="left-bl"> <div class="left-br"> <div class="left"> <ul> <li>Browse Products</li> <li><a href="#">Boxes</a></li> <li><a href="#">Lights & Lamps</a></li> <li><a href="#">Ornaments</a></li> <li><a href="#">Jewellery</a></li> <li><a href="#">Furniture</a></li> <li><a href="#">Decorations</a></li> <li><a href="#">Rugs</a></li> <li><a href="#">Special Offers</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--END: POD2--> </div> <!--CONTENT --> <div id="content-area"> <!-- BEGIN:MAIN BOX --> <div id="main-container"> <div class="main-box"> <div class="main-t"> <div class="main-b"> <div class="main-l"> <div class="main-r"> <div class="main-tl"> <div class="main-tr"> <div class="main-bl"> <div class="main-br"> <div class="main-content"> <!-- BEGIN:MAIN BOX --> <div class="clear"> </div> <!--PAGE-CONTENT OUTSIDE PODS --> <div class="container"> <div id="breadcrumb"> <a href="#">Home</a> > New Messages</div> <h1> Lorem Ipsum Dolor Amet</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut et quam. Aenean sem libero, fringilla quis, pellentesque vel, viverra eget, dui. Quisque lobortis. Pellentesque a felis. <a href="#">Praesent consectetuer augue sit amet mauris</a>. Maecenas adipiscing, dui sit amet auctor dapibus, lectus massa sollicitudin dui, nec pellentesque lectus turpis cursus diam. Donec tincidunt rhoncus odio. Nam sodales ipsum eu erat. Donec facilisis, orci in malesuada commodo, est nisl rhoncus nisl, ac commodo diam mauris quis quam. Mauris iaculis, dui quis condimentum vulputate, odio nunc aliquam purus, non ullamcorper nunc diam at leo. Nulla non leo. Nulla in velit. Nam ultricies sapien nec turpis. </p> <div class="products"> <table border="0" cellspacing="8" class="products"> <tr> <td> <div><img alt="" src="images/product1.jpg" /></div> <div><a href="#">Tableware</a></div> </td> <td> <div><img alt="" src="images/product2.jpg" /></div> <div><a href="#">Furniture</a></div> </td> <td> <div><img alt="" src="images/product3.jpg" /></div> <div><a href="#">Ornaments</a></div> </td> </tr> </table></div> </div> <!--END: PAGE-CONTENT --> <br clear="all" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--END:MAIN BOX --> </div> <!--END: CONTENT --> <div class="clear"> </div> </div> <!-- END MAIN --> <div class="credit1">Website Design: <a href="http://www.xxxx.co.uk" target="_blank">xxxxx</a> </div></div></body></html> ... and the CSS here: body{ margin: 2px; background-color: #ffffff;}/* Everything */#all{ margin: auto; width: 770px; max-width: 770px; background-color: #ffffff; text-align: left;}#main{ clear: both; vertical-align: top; margin:0; padding:0;}/*HEADER AND TOP NAVIGATION*/#header{ background: url(../images/header.jpg) no-repeat 0px 0px; height: 197px;}#header ul{ padding-top: 10px;}#header li{ display: inline; padding-left: 8px; padding-right: 8px;}#header li a{ font: bold 100% arial, sans serif; font-size: medium; color: #cc6346; text-decoration: none;}#header li a:hover{ color: #5291C2; text-decoration: none;}#header li a.on{ color: #a9a9a9;}/*BREADCRUMB TRAIL*/#breadcrumb{ padding-top: 10px; text-align: right; margin-right: 20px; font: 75% arial,sans-serif; color: #474747; text-decoration: none;}#breadcrumb a{ font: 100% arial,sans-serif; text-decoration: none; color: #cc6346;}#breadcrumb a:hover{ color: #5291C2; text-decoration: none;}#breadcrumb a.on{ color: #a9a9a9;}/*TEXT, LINKS ETC*/h1{ margin: 15px; padding-top: 5px; font: bold 97% Arial, Helvetica, sans-serif; color: #5291C2;}h2{ margin: 7px 20px; padding-top: 5px; padding-bottom: 5px; font: bold 96% Arial, Helvetica, sans-serif; color: #a2a2a2;}p{ font: 75% arial,sans-serif; line-height: 150%; text-align: left; } .container p{ width: 90%; margin-left: 15px; color: #474747;}ul{ padding-left: 15px; margin-left: 0px;}li{ font: 82%/17px arial,sans-serif; margin-left: 0px; color: #02a1d8; text-decoration: none;}a{ color: #cc6346;}a.on{ color: #a9a9a9;}a:hover{ color: #5291C2; text-decoration: none;}/* LEFT, LEFT NAVIGATION AND LEFT SEARCH BOX*/.leftnav{ float: left; margin-top: 8px; width: 23%;}.left-box{ background-color: #ffffff; border: 1px solid #ffffff;}.left{ padding-top: 4px; padding-bottom: 15px;}.left-tl{ background: url(../images/left-tl.gif) no-repeat 0px 0px; position: relative;}.left-tr{ background: url(../images/left-tr.gif) no-repeat 100% 0px; position: relative;}.left-bl{ background: url(../images/left-bl.gif) no-repeat 0px 100%; position: relative;}.left-br{ background: url(../images/left-br.gif) no-repeat 100% 100%; position: relative;}.left-t{ background: url(../images/left-t.gif) repeat-x 0px 0px; position: relative;}.left-b{ background: url(../images/left-b.gif) repeat-x 0px 100%; position: relative;}.left-l{ background: url(../images/left-l.gif) repeat-y 0px 0px; position: relative;}.left-r{ background: url(../images/left-r.gif) repeat-y 100% 0px; position: relative;}.leftnav ul{ list-style-type: none;}.leftnav li{ font: bold 100% arial, sans-serif; color: #5593C3; margin-left: 7px; padding-top: 5px; text-decoration: none;}.leftnav li a{ font: normal 83% arial, sans-serif; color: #cc6346; text-decoration: none;}.leftnav li a:hover{ color: #5291C2; text-decoration: none;}.leftnav li a.on{ color: #a9a9a9; text-decoration: underline;}.left-search li{ font: bold 100% arial, sans-serif; color: #5593C3; margin-left: 7px; padding-top: 5px; text-decoration: none;}.left-search li label{ width: 0px; text-decoration: none;}.left-search input{ width: 100px; border: solid 1px #474747; font: normal 80% arial, sans-serif; color: #474747;}.left-search input.submit{ width: 104px; color: #cc6346; border: 1px solid #474747;}/* CONTENT AND CONTENT AREA */#content-area{ margin-top: 5px; float: right; width: 77%;}#main-container{ padding-left: 2px; padding-bottom: 2px; margin: 2px 0px 2px 2px; padding-top: 2px;}.main-box{ background-color: #ffffff; border:1px solid #ffffff;}.main-tl{ background: url(../images/main-pod-tl.gif) no-repeat 0px 0px; position: relative;}.main-tr{ background: url(../images/main-pod-tr.gif) no-repeat 100% 0px; position: relative;}.main-bl{ background: url(../images/main-pod-bl.gif) no-repeat 0px 100%; position: relative;}.main-br{ background: url(../images/main-pod-br.gif) no-repeat 100% 100%; position: relative;}.main-t{ background: url(../images/main-pod-top.gif) repeat-x 0px 0px; position: relative;}.main-b{ background: url(../images/main-pod-bottom.gif) repeat-x 0px 100%; position: relative;}.main-l{ background: url(../images/main-pod-l.gif) repeat-y 0px 0px; position: relative;}.main-r{ background: url(../images/main-pod-r.gif) repeat-y 100% 0px; position: relative;}.container{ margin: 27px; background: none; padding-bottom: 10px; }.box{ background-color: #F6F4F4; margin: 25px; border: 1px solid #ffffff;}/*PRODUCT PAGE*/#productpic { float: left; width:150px; border: 1px solid #ffffff;}#productpic img{ margin-top:5px;}#productdesc{ float: left; width: 370px; text-align:left; border: 1px solid #ffffff;}#productdesc p input{ color: #cc6346; border: 1px solid #474747; background-color:#ffffff; font: normal 100% arial, sans serif;}/*CATALOGUE / PRODUCT TABLE*/.products{ margin: auto; text-align: center;}table.products{ display: inline;}table.products tr td{ font: normal 80% arial,helvetica,sans-serif; text-align: center; width: 150px;}table.products tr td img{ border: 0px solid #777777; margin: 10px 0 4px 0; width: 150px; height: 150px;}table.products tr td a{ color: #cc6346; text-decoration: none;}table.products tr td a:hover{ color: #5291C2; text-decoration: none;}table.products tr td a.on{ color: #a9a9a9; text-decoration: none;}/*CREDIT*/.credit1{ clear: both; margin-top: 10px; margin-right: 10px; font: 75% arial; color: #474747; text-align: right; text-decoration: none; border: 1px solid #ffffff;}.credit1 a{ color: #5593C3; text-decoration: none;}.credit1 a:hover{ text-decoration: underline;}/*MISCELLANEOUS*/.clear{ clear: both;}.red{ padding-right: 0px; padding-left: 22px; font-size: 10px; padding-bottom: 18px; color: red; padding-top: 22px; font-family: arial,Sans-Serif;}/* FORMS */.container ul{ width: 95%; height: auto; text-align: left; text-decoration: none; list-style-type: none;}.container li{ list-style: none; font: 89% arial, sans-serif,; padding-top: 5px; padding-bottom: 5px;}.container label{ font: 89% arial, sans-serif; color: #474747; width: 12em; float: left; text-align: left; margin-right: 0.5em; display: block;}.container input{ color: #474747; font-size: 89%; width: 40%; border: 1px solid #474747;}.container textarea{ width: 40%; font: 89% arial, sans-serif; color: #474747; border: 1px solid #474747;}.container checkbox{ border: 0px solid #ffffff;}input.submit{ color: #cc6346; width: 70px; border: 1px solid #474747; background: #ffffff; margin-left: 0px;}select{ border: 1px solid #474747; width: 41%; color: #474747; background: #ffffff; margin-left: 0px; font: 82% arial, sans-serif;}.LinkButton{ font-size: 25%; vertical-align: top; width: 69px; color: #cc6346; margin-right: 5px; font-family: arial, Sans-Serif; text-align: center; text-decoration: underline;}.LinkButton:Hover{ font-size: 89%; vertical-align: top; width: 69px; color: #cc6346; margin-right: 5px; font-family: arial, Sans-Serif; text-align: center; text-decoration: underline;}/*SHOPPING BASKET*/table.shopping{width:525px;text-align:center;margin:auto;}table.shopping tr td{ padding: 2px; font: normal normal 75% arial,helvetica,sans-serif; color: #777777; text-align: center; background-color: #f5f5f5;}table.shopping tr th{ padding: 5px; font: normal bold 80% arial,helvetica,sans-serif; color: #fff; text-align: center; background-color: #cc6346;}.shopping a{ color: #cc6346; text-decoration: underline;}.shopping input{ width:50px; border: 1px solid #474747;}.shopping tr td.buttons{ background-color: #fff; text-align: right; padding: 10px 0 0 0;}.shopping tr td.shop-small{width:100px;}.shopping tr td.buttons input{ border: 1px solid #033C20; color:#cc6346; background-color: #ffffff; font-size:small; text-align: center; width:150px;}/*STATS*/.statstable{ font: 100% arial,sans-serif; text-align: left; text-decoration: none; color: black; font-family: arial; text-decoration: none;}
  7. elementalgrace
    Has anyone else found that even though you have no errors it still tells you that your code won't validate? I have a warning for a label (apparently the validator doesn't like my label name, heaven forbid)but no errors in my code and still the dratted thing won't validate ...This seems crazy to me ...
  8. elementalgrace
    Thanks for the tips, but I have already set the margin and padding to zero. It's just this one button that's indenting. I have to assume it's got something to do with the way IE adds in extra pixels here and there as it's happening in IE 6 and 7, but not in any other browsers. It's not a huge deal and the developer would probably accept it as it is but I'm a nitpicky sort and it annoys me as I like things to line up properly and work the same in all browsers. I can post all the code if it would help at all?
  9. elementalgrace
    Hi there guys n gals.I have a problem that's been driving me a bit nuts today, that I can't see an obvious answer for. If anyone can possibly suggest an answer to deal with it, I'd really appreciate it. I'm designing a template for an ecommerce site before passing it over to the developer. Everything's working perfectly apart from one minor thing that's bugging the living daylights out of me. (I haven't validated it yet, but fingers crossed that should be fine). I don't really want to use multiple stylesheets if possible and it all has to be v accessible too.I'm creating the product detail page, and want it to display so that you have the product title, then the price underneath, an add to basket button and the product detail underneath that. It all seems to line up fine, except in IE (I've checked in v6 and 7) where it's putting in an indent automatically next to the Add to Basket button for no apparent reason. It displays perfectly in firefox, opera and netscape. Any suggestions would be more than welcome. HTML and CSS for relevant bits below.HTML <div class="container"><div id="breadcrumb"><a href="#">Home</a> > <a href="#">Catalogue</a> > <a href="#">Subcategory</a> > Product</div><h1>Lorem Ipsum Dolor Sit</h1><div id="productdesc"><p><b>Price:</b> £ 9.99</p><p><input type="submit" value="add to basket" /></p><p><b>Product Description:</b><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut et quam. Aenean sem libero, fringilla quis, pellentesque vel, viverra eget, dui. Quisque lobortis. Pellentesque a felis. <a href="#">Praesent consectetuer augue sit amet mauris</a>. Maecenas adipiscing, dui sit amet auctor dapibus, lectus massa sollicitudin dui, nec pellentesque lectus turpis cursus diam. Donec tincidunt rhoncus odio. Nam sodales ipsum eu erat. Donec facilisis, orci in malesuada commodo, est nisl rhoncus nisl, ac commodo diam mauris quis quam. Mauris iaculis, dui quis condimentum vulputate, odio nunc aliquam purus, non ullamcorper nunc diam at leo. Nulla non leo. Nulla in velit. Nam ultricies sapien nec turpis.</p><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut et quam. Aenean sem libero, fringilla quis, pellentesque vel, viverra eget, dui. Quisque lobortis. Pellentesque a felis. Praesent consectetuer augue sit amet mauris. </p> </div><div id="productpic"><img src="images/3.jpg" height="150" width="150" alt="" /><img alt="" height="150" src="images/3.jpg" width="150" /><img alt="" height="150" src="images/3.jpg" width="150" /></div><div class="clear"> </div></div> CSS .container{ margin: 27px; background: none; padding-bottom: 10px; }/*BREADCRUMB TRAIL*/#breadcrumb{ padding-top: 10px; text-align: right; margin-right: 20px; font: 75% arial,sans-serif; color: #474747; text-decoration: none;}#breadcrumb a{ font: 100% arial,sans-serif; text-decoration: none; color: #cc6346;}#breadcrumb a:hover{ color: #5291C2; text-decoration: none;}#breadcrumb a.on{ color: #a9a9a9;}/*PRODUCT PAGE*/#productpic { float: left; width:150px; border: 1px solid #ffffff;}#productpic img{ margin-top:5px;}#productdesc{ float: left; width: 370px; text-align:left; border: 1px solid #ffffff;}#productdesc p input{ color: #cc6346; border: 1px solid #474747; background-color:#ffffff; font: normal 100% arial, sans serif;}
  10. elementalgrace
    I don't know - I'm trying to find out as it would be quite useful for a project I'm working on at the mo. I guess it's possible using java or something as well it would be really useful if anyone knows anything about this.
  11. elementalgrace
    I was looking for a solution to an unrelated problem yesterday when I came across type="scribble" for an input box, which is supposed to allow the user to scribble on a predefined area using a mouse. Thing is I can only find references to it for html 3 - has it been deprecated now, and if so has it been replaced by something similar?The info I found was on http://www.w3.org/MarkUp/html3/input.htmlCheersEG
  12. elementalgrace
    Unfortunately I don't have the luxury of ignoring IE. Hopefully IE 7 will make cross browser compatibility a bit easier.I hadn't considered that the floated elements night overlap. As it turned out, I didn't actually need the float after all so I guess it worked out for the best. I will perhaps have a play about with it later and see if that was the case. Thanks again for your help - I was more or less at the end of my tether with it.
  13. elementalgrace
    Thanks for the help aspnetguy. The problem was with the contact form, the login boxes were behaving fine.For some reason the left float in the container div was locking the input boxes in the contact form in IE only so that you couldn't click on them to enter text. I've taken it out and it seems to work fine now across all the browsers but I honestly have no clue how a float element could affect it. Doesn't seem to make a lot of sense to me! Anyone have a clue? Would love to be enlightened about this because it's never happened to me before!
  14. elementalgrace
    For the login div - I just noticed and changed that so they matched but it's having no effect on the main form. I still can't get it to type into the main text box.I just tried removing the stylesheet and it seems to let me do it then so I guess it's a css prob rather than an html one but if anyone's got any advice I'd still be ahppy to hear it!
  15. elementalgrace
    Hi Guys,Desperate to a find a solution to problem that may well be the weirdest problem I have ever come across. I am creating an HTML template to send across to a web developer, which has an index page template and a form template. Both pages look fine but when testing the form I noticed that you can't click on the input boxes in IE to type in your details. It does work in firefox though. If you click on the label in IE, the cursor will appear in the input box and if you use TAB to navigate into the input boxes, it gets there ok. The HTML and CSS are below. I don't have a copy on the web yet so I hope this is enough for someone to give me a clue where I'm going wrong.... <!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> <title>Find My Job</title> <link href="images/styles.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta content="" name="keywords" /> <meta content="" name="description" /> <meta content="" name="abstract" /></head><!--ALL--><body> <div id="all"> <div id="main"> <!--CONTENT --> <div id="content-area"> <!-- BEGIN:MAIN BOX --> <div id="main-container"> <div class="main-t"> <div class="main-b"> <div class="main-l"> <div class="main-r"> <div class="main-tl"> <div class="main-tr"> <div class="main-bl"> <div class="main-br"> <div class="main-content"> <!-- BEGIN:MAIN BOX --> <div class="clear"> </div> <!--LOGIN --> <div id="login"> <ul> <li> <label for="txtUsername"> Username</label> <input id="Login_txtUsername" maxlength="12" name="Login:txtUsername" title="Your username" type="text" /></li> <li> <label for="txtPwd"> Password</label> <input id="Login_txtPwd" maxlength="8" name="Login:txtPwd" title="Your password" type="password" /></li> <li> <label for="btnLogin"> </label> <a href="#">Login Help</a> <input id="Login_btnLogin" name="Login:btnLogin" title="Login" type="submit" class="submit" value="Login" /> </li> </ul> </div> <!--END:LOGIN --> <!--LEFT NAVIGATION--> <div id="leftnav"> <ul> <li><a href="#" class="on">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Jobseekers</a></li> <li><a href="#">Employers</a></li> <li><a href="#">Search Vacancies</a></li> <li><a href="#">Browse Vacancies</a></li> <li><a href="#">Special Offers</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--PAGE CONTENT --> <div class="container"> <h1> Lorem Ipsum Dolor Amet</h1> <p> Please fill your contact details into the form below:</p> <form> <ul> <li> <label for="txtName"> Name</label> <input id="txtName" name="txtName" title="Your name" type="text" /></li> <li> <label for="txtOrganisation"> Organisation</label> <input id="txtOrganisation" name="txtOrganisation" title="Your company or organisation" type="text" /></li> <li> <label for="txtTelephone"> Telephone</label> <input id="txtTelephone" maxlength="20" name="txtTelephone" title="Your Telephone Number" type="text" /></li> <li> <label for="txtEmail"> Email</label> <input id="txtEmail" maxlength="255" name="txtEmail" title="Your Email Address" type="text" /></li> <li> <label for="txtEnquiry"> Enquiry</label> <textarea id="txtEnquiry" name="txtEnquiry" cols="2" rows="6" title="Your comment or enquiry"></textarea></li> <li> <label for="btnSubmit"> </label> <input id="btnSubmit" name="btnSubmit" title="Send Enquiry" type="submit" class="submit" value="Send" /></li> </ul> </form> </div> </div> <div class="clear"> </div> <!--PAGE-CONTENT --> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--END:MAIN BOX --> </div> <!--END: CONTENT --> <div class="credit1"> <a href="index.htm">FindMyJob.co.uk</a> | <a href="mailto:info@findmyjob.co.uk">info@findmyjob.co.uk</a> | Tel: 0121 522 4771 | <a href="contact.aspx">Contact Form</a> </div> <div class="credit2"> <a href="terms.aspx">Terms & Conditions</a> | <a href="privacy.aspx">Privacy Policy</a> | <a href="#">Sponsored Employers</a> </div> <div class="credit1"> Website Design: <a href="http://www.create-solutions.co.uk" target="_blank">Create Solutions (UK) Ltd</a> </div> </div> </div> <!-- END MAIN --></body></html> CSS: body{ margin: 2px; background-color: #ffffff;}/* ALL / HEADINGS/ PARAGRAPHS / LINKS */#all{ padding-right: 30px; width: 96%; max-width: 96%; background-color: #ffffff; text-align: left;}h1{ margin-left: 5%; padding-top: 25px; font: bold 97% Arial, Helvetica, sans-serif; color: #F5821F;}h2{ margin-left: 5%; padding-top: 5px; padding-bottom: 5px; font: bold 95% Arial, Helvetica, sans-serif; color: #2B2D90;}p{ font: 75% verdana,sans-serif; line-height: 140%; text-align: left;}a{ color: #F5821F; text-decoration:none; font: normal 12px verdana, sans-serif;}a:hover{ text-decoration:underline;}a.on{ color:#2E3092;}ul{ padding-left: 12px; margin-left: 10px;}li{ font: 11px verdana,sans-serif; margin-left: 0px; color: #a2a2a2; text-decoration: none;}/* MAIN BOX */#content-area{ padding-right: 0px; padding-left: 0px; float: right; padding-bottom: 0px; margin: 0px; width: 95%; padding-top: 0px;}.right{ border-right: #000 0px solid; border-top: #000 0px solid; float: right; margin: 0px 0px 0px 22px; border-left: #000 0px solid; border-bottom: #000 0px solid;}#main-container{ padding-right: 0px; padding-left: 2px; padding-bottom: 2px; margin: 2px 0px 2px 2px; padding-top: 2px;}.main-tl{ background: url(../images/main-pod-tl.gif) no-repeat 0px 0px; position: relative;}.main-tr{ background: url(../images/main-pod-tr.gif) no-repeat 100% 0px; position: relative;}.main-bl{ background: url(../images/main-pod-bl.gif) no-repeat 0px 100%; position: relative;}.main-br{ padding-right: 0em; padding-left: 0em; background: url(../images/main-pod-br2.gif) no-repeat 100% 100%; padding-bottom: 0px; padding-top: 0px; position: relative;}.main-t{ background: url(../images/main-pod-top2.gif) repeat-x 0px 0px; position: relative;}.main-b{ background: url(../images/main-pod-bottom2.gif) repeat-x 0px 100%; position: relative;}.main-l{ background: url(../images/main-pod-l2.gif) repeat-y 0px 0px; position: relative;}.main-r{ background: url(../images/main-pod-r2.gif) repeat-y 100% 0px; position: relative;}/*LOGIN*/#login{ margin-right:25px;}#login ul{ width: 90%; color: #2B2D90; height: auto; text-align: right; text-decoration: none; padding-top: 10px; list-style-type: none;}#login li{ font: bold 12px verdana, Helvetica, sans-serif; color: #2B2D90; text-decoration: none; padding-top:3px; }#login label{ vertical-align: middle; width: 50px; color: #2B2D90; margin-right: 0px; font: normal 12px verdana, Sans-Serif; text-align: left; text-decoration: none;}#login input, .login textarea, .login Select{ font-size: 100%; border: 1px solid #F5821F; color:#a2a2a2; width: 100px; min-width: 140px; font-family: verdana, arial, helvetica, sans-serif;}/* NAVIGATION*/#main{ clear: both; vertical-align: top;}#leftnav{ float:left; padding-right: 15px; padding-left: 25px; background: none; padding-bottom: 2px; text-transform: capitalize; width: 180px; padding-top: 90px;}#leftnav ul{ padding-right: 0px; padding-left: 30px; padding-bottom: 0px; margin: 12px 0px 0px; padding-top: 0px;}#leftnav li{ display: block; padding-bottom:7px; margin-bottom: 8px; list-style-type:none;}#leftnav li a{ font: bold 14px Arial, Helvetica, sans-serif; color: #2B2D90; text-decoration: none;}#leftnav a:hover{text-decoration:underline;}#leftnav a.on{ color:#F5821F;}/* CONTENT*/.container{ float:left; width: 63%; margin-right:35px; margin-bottom:45px; padding-bottom:5px; height:auto;}.container p{ line-height: 150%; margin-left: 5%; color: #a2a2a2;}.right{ border-right: #000 0px solid; border-top: #000 0px solid; float: right; margin: 0px 10px 0px 22px; border-left: #000 0px solid; border-bottom: #000 0px solid;}/* Footer */.credit1{ clear: both; margin-top: 10px; margin-left:138px; margin-right:40px; font: 12px verdana; width: 75%; max-width:75%; color: #a2a2a2; text-align: center; text-decoration: none;}.credit2{ clear: both; margin-top: 10px; margin-left:138px; margin-right:40px; width: 75%; max-width:75%; color: #a2a2a2; text-align: center; text-decoration: none;}#olPages{ font-size: 100%; font-family: verdana,arial, helvetica,sans-serif;}/*MISC*/.clear{ clear: both;}.red{ padding-right: 0px; padding-left: 22px; font-size: 10px; padding-bottom: 18px; color: red; padding-top: 22px; font-family: verdana,Sans-Serif;}/*TABLES*/.table{ font: 80% verdana, sans-serif; color: #035050;}.table a{ color: #a9a9a9; text-decoration: none;}.table a:hover{ text-decoration: underline;}.table tr{ margin: auto; text-align: justify;}.table td{ text-align: left; padding-bottom: 5px; padding-right: 5px;}/* Form styles */.container ul{ width: 95%; color: #000000; height: auto; text-align: left; text-decoration: none; list-style-type: none;}.container li{ list-style: none; font: 89% verdana, sans-serif,; padding-top: 5px; padding-bottom: 5px;}.container label{ font: 89% verdana, sans-serif; color: #a2a2a2; width: 12em; float: left; text-align: left; margin-right: 0.5em; display: block;}.container input{ color: #a2a2a2; font-size: 89%; width: 59%; border: 1px solid #F5821F;}.container textarea{ width:59%; font: 89% verdana, sans-serif; color: #a2a2a2; border: 1px solid #F5821F;}.container checkbox{ border: 1px, #F5821F;}input.submit{ color: #F5821F; width: 70px; border: 1px solid #F5821F; background: #ffffff; margin-left: 0px;}.checkbox{ text-align: left;}select{ border: 1px solid #035050; width: 31%; color: #035050; background: #ffffff; margin-left: 0px; font: 89% verdana, sans-serif;}.LinkButton{ font-size: 25%; vertical-align: top; width: 69px; color: #121267; margin-right: 5px; font-family: verdana, Sans-Serif; text-align: center; text-decoration: underline;}.LinkButton:Hover{ font-size: 89%; vertical-align: top; width: 69px; color: #67b3b3; margin-right: 5px; font-family: verdana, Sans-Serif; text-align: center; text-decoration: underline;}.statstable{ font: 100% verdana,sans-serif; text-align: left; text-decoration: none; color: black; font-family: verdana; text-decoration: none;}
×
×
  • Create New...