PDA

View Full Version : Coding a nice results page..



Wayners
Oct 5th, 2009, 04:36 PM
Hi all. new to the forums :)

Wondering if anyone could help me. Im having more of an inspirational dilemma as opposed to a coding one. Im required to code a nice looking results page for a online quote system (moving house quotes).

Ive got the whole site laid out how i want it but cant quite get the results section of the quote-result page how i imagine it and wondered if anyone had any ideas. the html is posted below.



<!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-1" />
<title>Quote Result | Click Conveyancing - Specialist Conveyancing Solicitors (Conveyancers)</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="css/form.css" type="text/css" />
</head>
<body>
<!-- Wrapper Start -->
<div id="pagewrapper">
<!-- Header Start -->
<div id="header">
<div class="header_r"><img src="images/b-logo.png" width="168" height="59" alt="Barnetts Logo" /><br />
<span>CALL NOW ON: 0800 066 5021 </span> </div>
<div class="logo"><a href="index.html"><img src="images/logo.png" alt="Logo" border="0" /></a></div>
</div>
<!-- Header End -->
<div class="clear"></div>
<!-- Navigation Start -->
<div id="menu">
<ul class="navigation">
<li><a href="index.html">Home Page</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li class="current"><a href="services.html">quote</a></li>
<li><a href="portfolio.html">Track</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">FAQ</a></li>
<li><a href="contact.html">Benefits</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- Navigation End -->
<div class="clear"></div>
<div class="subheader">
<h1><span>Track</span> | Track your conveyancing here..</h1>
<p>Login below to track the progress of your house sale or purchase.</p>
</div>
<div class="breadcrumbs"> <a href="#">Home</a> > <a href="#">Services</a></div>
<!-- Content Start -->
<div id="content">
<!-- Left Content Start -->
<div id="leftcontent">
<div class="contentcol">
<!-- starts content-->
<h1>Your Conveyancing Quote is Below!</h1>
<p>No Completion No Fee<br /></p>
<p>
</div>
</div>
<!-- Right Content Start -->
<div id="rightcontent">
<!-- Missions Start -->
<div id="sidebar">
<h3>Sub Navigation</h3>
<p>Here are some related links :</p>
<h3>Live Chat</h3>
<img src="images/livehelp.gif" width="216" height="64" alt="Featured Work!" class="imgborder" /><br />
<!-- Missions End -->
<!-- News Start -->
<br />
<h3><img alt="" src="images/testimonials.gif" width="44" height="43" /> Testimonials!</h3>
<div class="testimonials">
<p>" Vestibulum nibh. Pellentesque habitant morbi
tristique senectus et netus et malesuada
fames ac turpis egestas. Sed condimentum
rhoncus nibh. Mauris ullamcorper, orci nec
posuere volutpat, quam diam iaculis lectus, " <br />
<cite>John Doe<br />
company name</cite> </p>
</div>
<br clear="all" />
<!-- News End -->
</div>
</div>
<!-- Right Content End -->
<div class="clear"></div>
</div>
<!-- Content End -->
<div class="clear"></div>
<!-- Footer Start -->
<div id="footerbg">
<div id="footer">
<div id="subscribe" class="rightalign"> <img alt="" src="images/3.png" /> <img alt="" src="images/RSS_Board_2-19.png" /> </div>
<ul class="navigation">
<li><a href="index.html">Home Page</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Quote</a></li>
<li><a href="portfolio.html">Track</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">FAQ</a></li>
<li><a href="contact.html">Benefits</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<br />
<br />
<div id="copyrights" class="leftalign">&copy; 2009 Copyright
Barnetts Solicitors | All Rights Reserved <br />
Conform to <acronym title="World Wide Web">W3C</acronym> Standard <a href="http://validator.w3.org/check?uri=referer" title="Validate XHTML">XHTML</a> &amp; <a title="Validate CSS" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> <br />
This site is provided by Barnetts Solicitors (V.A.T Reg. number 325 0540 94), a Solicitors of England &amp; Wales,<br />
,who are regulated by the Solicitors Regulation Authority.<br />
Our registration number is 67445. <br />
All calls may be recorded and monitored for training and quality purposes. </div>
<!-- Footer End -->
</div>
<!-- Wrapper End -->
</div>
</div>
</body>
</html>

_Aerospace_Eng_
Oct 5th, 2009, 04:44 PM
Well what did you "envision"?

