Member Avatar for drfarzad

how can we create css form like this : iranhost.com
all of parts and icon are in many boxes .

  • 2 Contributors
  • 1 Reply
  • 96 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by macneato
Member Avatar for macneato

I'd go about it by positioning containers relatively, then having all the corners positioned in a sprite relative to that container. Using a transparent GIF would probably do the trick.

Eg.

.right_roundedcorners {position:absolute;background:url(../images/right_module_corners.jpg) no-repeat; width:10px; height:9px;}
		.right_topleft_c {top:0; left:0; background-position: 0 0}
		.right_topright_c {top:0; right:0; background-position: -10px 0}
		.right_bottomleft_c {bottom:0; left:0; background-position: 0 -9px}
		.right_bottomright_c {bottom:0; right:0; background-position: -10px -9px}

Your html would be structured like this

<div class="inside">
					<jdoc:include type="modules" name="right" style="xhtml" />
						<!-- Begin corners -->
						<div class="right_roundedcorners right_topleft_c"></div>
						<div class="right_roundedcorners right_topright_c"></div>
						<div class="right_roundedcorners right_bottomleft_c"></div>
						<div class="right_roundedcorners right_bottomright_c"></div>						
						<!-- End corners -->
            	</div><!-- end inside -->
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.