Member Avatar for ahsanpervaiz

i am trying to make a css content box with left right and middle images, i am failing as i cant use that content box twice in one page, if i use it twice, then it shows no spacing between two boxes..........Plz give me good idea to make a content box with borders and shading and tell me the easy way to slice the image i have made. here is the html code for it.

<body>
	<div id="wrapper">
   
    <div id="logo">
      <p><img src="images/logo.png" width="251" height="81" alt="logo" /><span id="phone"><img src="images/comments.png" width="38" height="38" alt="call" /> Call us @ 301-366-5411</span></p>
</div>
    
    
         <div id="header">
		 
		      
     <div id="navigation"></div>		
		 
		       
     </div> <!--head closing div-->
       
<div id="leftcolumn">
		 
		    
    
      <div id="content_top"></div>
      
      <div id="content_center"></div>
      
      <div id="content_butt"></div>
        
     
   
    
  <!--    second work info starts from heree-->
     <p> </p>
      
     
		
		
        
        </div>
       <br />
    <Br />
		 <div id="footer">
		       
               
                <p align="center" class="p1">Copyrights all reserved 2009 &copy; CAPITAL AIR QUALITY CONTROL LLC</p>
<p class="p1" align="center">
<a href="index.html" target="_self">Home</a> |
<a href="#" target="_self">Services</a> |
<a href="#" target="_self">Latest Jobs</a> |
<a href="#" target="_self">Contact Us</a>
</p>
               
        
			    
	     </div>   
         </div> <!--wrapper div-->
   
</body>
</html>

and the css code is here

* { padding: 0; margin: 0; }

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 color:#333;
 background-color:#CCC;
 background-image:url(Patterns/mainback.jpg);
}

p {
 padding: 10px;
}

#wrapper { 
 margin: 0 auto;
 width:823px;
 background-color:#FEFEFE;
}

#content { 
 float: left;
 color: #333;
 background: #FFFFFF;
 height: 450px;
 width: 35%;
 display: inline;
}

#header {
 color: #333;
 width: 100%;
/* float: left;*/
 height: 260px;
 background: #6B6659;
 background-image:url(images/header.jpg);
}


#logo {
    padding: 0 0px 0 0px;
	margin-top:0px;
	background-color:#FEFEFE;
	height:90px;

}


#footer { 
 width: 100%;
 height: 140px;
 clear: both;
 color: #333;
 background: #88A904;
 background-image:url(images/footer.png);
 background-repeat:repeat;
}

#navigation {
 width: 606px;
 height: 75px;
 float:right;
margin-top:-15px;
margin-left:0px;
margin-right:0px;

}

#leftcolumn { 
 color: #333;
 background: #FEFEFE;
 height:100%;
}


.content_box1{
	margin-top:150px;
}
	

#content_top{
	background-image:url(images/boxleft.png);
	background-position:left;
	background-repeat:no-repeat;
	width:5px;
	height:181px;
	float:left;
}
#content_center{
	background-image:url(images/box.png);
	background-repeat:repeat-x;
	width:813px;
	height:181px;
	float:left;
	
}
	
#content_butt{
	background-image:url(images/boxright.png);
	background-position:right;
	background-repeat:no-repeat;
	width:5px;
	height:181px;
	float:right;
	
}

please help me

  • 2 Contributors
  • 2 Replies
  • 152 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ahsanpervaiz
Member Avatar for colweb

After a first look at the code and css it looks like you need some padding here and there. But without the images it is hard to tell what is exactly going on.
Could you put the images in a zip file and post it as attachment here? Can then take a second look with the images in place.

Member Avatar for ahsanpervaiz

okay below is the effect i want to achieve, can you tell me how to slice that image in easy mode and how to get the same effect as i designed the content box in photoshop. Please i need help to create such kind of reusable content boxes. be simple in your approach.
check the attached image please, thanks a lot

After a first look at the code and css it looks like you need some padding here and there. But without the images it is hard to tell what is exactly going on.
Could you put the images in a zip file and post it as attachment here? Can then take a second look with the images in place.

getthiseffect.jpg 42.72 KB
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.