Wayners
Oct 5th, 2009, 04:53 PM
Some of the examples I have come across in this "field" are pretty shocking - i wanted to do something alot nicer. http://www.reallymoving.com has a nice quote results engine however they list a number of companies whereas i will be listing only my prices/quotes.

The current/old version of the quote system is available at http://www.clickconveyancing.co.uk

I envisioned something that would sit nicely with the new design, perhaps with some nice graphics but im not entirely sure how best to lay it out and where to place the divs etc.

Once its been coded in xhtml/css - its going to be butchered to death by our resident asp.net coders to get the functionality - something that im dreading as going back through it all will no doubt be a nightmare.

thanks again :)

Scriptet
Oct 5th, 2009, 04:56 PM
Hi,

You've only really posted half of a question, so it's pretty impossible to give you a stone wall solution.


Ive got the whole site laid out how i want it but cant quite get the results section of the quote-result page how i imagine it and wondered if anyone had any ideas. the html is posted below.

1. Where is the "results section" is it to appear in the #contentcol?
2. We can't actually give you any ideas, because we can't see how the layout looks without any posted CSS. So we either need the related CSS or a link to the page.

EDIT: just seen you've posted the link :)

Wayners
Oct 6th, 2009, 09:57 AM
Scriptet - the link i posted is the old site, the new layout is the original html, the css is below:



body {
background:#fff url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/mainbg.jpg) top center repeat-x;
font:normal 12px/1.5em Arial, Helvetica, sans-serif;
margin:auto;
color:#212121;
padding:0;
}

.clear {
clear:both;
}

.clearfix:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}

.clearfix {
display:inline-block;
}

html[xmlns] .clearfix {
display:block;
}

* html .clearfix {
height:1%;
}

.spacer20left {
margin-left:40px;
}

div,img {
behavior:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/css/iepngfix.htc);
border:none;
}

#pagewrapper {
width:100%;
margin:auto;
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/headernew.jpg) top center no-repeat;
}

a:link,a:visited,a:active {
color:#6d889e;
text-decoration:none;
}

a:hover {
color:#da701a;
text-decoration:none;
}

/************************************/
/* HEADER */
/************************************/
.homebox {
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/SliderBG2.png) center top no-repeat;
width:908px;
height:301px;
margin:0 auto;
padding-top:5px;
}

.subheader {
width:908px;
height:122px;
margin:auto;
}

.subheader p {
letter-spacing:normal;
padding:0 40px;
margin:0;
font:normal 18px Arial, Helvetica, sans-serif;
letter-spacing:-1px;
color:#FFFFFF;
}

.subheader h1 {
padding:20px 0 0 40px;
margin:0;
font:normal 3em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
letter-spacing:-1px;
color:#FFFFFF;
}

div.breadcrumbs {
color:#FFFFFF;
padding:7px 10px;
background:#1d79aa;
width:868px;
margin:auto;
font:normal 9px Arial, Helvetica, sans-serif;
}

div.breadcrumbs a:link,div.breadcrumbs a:visited,div.breadcrumbs a:active {
color:#9bbdd6;
padding:0 5px;
font:normal 9px Arial, Helvetica, sans-serif;
}

div.breadcrumbs a:hover {
color:#FFFFFF;
font:normal 9px Arial, Helvetica, sans-serif;
}

/************************************************************************/
#header {
width:868px;
margin:auto;
height:91px;
}

.logo {
padding:10px 10px 0;
font:bold 3em "Lucida Sans unicode", Georgia, "Times New Roman", Times, serif;
color:#000;
text-decoration:none;
}

.header_r {
float:right;
font:normal 1.5em Arial, Georgia, "Times New Roman", Times, serif;
letter-spacing:-1px;
text-align:right;
padding:15px 10px 0 0;
color:#9bbdd6;
}

.header_r span {
color:#fff;
font:normal bold 10px Arial, Helvetica, sans-serif;
letter-spacing:normal;
}

/************************************/
/* NAVIGATION */
/************************************/
#menu {
width:908px;
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/menubg.jpg) repeat-x;
margin:1px auto 0;
padding:7px 0 0;
height:54px;
}

.navigation {
padding:5px;
margin:auto;
width:auto;
}

.navigation ul {
padding:0;
margin:0;
}

.navigation li {
display:inline;
list-style:none;
padding-top:5px;
}

