Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Move the Div individually?

    Hi to all,

    I want to achive below image...


    Below code is output for following image...


    when i try to move one div, another div is moving simultaneously... how to move individually?

    Code:
    <html>
    <head>
    <style type="text/css">
    #circle { width: 150px; height: 150px; background: #000; -moz-border-radius: 75px; -webkit-border-radius: 75px; border-radius: 100px; margin-top:198px; }
    
    
    #circle1 { width: 50px; height: 50px; background: red; -moz-border-radius: 25px; -webkit-border-radius:25px; border-radius: 50px; margin-right:2px;}
      </style>
      <head>
      
      <div id="circle">
      <div id="circle1"></div>
    	</div>
      </html>
    Thansk...

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Remember that border-radius isn't supported in all browsers (IE): http://caniuse.com/border-radius.

    As you can see, I used border-radius: 100% for the circle and set it to a class .circle, since you are probably going to use it again.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    			body {
    				width: 150px;
    				margin: 60px auto;
    			}
    			
    			.circle,
    			.circle:before {
    				-webkit-border-radius: 100%;
    				   -moz-border-radius: 100%;
    				        border-radius: 100%;
    			}
    			.circle {
    				position: relative;
    			}
    			.circle:before {
    				position: absolute;
    				content: "";
    				-webkit-box-sizing: border-box;
    				   -moz-box-sizing: border-box;
    				    -ms-box-sizing: border-box;
    				        box-sizing: border-box;
    			}
    			
    			#circles {
    				width: 150px; height: 150px;
    				background: #000;
    			}
    			#circles:before {
    				top: -20px; left: -20px;
    				width: 50px; height: 50px;
    				border: 5px solid #000;
    				background: red;
    			}
    		</style>
    	<head>
    	<body>
    		<div id="circles" class="circle"></div>
    	</body>
    </html>
    If these are vital to the page, you may want to consider using PIE .htc: http://css3pie.com/ which adds full support to IE.
    Last edited by Sammy12; 10-01-2012 at 04:35 AM.

  • Users who have thanked Sammy12 for this post:

    formdev1 (10-01-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •