 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
Pete1
Joined: 26 Apr 2008
Posts: 4
|
 Posted: Sat Apr 26, 2008 9:08 pm Total newbie |
 |
|
|
I'm working on my first layout and need some help please. The problem is the images and pay now button are overlapping
Not sure if this is due to the CSS or just HTML problems, so feel free to move me to somewhere else if I'm in the wrong place thanks
| Code: |
<div class="salesbox1">
<div style="margin-left:32%"> </div>
<div class="box1heading">
<div align="center">
Home Palette Cleaning Kit
</div>
</div>
<div class="box1records">
<p align="left">Home Palette Cleaning Kit $65.00<br />
+$5.00 Postage</p>
<div align="center">
<img src="images/cleaning_kit0408.jpg" alt="Shannon Lush and Jennifer Fleming Cleaning Kit by Slurpex" width="211" height="140" />
</div>
<p align="left"><a onclick="self.name = 'parent';" target="_blank" href="https://www.paymate.com/PayMate/ExpressPayment?mid=preedman&amt=70.00&ref=cleaning_kit"><img src="https://www.paymate.com/images/Paymate-Express-Banner-190x60.gif" border="0" alt="Pay with Paymate Express"></a></p>
</div>
<div class="box1records">Have you ever wondered where to buy all of those wonderful ingredients mentioned in Spotless, Speedcleaning and Comfy?</div>
<div class="box1records"> Working with Shannon Lush and Jennifer Fleming, we have sourced those hard-to-find items in one Handy Cleaning Kit</div>
<div class="box1records">
</div>
</div>
|
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1169
|
| Posted: Sun Apr 27, 2008 4:07 am |
|
|
|
| They don't overlap on my screen. I looked with Firefox and IE7. |
|
Straystudio
Joined: 14 Apr 2008
Posts: 261
Location: Nord Italy
|
| Posted: Sun Apr 27, 2008 4:51 am |
|
|
|
I can confirm:
good with Internet Explorer 7 and Netscape Navigator 9.
Which Browser have You Pete installed on Your computer?
I have older versions around, to check with as well. |
|
Pete1
Joined: 26 Apr 2008
Posts: 4
|
| Posted: Sun Apr 27, 2008 5:03 am |
|
|
|
So it might be the CSS then if it's not the html?
Last edited by Pete1 on Sun May 18, 2008 4:48 pm; edited 1 time in total |
|
sticks464
Joined: 31 Dec 2006
Posts: 1169
|
| Posted: Sun Apr 27, 2008 10:09 pm |
|
|
|
After looking at the site and all the code and css, give this a try
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
background-color: #808D95;
}
#wrapper {
width:800px;
height:100%;
background:#FFFFFF;
margin:0 auto;
}
.logo {
height:102px;
background:url(images/topheader.jpg);
}
.whitelink {
float:right;
margin:-90px 10px 0 0;
}
.whitelink a:link, .whitelink a:visited, .whitelink a:active {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
.whitelink a:hover {
text-decoration: underline;
}
#menu {
padding:2px 0;
background:#f2a057 url(images/navbg.gif) repeat-x bottom left;
}
#point {
display:table;
padding:0;
margin:0 auto;
list-style:none;
white-space:nowrap;
}
#point li {
display:table-cell;
margin:0;
padding:0;
}
#point li a {
float:left;
font-family:arial;
font-size:1em;
font-weight:bold;
height:2.8em;
line-height:2.8em;
letter-spacing:1px;
padding:0 1em;
text-decoration:none;
color:#fff;
background:#fff url(images/navbg.gif) repeat-x bottom left;
border-right:1px solid #666;
border-left:1px solid #fff;
}
#point li a:hover {
text-decoration:underline;
}
#point li.first {
border-left:1px solid #666;
}
#point li.last {
border-right:1px solid #fff;
}
.pagebody {
background:#fff url(images/pagebg.gif) repeat-x;
width:100%;
padding-top:10px;
}
.pagecontainer {
margin:0 auto;
width:769px;
height:100%;
}
.pagecontainer a {
color:#f48e00;
text-decoration:none;
font-weight:normal;
float:right;
padding-right:5px;
}
.pagecontainer a:link {
color:#f48e00;
text-decoration:none;
font-weight:normal;
float:right;
padding-right:5px;
}
.pagetop {
height:11px;
margin:0 auto;
background:url(images/pagetop.gif);
}
.pagecontent {
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
background-color: #F3F4F3;
width:767px;
}
.pagecontent h4 {
padding:12px 10px 12px 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #8BB300;
}
.pagecontent p {
padding:0 10px 12px 16px;
}
.pagebtm{
height:18px;
background:url(images/pagebtm.jpg);
}
.panelcontainer {
margin:16px 4px 0 4px;
width:769px;
line-height:1.2em;
}
.salesbox1 {
background:#fff;
height:225px;
float:left;
width:250px;
}
.salesbox1 .heading {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
padding:10px 5px 5px 5px;
height:20px;
background-color: #FFC240;
text-align:center;
}
.salesbox1 .records {
text-align:left;
padding:5px;
background:#f3f4f3;
border-bottom:1px solid #ddd;
height:21px;
font-weight:bold;
}
.salesbox1.center {
margin:0 6px;
}
.salesbox1 .extra {
text-align:left;
padding:8px 5px 5px 5px;
background:#f3f4f3;
border-bottom:1px solid #ddd;
height:50px;
font-weight:bold;
}
.clear {
width:796px;
height:5px;
clear:left;
}
.pay {
height:65px;
width:200px;
}
.validate {
width:88px;
height:31px;
margin-top:15px;
}
</style>
<!--[if IE]>
<style type="text/css">
#point {display:inline-block;}
#point {display:inline;}
#point li {float:left;}
#menu {text-align:center;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div class="logo">
<img src="images/logo.jpg" width="182" height="102" border="0" alt="Home Palette Logo" />
<span class="whitelink"><a href="index.html">Home</a> | <a href="index.html">Register </a></span>
</div>
<div id="menu">
<ul id="point">
<li class="first"><a href="sales.html">Products</a></li>
<li><a href="#goto">Tips for Use</a></li>
<li><a href="#goto">Newsletter</a></li>
<li><a href="#goto">FAQ</a></li>
<li><a href="#goto">Media</a></li>
<li><a href="#goto">Retailers</a></li>
<li><a href="#goto">Distribution</a></li>
<li class="last"><a href="#goto">New Products</a></li>
</ul>
</div>
<div class="pagebody">
<div class="pagecontainer">
<div class="pagetop"></div>
<div class="pagecontent">
<h4 class="title_green">Slurpex Product Distribution</h4>
<p>We all accidentally spill things, burn things, shrink things and stain things. The good news is there are solutions to most problems and the answers are contained here at Home Palette. Home Palette is about fixing stains, organising your home life, hints and tips, recycling and having fun while you do it. </p>
<p>It’s brought to you by Shannon Lush and Jennifer Fleming, authors of best-selling books ‘Spotless’, ‘Speedcleaning’ and the fresh-off-the-presses ‘How to be Comfy’. These books offer no-nonsense advice on how tosolve domestic disasters, how to clean quickly and how to make your house a home. </p>
<a href="#">All products have a flat fee $5 postage charge in mainland Australia...</a>
</div>
<div class="pagebtm"></div>
<div class="panelcontainer">
<div class="salesbox1">
<p class="heading">Home Palette Cleaning Kit</p>
<p class="records">Home Palette Cleaning Kit $65.00<br />+$5.00 Postage</p>
<p class="extra">Have you ever wondered where to buy all of those wonderful ingredients mentioned in Spotless, Speedcleaning and Comfy?</p>
<p class="extra"> Working with Shannon Lush and Jennifer Fleming, we have sourced those hard-to-find items in one Handy Cleaning Kit</p>
</div>
<div class="salesbox1 center">
<p class="heading">Books</p>
<p class="extra">In addition to the cleaning products Slurpex also distributes all of the books by Shannon Lush and Jennifer Fleming </p>
<p class="records">Spotless</p>
<p class="records">Speedcleaning</p>
<p class="records">Comfy</p>
</div>
<div class="salesbox1">
<p class="heading">Stain Wheel </p>
<p class="records">Cleaning Wheel </p>
<p class="records">Jennifer Fleming</p>
<p class="records">Speedcleaning</p>
<p class="records">Spotless</p>
<p class="records"> </p>
</div>
<p class="clear"></p>
<p class="pay"><a onclick="self.name = 'parent';" target="_blank" href="https://www.paymate.com/PayMate/ExpressPayment?mid=preedman&amt=70.00&ref=cleaning_kit"><img src="https://www.paymate.com/images/Paymate-Express-Banner-190x60.gif" border="0" alt="Pay with Paymate Express"></a></p>
<p class="validate"><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="20" width="64" border="0" /></a></p>
</div>
</div>
</div> <!--end pagebody-->
</div> <!--End wrapper-->
</body>
</html>
|
|
|
Pete1
Joined: 26 Apr 2008
Posts: 4
|
| Posted: Mon Apr 28, 2008 1:48 am |
|
|
|
| Will do, thanks Sticks! |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