.navigation li a {
float:left;
border-right:1px solid #bfbfbf;
text-decoration:none;
text-align:center;
font:normal bold 11px Arial, "Lucida Sans unicode", Tahoma, Verdana, Sans-serif;
text-transform:uppercase;
color:#8f8f8f;
padding:0 10px;
}

.navigation li.current a, .navigation li a:hover, .navigation li.current a:hover {
color:#212121;
padding:0 10px;
}

/************************************/
/* CONTENT_LEFT */
/************************************/
#content {
width:908px;
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/topcontent.gif) top center no-repeat;
margin:0 auto;
min-height:400px;
height:400px;
height:100%;
overflow:auto;
padding-bottom:40px;

}

#leftcontent {
float:left;
width:620px;
}

.contentcol {
padding:25px;
font-size: 10px;
}

.testimonials p {
color:#a8a8a8;
font:bold 12px Arial, Helvetica, sans-serif;
padding:0;
}

cite {
float:right;
text-align:right;
font-size:11px;
font-style:normal;
font-weight:400;
}

big {
font-size:300%;
font-style:italic;
}

.rightalign {
float:right;
}

.leftalign {
float:left;
}

h1 {
font:normal 2.3em "Lucida Grande", sans-serif;
letter-spacing:-1px;
color:#4e4e4e;
margin:10px 0 0;
text-align:left;
}

h1 span {
font:bold italic 1em "Lucida Grande", sans-serif;
letter-spacing:-2px;
color:#fff;
}

h3 {
font:normal 1.8em "Lucida Grande", sans-serif;
letter-spacing:-1px;
color:#4e4e4e;
margin:0;
}

h2 {
font:normal 2em "Lucida Grande", sans-serif;
letter-spacing:-1px;
color:#333;
margin:0;
}

h4 {
font:normal 1.5em "Trebuchet MS","Lucida Grande", sans-serif;
letter-spacing:-1px;
color:#333;
margin:0;
text-transform:uppercase;
}

p {
color:#CCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

.imgb {
border:1px solid #D1E2EF;
padding:8px;
background-color:#F0F5F9;
margin:15px;
}

.imgborder {
border:1px solid #D1D1D1;
background-color:#FFF;
padding:5px;
}

.content_higlig {
width:90%;
margin:10px auto;
padding:20px;
background-color:#fff;
border:10px solid #e4edf1;
}

.info {
padding:20px 0;
position:relative;
}

.info .date {
color:#666666;
margin-right:8px;
padding-right:8px;
text-decoration:none;
text-transform:uppercase;
font:10px Arial, Helvetica, sans-serif;
}

.info a {
color:#666666;
margin-right:8px;
padding-right:8px;
text-decoration:none;
text-transform:uppercase;
font:10px Arial, Helvetica, sans-serif;
}

.info a:hover {
text-decoration:underline;
}

.info .right {
display:inline;
position:absolute;
right:0;
}

.quote {
width:72px;
height:31px;
overflow:hidden;
margin-top:-6px;
margin-right:8px;
padding:6px 0 0 12px;
}

.quote a {
color:#212121;
margin:0;
padding:0;
text-decoration:none;
text-transform:uppercase;
}

/************************************/
/* CONTENT_RIGHT */
/************************************/
#rightcontent {
width:260px;
float:left;
padding:0 0 0 20px;
}

#sidebar {
text-align:left;
padding:30px 30px 0 0;
}

/************************************/
/* FOOTER */
/************************************/
#footerbg {
background:#e3eef3;
border-top:1px solid #bbd2dd;
overflow:auto;
padding:20px 0;
color:#909090;
}

#footer {
font:normal 9px/12px Arial, Helvetica, sans-serif;
width:885px;
margin:auto;
}

#footer a {
color:#a7afb2;
}

#footer a:hover {
color:#000;
}

#copyrights {
padding:0 0 0 20px;
}

#subscribe {
text-align:left;
padding:0 20px 0 0;
}

abbr,acronym {
cursor:help;
color:#484848;
}

/************************************/
/* FEATURE */
/************************************/
#nav a,#nav a:active,#nav a:visited {
display:block;
float:left;
padding:5px 8px;
color:#FFF;
width:131px;
margin:0 1px;
background:#000;
text-align:center;
}

#nav a.selected,#nav a.selected:active,#nav a.selected:visited {
background:#C51D1D;
text-decoration:none;
outline:none;
}

.hiddencontent {
display:none;
}

#feature {
width:900px;
margin:auto;
}

