Display problems

2 replies [Last post]

Fri, 2010-09-10 02:23

timbradley

Offline

newbie

Timezone: GMT+10

Joined: 2010-09-10

Posts: 2

Points: 5

Hi All!

First time poster here, and in desperate need of some help!

I'm building a php/MySQL site, and having some serious issues with positioning of elements.

As you can see in the image above, the third row (which should look like the first row) is all out of whack.

Code is as follows:

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=UTF-8" />
<title>LFSdirect - Products</title>
    <link href="resources/css/site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="resources/js/curvycorners.js"></script>
    <script type="text/javascript" src="resources/js/easySlider1.5.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function(){    
            $("#slider_small").easySlider(
                {auto: true,
                continuous: true,
                controlsShow: false});
        });
    </script>
</head>
 
<body>
<div id="site-container">
    <div id="header">
        <img src="resources/images/logos/logo_1.png" height="100" />
          <img src="resources/images/logos/header_lfs.png" style="margin-left:40px;" /></div>
    <div id="top-menu">
<ul>
        <li style="border:none;"><a href="products.php">Products</a></li>
 
        <li><a href="#">Stockists</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">User Reviews</a></li>
        <li><a href="#">Hints &amp; Tips</a></li>
 
    </ul>
    </div>
    <div id="main-content">
        <div class="product">
            <div class="prod-left-img"></div>
            <div class="prod-left-desc">
                <p class="prod-name"><a href="#">Illumagic Blaze X-Series LED Lighting</a></p>
                <p class="prod-desc">Demo Item</p>
            </div>
        </div>
        <div class="product">
            <div class="prod-right-desc">
                <p class="prod-name"><a href="#">Illumagic Blaze C-Series LED Lighting</a></p>
                <p class="prod-desc">User controllable, variable LED aquarium lighting, specifically for hard corals</p>
            </div>
            <div class="prod-right-img"></div>
        </div>
        <div class="product">
            <div class="prod-left-img"></div>
            <div class="prod-left-desc">
                <p class="prod-name"><a href="#">Illumagic Blaze S-Series LED Aquarium Lighting</a></p>
                <p class="prod-desc">User controllable, variable LED aquarium lighting, specifically for soft corals</p>
            </div>
        </div>
    </div>
</div>
</body>
 
</html>

CSS:

/* CSS Document */
 
/*LAYOUT DATA*/
body{
	background-color:#000;
}
 
#site-container{
	position:relative;
	top:0px;
	width:800px;
	margin-left:auto;
	margin-right:auto;
}
 
#main-content{
	width:800px;
	margin:0px;
	position:relative;
	top:10px;
	}
 
#header{
	margin:0px;
	padding:0px;
	position:relative;
	top:0px;
}
#header img{
	margin:0px;
	padding:0px;
}
 
#top-menu{
	width:800px;
	height:30px;
	margin:0px auto;
	position:relative;
	top:10px;
	background-color:#29ABE2;
}
 
#top-menu ul{
	position:absolute;
	left:0px;
	margin:5px 0px 0px 0px;
	padding:0px;
	}
#top-menu li{
	list-style:none;
	display:block;
	float:left;
	width:100px;
	text-align:center;
	margin:0px;
	color:#000;
	border-left:solid 1px #003;
}
 
#top-menu li:hover{
	background-color:#EFA91F;
}
 
/*Product Boxes*/
 
.prod-left-img{
	height:180px;
	width:180px;
	background:#CCC;
	display: inline-block;
	float:left;
	/*position:relative;*/
	margin-left:10px;
	margin-top:10px;
	margin-bottom:10px;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
}
 
.product{
	position:relative;
	top:20px;
	left:0px;
}
.prod-left-desc{
	/*position:relative;*/
	display:inline-block;
	float:right;
	height:180px;
	width:570px;
	margin-right:10px;
	margin-top:10px;
	margin-bottom:10px;
	background:#000;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
	top:20px;
	border:solid 1px #FFF;
 
}
 
.prod-right-img img{
	margin:15px;
}
 
.prod-right-img{
	height:180px;
	width:180px;
	background:#CCC;
	display:inline-block;
	float:right;
	/*position:relative;*/
	margin-right:10px;
	top:0px;
	margin-top:10px;
	margin-bottom:10px;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
}
 
.prod-right-desc{
	/*position:relative;*/
	display:inline-block;
	float:left;
	height:180px;
	width:570px;
	margin-left:10px;
	margin-top:10px;
	margin-bottom:10px;
	background:#000;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
	top:0px;
	border:solid 1px #FFF;
 
}
 
.prod-left-img img{
	margin:15px;
}
 
.prod-left-desc select{
	position:relative;
	top:30px;
	left:300px;	
}
 
/*FONT STYLES*/
 
@font-face {
	font-family: 'PTSansRegular';
	src: url('/resources/type/PT_Sans-webfont.eot');
	src: local('☺'), url('/resources/type/PT_Sans-webfont.woff') format('woff'), url('/resources/type/PT_Sans-webfont.ttf') format('truetype'), url('/resources/type/PT_Sans-webfont.svg#webfont6MwxiJev') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
 
#top-menu li a{
	text-align:center;
	color:#000;
	font-family:"PTSansRegular", Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:none;
}
 
.prod-name{
	color:#29abe2;
	font-family:"PTSansRegular", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size:14px;
}
 
.prod-name a{
	color:#29abe2;
	font-family:"PTSansRegular", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size:14px;
	text-decoration:none;
}
 
.prod-name a:hover{
	color:#EFA91F;
	text-decoration:underline;	
}
 
.prod-desc{
	color:#FFF;
	font-family:"PTSansRegular", Arial, Helvetica, sans-serif;
	font-size:13px;
}
 
.prod-left-desc p{
	margin: 15px;}
 
.prod-right-desc p{
	margin: 15px;}
 
 
 
/*jQuery Specific*/
 
#slider{}	
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{ 
	width:800px;
	height:400px;
	overflow:hidden; 
}

I'm at a total loss!

Help?!

Thanks in advance

Tim Bradley

Tags:

Beginners CSS Questions

Fri, 2010-09-10 02:39

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8140

Points: 1322

Give .product a width and

Give .product a width and overflow: hidden to contain the floats.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Fri, 2010-09-10 02:43

timbradley

Offline

newbie

Timezone: GMT+10

Joined: 2010-09-10

Posts: 2

Points: 5

Give .product a width and

Thank you! You're a legend!!!

New forum topics

User login

Navigation