New course! Every coder should learn Generative AI!
Try a free lesson+ 1
Concentric circle
I wat to create concentric circle in which small circle toches internally down of the large one. but I annot allign or position them properly. plz help me https://code.sololearn.com/WWq4dUWzf8uG/?ref=app
7 Answers
+ 2
thx mr janning fr ur support
+ 1
Something like:
.head{
width:150px;
height :150px;
top:20px;
left:30px;
position : relative ;
border-radius:70%;
background-color:blue;
z-index:2;
}
.head2{
width:100px;
height :100px;/*
top:30px;
left:60px;*/
border-radius:100%;
background-color:white;
z-index:1;
position : absolute ;
margin : 25px ;
}
</style>
</head><body>
<div class="head">
<div class="head2"><div>
<div>
?
+ 1
mr akib reza, thx u so much,
but I dont getting
1.why u given margins, padding to body and div elemet,
2.what is difference between
a, <div class="head">
<div class="head2"></div></div>
&
b, <div class="head"></div>
<div class="head2"></div>
.
3. can u tell me what mistake is doing by me in my code.
+ 1
thx again
0
<!--I would suggest using svg and circle-->
<!doctype html>
<html>
<head>
<title>
</title>
<style>
body{
/*Nothing special*/
margin: 0em;
paddin: 0em
background-color:#00aaaa;
}
div{
margin: 0em;
padding: 0em;
}
.head{
position: fixed;
top: 20px;
left: 20px;
width:150px;
height:150px;
border-radius:50%;
background-color:blue;
z-index:2;
}
.head2{
border-radius:50%;
background-color: red;
z-index:4;
position: relative;
top: 50px;
left: 25px;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="head">
<div class="head2"></div>
</div>
</body>
<script>
</script>
</html>
0
Margins and paddings are for knowing they don't have default margins and padddings so that i can use position better.
The difference between
<div class="head">
<div class="head2">
</div> </div>
is that one is inside of another.
0
<!doctype html>
<html>
<head>
<title>
</title>
<style>
body
{ background-color:#00aaaa;}
.head{
width:150px;
height :150px;
/*Mistake- no position is declared*/
top:20px;
left:30px;
border-radius:70%; /* mistake should be 50% */
background-color:blue;
z-index: 2; /*Mistake should be lower*/
}
.head2{
width:100px;
height :100px;
/*Mistake -no position declared*/
top:30px; /*Mistake should calculate the radius of the bigger circle also*/
left:60px;
border-radius:100%; /* Mistake should be 50% (idk why its 100%)*/
background-color:white;
z-index: 1; /*Mistake this should be higher in so that its visible over head class
note: but it seems working */
}
</style>
</head><body>
<div class="head"><!--Mistake no closing tag--><div>
<div class="head2">
<!--Mistake no closing tag-->
<div>
</body>
<script>
//I found these mistakes.... well at least they seemed wrong to me
</script>
</html>
Often have questions like this?
Learn more efficiently, for free:
Hot today
Cyber security
1 Votes
Personal chat
1 Votes
Bash
0 Votes
Why exception is not handled
1 Votes
Links of cmy codes
4 Votes
Adding image to html
0 Votes
Link
5 Votes