.featurebox {
width:900px;
height:200px;
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/feature-bg.gif) no-repeat;
clear:both;
margin:auto;
}

.featureboxl {
float:left;
width:300px;
margin:10px;
}

.featureboxr {
float:right;
width:400px;
margin:15px;
}

.featurebox h1 {
letter-spacing:-1px;
}

.featurebox p {
color:#999;
font-size:12px;
line-height:15px;
width:300px;
float:left;
}

.featurebox img {
left:400px;
float:right;
width:434px;
height:161px;
padding:0 5px;
}

#wrapper {
margin:0 auto;
display:none;
padding:0;
width:860px;
}

#wrapper * {
margin:0;
padding:0;
}

#fullsize {
position:relative;
padding:0;
}

#information {
float:right;
position:absolute;
top:15px;
right:10px;
width:47%;
height:0;
color:#fff;
overflow:hidden;
z-index:200;
opacity:.9;
filter:alpha(opacity=90);
float:right;
padding:0 20px;
}

#information h3 {
padding:3px 0 10px 3px;
color:#fff;
font:normal 3em "Trebuchet MS",Georgia, Helvetica, sans-serif;
letter-spacing:-2px;
}

#information p {
padding:0 0 5px 3px;
color:#fff;
float:right;
font:normal 12px/12px Arial, Helvetica, sans-serif;
}

#image {
width:350px;
height:180px;
}

#image img {
position:absolute;
z-index:25;
width:350px;
height:150px;
left:10px;
top:10px;
padding:10px;
background:#fff;
border:0 solid #105280;
}

.imgnav {
position:absolute;
width:25%;
height:180px;
cursor:pointer;
z-index:150;
}

#imgprev {
left:0;
background:none;
}

#imgnext {
right:0;
background:none;
}

#imglink {
position:absolute;
height:150px;
width:100%;
z-index:100;
opacity:.4;
filter:alpha(opacity=40);
}

.linkhover {
}

#thumbnails {
margin-top:20px;
height:38px;
}

#slideleft {
float:left;
width:24px;
height:81px;
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/leftp.png) top center no-repeat;
padding-left:10px;
}

#slideleft:hover {
}

#slideright {
float:right;
width:24px;
height:81px;
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/rightp.png) top center no-repeat;
padding-right:0;
}

#slideright:hover {
}

#slidearea {
float:left;
position:relative;
width:790px;
margin-left:3px;
height:81px;
overflow:hidden;
}

html* #slidearea {
margin-left:0;
}

#slider {
position:absolute;
left:0;
height:81px;
}

#slider img {
cursor:pointer;
border:1px solid #d8d8d8;
background:#fff;
padding:2px;
}

.readmoremain {
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/readmore.gif) no-repeat;
width:88px;
height:22px;
border:0;
float:right;
padding-top:10px;
}

/* ---------------------------- */
.readmore {
font:normal 10px Arial, Arial, Verdana;
color:#646464;
text-transform:uppercase;
text-decoration:none;
}

.readmore:hover {
font:normal 10px Arial, Arial, Verdana;
color:#0586ba;
text-transform:uppercase;
text-decoration:none;
}

ul.newsbox {
padding:0 30px 0 0;
margin:0;
list-style:none;
}

ul.newsbox li {
font:normal 9px Arial, Verdana, Sans-serif;
border-bottom:1px solid #c7c7c7;
padding:10px 0;
}

ul.newsbox li a {
text-decoration:none;
color:#a8a8a8;
}

ul.newsbox li a:hover {
text-decoration:none;
color:#da701a;
}

ul.newsbox span.newsdate {
font:bold 14px "Trebuchet MS", Georgia, Arial;
color:#646464;
}

/*- SUB MENU --------------------------- */
#menu1 {
width:233px;
margin:10px 0;
}

#menu1 ul {
margin:0;
list-style:none;
padding:0 10px;
}

#menu1 li a {
font:bold 9px Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
voice-family:inherit;
height:11px;
margin:0;
border-bottom:1px solid #e0e0e0;
text-decoration:none;
}

#menu1 li li a {
font:bold 9px Arial, Helvetica, sans-serif;
margin:0;
text-decoration:none;
border-left:0 solid #999999;
border-bottom:1px solid #ededed;
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/plus.gif) 0 50% no-repeat;
text-decoration:none;
}

#menu1 li li a:link,#menu1 li li a:visited {
color:#bebebe;
display:block;
padding:6px 10px;
}

