Hello, I need help with my CSS design, I am trying to line many dives inside a container DIV, interestingly only the first div is well
positioned, the rest lie outside the container all together. I can't figure out what I am doing wrong. Find attached my CSS definitions and also the related code:
CSS:
/* id the for main container of index page elements */
#indexmain{
background-color:#FFFFFF;
font-weight: bold;
color:#00FF00;
width: 100%;
height: 600px;
border-width: 1px;
border-style: solid;
border-color: red;
}
/* id for welcome label */
#welcome {
background-color:#FFFFFF;
color:#00FF00;
padding-top: 5px;
padding-right: 5px;
padding-left:5px;
padding-bottom:5px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 140px;
height: 20px;
border-width: 1px;
border-style: solid;
border-color: red;
top: 160px;
left: 120px;
}
/* id for main container of index elements */
#welcomemain{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 60%;
height: 400px;
border-width: 1px;
border-style: solid;
border-color: red;
top: 192px;
left: 120px;
}
/* id for description of consumer component */
#consumerdescription{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-right-color:#FF0000;
top: 0;
left:0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
}
/* id for label of consumer link */
#consumerlink{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-left-color:#FF0000;
background-color:#CCFF66;
top: 0;
right: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
}
/* id for label of business link */
#businesslink{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-right-color:#FF0000;
background-color:#CCFF66;
bottom: 0;
left: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
}
/* id for description of business component */
#businessdescription{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-left-color:#FF0000;
bottom: 0;
right: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
}
/* id to control positioning of content*/
.centerlinkcontent{
position:absolute;
top:80px;
left: 110px;
}
.centerdescriptioncontent {
position:absolute;
top:50px;
left:20px;
}
.titlelabelconsumer{
width:100%;
height:35px;
background-image:url(../images/Isl_bkgrd.jpg);
background-repeat:repeat-x;
text-align:center;
}
.titlelabelbusiness{
width:100%;
height:35px;
background-image:url(../images/Isl_bkgrd.jpg);
background-repeat:repeat-x;
text-align:center;
top:400px;
}
.searchresultscontainer{
width:812px;;
height:62px;
border-style:solid;
border-color:#FF0000;}
.searchresultsimg{
width:100px;
height:60px;
background-color:#CCCCCC;
left:0px;
border-style:solid;
border-color:#9966CC;
border-width:1px;
}
/*.searchresultsdetail{
position:relative;
width:700px;
height:61px;
text-align:center;
background-color:#CCCCCC;
float:right;
left:101px;
margin:0;
padding:0;
}*/
.productdescription{
position:absolute;
width:300px;
height:36px;
text-align:left;
left:101px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#FFCC00;
border-width:1px;
}
.productmodelno{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:401px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#996600;
border-width:1px;
}
.productmodelyear{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:501px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#00FF00;
border-width:1px;
}
.productprice{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:601px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#000033;
border-width:1px;
}
.productuserid{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:701px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#990000;
border-width:1px;
}
Related Code:
<!---Create a container for the search results --->
<div class="searchresultscontainer">
<div class="searchresultsimg"><!--- creating a resized version of uploaded image of product --->
<cfimage source="#ExpandPath('images/consumer/#Cnsmr_ProductIMAGE#')#" action="resize" width="100" height="60" name="resizedImg" format= "jpg">
<cfimage source="#resizedImg#" action="writeToBrowser"><!---img src="images/consumer/#Cnsmr_ProductIMAGE#"--->
</div>
<div class="productdescription"><font size="+2">#Cnsmr_ProductDESCRIPTION# </font> <font size="+2"></div>
<div class="productmodelno"><a href="showProductDetail.cfm?Cnsmr_ProductCountID=#URLEncodedFormat(TRIM(Cnsmr_ProductCountID))#">#Cnsmr_ProductMODELNo# </font> </a></div>
<div class="productmodelyear"><font size="+2">#Cnsmr_ProductMODELYEAR# </font> </div>
<div class="productprice"><font size="+2">#Cnsmr_ProductPRICE#</font> </div>
<div class="productuserid"><font color="#000066#" size="+2">#User_id#</font></div>
</div>
<!--- end of searchresultscontainer --->
</cfoutput>
Attachments:
-
CSS layout.jpg (57.7 K)
1616 Views
3 Replies
Latest reply:
Nadia-P, Aug 17, 2009 5:46 AM