#menu1 li a:link,#menu1 li a:visited {
color:#bebebe;
display:block;
padding:6px 10px;
}

#menu1 li.current a {
color:#da701a;
}

#menu1 li a:hover {
color:#da701a;
padding:6px 10px;
}

#menu1 li li a:hover {
color:#da701a;
padding:6px 10px;
}
/*- SUB End --------------------------- */

.services {
width:270px;
margin:0 0 8px;
padding:0;
height:100%;
min-height:150px;
}

.services p {
width:190px;
margin:0;
font-size:11px;
}

.services h4 {
border-bottom:1px solid #ccc;
margin:0 0 10px 10px;
padding:0 0 10px;
text-align:left;
line-height:inherit;
}

.services b {
margin-bottom:3px;
color:#000;
}

.services img {
margin-left:3px;
}

.brclear {
color:#fff;
border:none;
clear:both;
height:50px;
}
/*- Blog Details --------------------------- */
.blogbox {
width:auto;
margin:0;
padding:10px 0;
height:100%;
}

.blogbox p {
width:auto;
margin:0;
font-size:12px;
padding:0;
}

.blogbox h3 {
border-bottom:0 solid #ccc;
margin:10px 0 0;
padding:0 0 9px;
text-align:left;
line-height:inherit;
}

.blogbox b {
margin-bottom:3px;
color:#000;
}

.blogbox img {
margin-left:5px;
}

.blogbox div.details {
font:normal 9px/10px Arial, Helvetica, sans-serif;
color:#8a8a8a;
padding:8px 10px;
background:#f1fafd;
border-bottom:1px solid #d4dbde;
border-top:1px solid #d4dbde;
}

.comment {
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/comment.gif) no-repeat;
width:29px;
font-size:9px;
font-weight:700;
height:23px;
float:right;
text-align:center;
}

.bottombar {
height:auto;
padding:5px 10px;
font-size:9px;
margin:10px 0;
background:#f1fafd;
border-top:1px solid #d4dbde;
}

/* ================================================= */
/* PAGINATION CSS */
/* ================================================= */
.pagelink {
width:10px;
font-size:9px;
color:#435d82;
background:#ffffff;
border:1px solid #435d82;
clear:both;
line-height:35px;
text-decoration:none;
}

a.pagelink:active,a.pagelink:visited,a.pagelink:link {
width:10px;
border:1px solid #c8dcf1;
background:#fff;
color:#435d82;
padding:6px;
}

a.pagelink:hover {
width:10px;
background:#dae6f3;
border:1px solid #b8d1eb;
color:#435d82;
padding:6px;
}

.pagecurrent {
width:10px;
background:#dae6f3;
border:1px solid #b8d1eb;
color:#435d82;
padding:6px;
font-size:9px;
}

/*- Blog Comments --------------------------- */
.the_commentor {
float:left;
width:80px;
text-align:left;
}

.the_commentor img {
margin-bottom:3px;
}

.comment-metadata a {
color:#cbcbcb;
font-size:10px;
text-decoration:none;
}

.the_comment {
float:right;
width:400px;
font-size:10px;
line-height:10px;
color:#5d5949;
padding:10px;
padding-bottom:10px;
min-height:100px;
background-color:#e4f1f5;
border:1px solid #d3e5ea;
}

ol.commentlist li.alt .the_comment {
position:relative;
top:1px;
overflow:auto;
background-color:#effafd;
}

ol.commentlist {
margin:10px 0;
}

ol.commentlist li {
clear:both;
list-style:none;
}

.comment-author {
font-size:10px;
margin-bottom:0;
}

.comment-author a {
color:#005c9e;
text-decoration:none;
}

.commentlist .the_comment a {
color:#005c9e;
}

.commentlist .the_comment a:hover,.comment-author a:hover {
color:#da701a;
text-decoration:none;
}

p.contacts img {
vertical-align:middle;
}

p.contacts {
font:normal 9px/20px Arial, Helvetica, sans-serif;
vertical-align:middle;
}

p.contacts strong {
font:normal 10px Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-weight:700;
}
/*- SUB MENU Blog --------------------------- */
#archive {
width:auto;
margin:10px 0;
}

#archive ul {
margin:0;
list-style:none;
padding:0;
}

#archive ul li {
margin:0;
list-style:none;
padding:0;
}

#archive li a {
font:bold 9px Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
voice-family:inherit;
height:11px;
margin:0;
border-bottom:1px solid #e0e0e0;
text-decoration:none;
}

#archive li li a {
font:bold 9px Arial, Helvetica, sans-serif;
margin:0;
text-decoration:none;
border-left:0 solid #999999;
border-bottom:1px solid #ededed;
background:url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/plus.gif) 0 50% no-repeat;
text-decoration:none;
}

#archive li li a:link,#archive li li a:visited {
color:#bebebe;
display:block;
padding:6px 10px;
}

#archive li a:link,#archive li a:visited {
color:#bebebe;
display:block;
padding:6px 10px;
padding-left:0;
}

#archive li.current a {
color:#da701a;
}

#archive li a:hover {
color:#da701a;
padding:6px 10px;
}

#archive li li a:hover {
color:#da701a;
padding:6px 10px;
}

.tags a {
font:normal 10px Arial, Helvetica, sans-serif;
color:#666666;
margin:0;
text-transform:uppercase;
padding:3px 10px;
}

.tags a:hover {
font:bold 14px Arial, Helvetica, sans-serif;
border-color:0 solid #0066CC;
}

h1.bigtitles {
font:bold 3em "Lucida Grande", sans-serif;
letter-spacing:-2px;
color:#4e4e4e;
margin:10px 0 0;
text-align:left;
}

a.portlinks {
font:bold 2em "Trebuchet MS", sans-serif;
letter-spacing:-1px;
color:#9e9e9e;
}

a.portlinks:hover {
font:bold 2em "Trebuchet MS", sans-serif;
letter-spacing:-1px;
color:#eb5800;
}

a.portlinks img {
vertical-align:middle;
}

small {
font-size:inherit;
}
/*- Portfolio --------------------------- */
.bottombox {
height:auto;
width:520px;
padding:15px;
margin:10px 0;
text-align:right;
background:#fff;
border:3px solid #d0e8f3;
border-radius:10px;
-moz-border-radius:10px;
}

a.portlinks {
font:bold 2em "Trebuchet MS", sans-serif;
letter-spacing:-1px;
color:#9e9e9e;
}

a.portlinks:hover {
font:bold 2em "Trebuchet MS", sans-serif;
letter-spacing:-1px;
color:#eb5800;
}

a.portlinks img {
vertical-align:middle;
}

.website_portbox {
height:100%;
width:auto;
padding:20px;
margin:10px 0;
text-align:left;
overflow:auto;
background:#eef4fc;
background:#fff url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/details.gif) bottom left repeat-x;
border:1px solid #d6e5ec;
border-radius:10px;
-moz-border-radius:10px;
}

.details_para {
float:left;
border:1px solid #d6e5ec;
padding:0;
background:#FFFFFF;
margin:10px 15px 10px 10px;
position:relative;
}

.details_para img {
padding:5px;
}

.details_para a {
border:none!important;
}

.details_para .featured {
position:absolute;
left:0;
top:0;
border:none!important;
}

.website_portbox ul li {
font:normal 9px Arial, Helvetica, sans-serif;
}

.details_para span {
background:#CCCCCC;
padding:5px 10px;
}

.logos_portbox {
height:100%;
padding:5px;
margin:10px 0;
width:200px;
text-align:center;
background:#eef4fc;
background:#fff url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/details.gif) bottom left repeat-x;
border:1px solid #d6e5ec;
border-radius:10px;
-moz-border-radius:10px;
}

ul#logos_portfolio {
clear:both;
overflow:hidden;
height:1%;
margin:auto;
padding:0;
padding-top:20px;
}

ul#logos_portfolio li a img {
border:none;
}

ul#logos_portfolio li {
width:220px;
float:left;
height:290px;
display:inline;
margin:10px 10px 10px 5px;
background:#eef4fc;
background:#fff url(file://///nas001/user$/wayne.ainsworth/My%20Documents/Click%20Conveyancing/NewHtml/images/details.gif) bottom left repeat-x;
border:1px solid #d6e5ec;
border-radius:10px;
-moz-border-radius:10px;
}

ul#logos_portfolio li img {
margin:15px auto auto;
display:block;
}

ul#logos_portfolio h4 {
padding:10px 0 0;
margin:0 0 0 20px;
}

ul#logos_portfolio p {
margin:0 10px 10px 20px;
color:#666666;
font:normal 9px Arial, Helvetica, sans-serif;
}

Wayners
Oct 6th, 2009, 05:20 PM
Managed to sort it out by using css-tables, thanks everyone :)